¿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
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?
