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

Este es el último artículo de la serie de automatización de tareas con Gulp. En el vimos los pasos previos para añadir Gulp a nuestro Workflow. En el  segundo artículo, vimos como instalar los diferentes paquetes de NPM. Y en este último artículo, vamos a configurar las tareas de Gulp en nuestro gulpfile.js

Vamos a dividir nuestro gulpfile.js en tres partes. La primera de ellas es la que hace referencia a los paquetes que vamos a utilizar. Para ello vamos a declarar las variables de cada paquete. Para este ejemplo vamos a usar algunos de los paquetes de NPM que vimos en el anterior artículo: BrowserSync y SASS.

var gulp = require('gulp'),
sass = require('gulp-sass'),
newer = require('gulp-newer'),
imagemin = require('gulp-imagemin'),
browserSync = require("browser-sync");

En primer lugar siempre haremos referencia a Gulp, y después referencia a los paquetes que hayamos instalado.

Ahora vamos a ver la segunda parte, vamos a configurar las diferentes tareas para cada paquete, vamos a ir viendo una a una. En la documentación de cada paquete nos suele venir la tarea por defecto. Podemos copiar de allí y luego modificarla a nuestro gusto.

SASS

Vamos a ver la tarea para compilar SASS. Para lanzarla tendremos que ir a la consola y escribir gulp sass

gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});

Podemos cambiar el nombre de la tarea por el que nosotros queramos, para cambiarlo solamente tendremos que sustituir sass por la palabra que nosotros queramos. Si lo vas a cambiar lo mejor es elegir un nombre que haga referencia a la tarea.

return gulp.src('./sass/*.scss')

Aquí vamos a añadir la ruta donde esta alojados nuestros SASS. En este caso compilara cualquier archivo con la extensión scss que este dentro de la carpeta SASS

.pipe(gulp.dest('./css'));

Y aquí añadimos la ruta donde irá el CSS compilado. En este caso se alojará en la carpeta CSS.

Tarea BrowserSync

Ahora vamos a ver la tarea para lanzar un servidor con todo nuestro proyecto.

gulp.task("browserSync", function() {
browserSync({
server: {
baseDir: "./"
}
})
});

Aquí simplemente le vamos a indicar la ruta donde se aloja nuestro proyecto.

Creando nuestras propias tareas

Ahora vamos con la última parte. En esta vamos a crear nuestra propia tarea de Gulp. Vamos a usar el watch de Gulp. Lo que hace el watch es vigilar la carpeta y cada vez que hagamos un cambio en un archivo vuelve a lanzar las tareas. Vamos a ver un ejemplo:

//Watch task
gulp.task("watch", ["browserSync"], function() {
gulp.watch('sass/*.scss', ['sass']);
gulp.watch(["./*.html", "css/*.css", "js/*.js"]).on("change", browserSync.reload);
});

Cada vez que se haga un cambio en cualquier archivo SCSS que este dentro de la carpeta SASS el watch lanzará la tarea SASS. En la siguiente linea le decimos que cada vez que se haga un cambio en un HTML, CSS o JS se refresque BrowserSync, así veremos en la web los cambios que vamos haciendo en el proyecto.

Gulpfile

Y ya por último vamos a ver como quedaría todo nuestro gulpfile.js

«`
var gulp = require(‘gulp’),
sass = require(‘gulp-sass’),
browserSync = require(«browser-sync»);

gulp.task(‘sass’, function () {
return gulp.src(‘./sass/**/*.scss’)
.pipe(sass().on(‘error’, sass.logError))
.pipe(gulp.dest(‘./css’));
});

gulp.task(«browserSync», function() {
browserSync({
server: {
baseDir: «./»
}
})
});

//Watch task
gulp.task(«watch», [«browserSync»], function() {
gulp.watch(‘sass/.scss’, [‘sass’]);
gulp.watch([«./.html», «css/.css», «js/.js»]).on(«change», browserSync.reload);
});

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?