Gulp – Instalación en OS X 10.11

Gulp

Gulp.js es un sistema de construcción que permite automatizar tareas comunes de desarrollo, tales como la minificación de código JavaScript, recarga del navegador, compresión de imágenes, validación de sintaxis de código y un sin fin de tareas más.

No solamente nos soluciona el problema de tener que utilizar múltiples herramientas en nuestro flujo de trabajo sin que nos permite ejecutarlo todo desde un único lugar.

Instalando globalmente Gulp

Gulp requiere Nodejs y Npm (administrador de paquetes de Node) por lo que debes tenerlos instalados antes. Aquí tienes un tutorial para hacerlo.

Abre el Terminal ( + ESPACIO para abrir Spotlight y escribe terminal) y dispara el siguiente comando:

npm install -g gulp

Instalando localmente – package.json

Para un proyecto local necesitas preparar primero un archivo package.json para configurar tus paquetes y dependencias Node/npm. Desde el Terminal cambia el directorio a tú carpeta de proyecto y dispara el siguiente comando para crear el archivo package.json:

npm init

Esto te ayuda a crear el archivo, aquí tienes la salida generada:

tonidg@[~/Desktop]: npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
name: (Desktop) mi_proyecto
version: (1.0.0) 0.0.1
description: ejemplo de mi proyecto
entry point: (index.js)
test command:
git repository:
keywords:
author: Toni DG
license: (ISC)
About to write to /Users/tonidg/Desktop/package.json:
{
"name": "mi_proyecto"
"version": "0.0.1"
"description": "ejemplo de mi proyecto"
"main": "index.js"
"scripts":
"test": "echo \"Error: no test specified\" && exit 1
}
"author": "Toni DG"
"license": "ISC"
}

Tu solo tienes que añadir los valores para Nombre, Versión, Descripción y Autor. Mantén los demás campos en blanco y el archivo será escrito en la carpeta de tú proyecto. Tras esto puedes eliminar algunos de los campos en blanco en un editor de texto, obteniendo algo así:

{
"name": "mi_proyecto",
"version": "0.0.1",
"description": "ejemplo de mi proyecto",
"author": "Toni DG"
}

Fíjate en que la última coma ha sido eliminada.

Una vez tenemos nuestro archivo json situado podemos instalar el paquete Gulp localmente desde la linea de comandos en nuestro proyecto, esto escribirá a nuestro archivo package.json por lo que asegúrate de estar en el directorio del proyecto. Instala mediante:

npm install gulp --save-dev

Ahora nuestro package.json debería ser algo así:

{
"name": "test_proyecto",
"version": "1.0.0",
"description": "test",
"author": "Toni DG",
"devDependencies": {
"gulp": "^3.9.1"
}
}

Para añadir mas plugins, como por ejemplo el de recarga en vivo del navegador utiliza la siguiente sintaxis:

npm install browser-sync --save-dev

El parámetro -save-dev guardará el paquete como una dependencia del proyecto así que escribirá en el archivo package.json. Ahora mostrará algo así:

{
"name": "test_proyecto",
"version": "1.0.0",
"description": "test",
"author": "Toni DG",
"devDependencies": {
"gulp": "^3.9.1",
"browser-sync": "^2.11.1"
}
}

gulpfile.js

Nuestro último archivo de configuración es gulpfile.js el cual le dice a Gulp que debe hacer. Añade este archivo a la raíz de tú proyecto e inserta:

var gulp = require('gulp');

Como tenemos el plugin browsersync instalado vamos a crear una tarea que nos permita ver el proyecto web en el navegador y que este se recargue automáticamente cada vez que cambiemos el CSS. Ahora nuestro gulpfile.js será así:

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
gulp.task('sync', function() {
browserSync.init({
proxy: "my_project.dev",
files: "*.css,*.php,css/*css"
});
});

Ahora ejecutamos nuestra tarea desde la linea de comandos usando:

gulp sync

Eso es todo, esta es una guía básica de inicio y no pretende más que eso, preparar tú entorno. Existen multitud de plugins  disponibles, repásalos y comprueba todo lo que pueden hacer por ti mejorando tus flujos de trabajo.