Estrategia DigitalUX y Analítica Web

Introducción a la automatización de tareas con Gulp: NPM (I)

2 Mins de lectura

Conoce cómo podemos ayudarte a mejorar la experiencia de tus usuarios.

¿Qué es Gulp?

En este primer artículo vamos a ver los pasos previos para añadir Gulp a nuestro workflow. Vamos a instalar todo lo necesario para que funcione y vamos a ver como funciona NPM y el package.json que son los pilares básicos para utilizar Gulp.

Node

Lo primero es tener instalado Node.js en nuestro equipo, para ello nos vamos a la web de Node.js y descargamos la version «Recommended for most users», a día de hoy es la 4.4.7. A la vez que instalamos node.js también instalamos NPM.

NPM

NPM es el gestor de paquetes de node. Gracias a NPM tenemos a nuestra disposición miles de librerías para usar en nuestros proyectos.

La versión de NPM que instalamos con Node.js esta desactualizada así que lo primero que vamos a hacer es instalar la última versión.

package.json

El package.json es un archivo en formato JSON que almacena la información del proyecto como el nombre, repositorio, descripción, licencia, dependencias etc…

Para crear este archivo vamos desde la consola a la raíz del directorio de nuestro proyecto y escribimos lo siguiente


npm init

La consola nos hará una serie de preguntas como las que vemos en la imagen

terminal-npm-init

terminal-npm-init

Una vez terminado el proceso se habrá creado un archivo con el nombre package.json

Si lo abrimos con nuestro editor de código veremos lo siguiente


{ "name": "prueba", "version": "1.0.0", "description": "Esto es una prueba", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ "prueba" ], "author": "Hiberus Digital", "license": "MIT" }

Instalando paquetes de NPM

Los paquetes de NPM los podemos instalar de maneral global o local. Para instalar de manera global utilizamos -g para instarlalos de manera local utilizamos –save o -D.

Para instalar un paquete de NPM vamos a la consola y escribimos lo siguiente


npm install npm -g

Vamos a diseccionar el comando.

[npm] Siempre que vayamos a instalar un paquete de NPM empezamos con npm

[install] para que instale el paquete, podemos sustituir install por i y así no tenemos que estar escribiendo install todo el rato.

[nombre-del-paquete] en este caso es Gulp

[-g | –save ] Aquí indicamos como queremos instalar el paquete de manera global o local.

Si instalamos todos los paquetes de manera local con –save o -S se añade una nueva sección a nuestra package.json, aquí se irán añadiendo todos los paquetes que vamos instalando.


"dependencies": { "gulp-postcss": "^6.1.1" }

Esto es fundamental, por eso es muy importante instalar todas las dependencias con -S para que todas se añadan a la sección de dependencies. Si se nos olvida -S no quedara constancia en el package.json de que estamos utilizando este paquete. Si una persona se descarga el proyecto y hace un npm i se instalará todas las dependencias que se han añadido a la sección de dependencies.

Comandos

De ahora en adelante tendremos que familiarizarnos con una serie de comandos de NPM

npm init que como ya hemos visto sirve para inicializar el package.json

npm i [nombre del paquete] [–save | -D] para instalar los paquetes como dependencias en nuestro package.json

npm uninstall –save [nombre del paquete] para desinstalar de manera local un paquete en concreto

npm help para mostrar una lista con todos los comandos disponibles

 

Desde nuestro departamento de Usabilidad, Diseño y Maquetación de Hiberus Digital, damos formación a equipos para entornos de front para agilizar el proceso de trabajo desde el ámbito del front. ¿Te ayudamos?

¿Quieres más información sobre nuestros servicios de UX/UI?

Contacta con nuestro equipo de User Research, User Experience y User Interface

    Artículos relacionados

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    ¡No te pierdas de nada!

    Te mantenemos al dia de tendencias y novedades sobre el futuro del trabajo, formas de hacer crecer tu negocio, liderazgo digital y muchas cosas más..

    Newsletter