Gulp: Ejemplo de proyecto SASS.

Excerpt

Gulp.js es una herramienta para automatizar tareas repetitivas. Su principal ventaja respecto a otros automatizadores es que no escribe archivos temporales en el disco duro, lo que permite un mayor…

Gulp.js es una herramienta para automatizar tareas repetitivas. Su principal ventaja respecto a otros automatizadores es que no escribe archivos temporales en el disco duro, lo que permite un mayor rendimiento.

Está desarrollado en JavaScript y funciona sobre Node.js, imprescindible tenerlo instalado para trabajar con Gulp.

Instalación

Para instalar Gulp es tan sencillo como escribir en consola:

npm install -g gulp

En caso de querer instalarlo en Linux o en Mac se deberá anteponer el comando de la palabra sudo.

sudo npm install -g gulp

Para verificar que se ha instalado correctamente podemos utilizar el comando:

gulp -v

Configurando proyecto para Gulp.js

Para utilizar Gulp.js en un proyecto debemos primero crear una carpeta para dicho proyecto y ejecutar el comando:

npm init

Este comando nos hace varias preguntas para realizar la configuración inicial de nuestro proyecto, como el nombre del proyecto, si tenemos un repositorio git, descripción del proyecto, la versión actual, etc. Respondemos a todas las preguntas y npm nos creara una archivo package.json con los datos que le acabamos de introducir, donde se guardarán la configuración del paquete y sus dependencias.

El archivo package.json contendrá algo similar a lo siguiente:

Ahora tenemos que instalar las dependencias requeridas para el proyecto, incluido Gulp.js, en nuestro caso:

npm install --save-dev gulpnpm install --save-dev gulp-watchnpm install --save-dev gulp-sassnpm install --save-dev gulp-renamenpm install --save-dev gulp-autoprefixernpm install --save-dev gulp-minifynpm install --save-dev gulp-uglifynpm install --save-dev gulp-notifynpm install --save-dev gulp-livereloadnpm install --save-dev fs-extranpm install --save-dev gulp-sassnpm install --save-dev gulp-renamenpm install --save-dev gulp-autoprefixernpm install --save-dev gulp-minifynpm install --save-dev gulp-uglifynpm install --save-dev gulp-notifynpm install --save-dev gulp-livereloadnpm install --save-dev fs-extra

La opción save-dev es para que las dependencias sean añadidas al archivo de configuración package.json.

• gulp-watch: monitorizar cambios en archivos
• gulp-sass: compilador SASS
• gulp-sass: compilador SASS
• gulp-rename: renombrar archivos
• gulp-autoprefixer: añade etiquetas especificas de navegador
• gulp-minify: minificar CSS
• gulp-uglify: minificar JavaScript
• gulp-notify: mostrar notificaciones de escritorio
• gulp-livereload: actualiza los cambios de la página sin actualizar el navegador
• fs-extra: extiende la funcionalidad básica de fs

Creando tareas en Gulp.js

En la raíz del proyecto hemos de crear un archivo gulpfile.js donde definiremos las tareas.

Lo primero que tenemos que hacer es incorporar las dependencias del proyecto:

Ahora ya podemos crear las tareas. Las tareas en Gulp pueden tener 3 argumentos: nombre de la tarea, tareas que la preceden (opcional) y la función que va ser llamada por la tarea.

Esta sería una tarea llamada ‘styles’, la cual estaría precedida por otra tarea llamada ‘cleanCSS’.

El método src de Gulp se utiliza para leer archivos del directorio indicado. En este caso se leen todos los archivos .scss de la carpeta ‘sass’ y sus subcarpetas. Por el contrario dest ejecuta la tarea opuesta, guarda la información en el directorio indicado.

Pipe se utiliza para concatenar ordenes dentro de una misma tarea.

WATCH

Se utiliza para observar si se realizan cambios en algún archivo de interés y en ese caso ejecutar una tarea.

En este caso se están observando todos los archivos .scss de la carpeta ‘sass’ y sus subcarpetas. Si se produjera algún cambio en dichas carpetas se ejecutaría la tarea ‘styles’.

NOTIFY

Aquí se esta utilizando las notificaciones de escritorio para indicar cuando se ha completado la tarea ‘style’.

LIVERELOAD

Tras compilar los archivos .scss y obtener los nuevos .css actualizamos los cambios en el navegador en vivo sin necesidad de que se tenga que refrescar la página.

Para poder utilizar esta función es necesario instalar en nuestro navegador el plugin LiveReload.

Ejemplo completo para un proyecto SASS

Este ejemplo se encargaría de compilar los archivos .scss para generar las hojas de estilo correspondientes. Además optimiza el código css y javascript.

A través de notificaciones de escritorio se nos indicará cuando se realizan dichas tareas. También se encarga de actualizar automáticamente los cambios en el navegador.

RemoveSync

Es un método que utilizamos para poder eliminar archivos de manera síncrona. De esta manera evitamos el riesgo de que se ejecuten otras tareas que puedan generar archivos antes de que termine la tarea de eliminado, y por lo tanto pudieran ser eliminados.

Start

Este método de Gulp se utiliza para ejecutar tantas tareas como se le indiquen, en nuestro caso dos: ‘styles’ y ‘scripts’.