Workflow con Gulp, Sass, Browser-sync y Uglify

En el tutorial Automatiza tu Workflow con Browser-Sync vimos como automatizar los procesos de cambio en los archivos de forma secilla y ágil, pero si queremos que nuestro proyecto sea además productivo y quede optimizado en cuanto a estilos y scripts, necesitamos servir los archivos css y js optimizados para que no nos penalice el sr Google.

En los ultimos años, Webpack ha ganado terreno a Gulp, pero personalmente me siento muy comodo trabajando con este último, ya que debido a las necesidades de cada proyecto que tengo que realizar he trabajado con diferentes workflows personalizados y le he cogido el gustillo, hoy quiero compartir con vosotros un Workflow muy sencillo pero al mismo tiempo efectivo y muy productivo.

Gulp requiere para cada Workflow una versión especifica, o al menos una versión aproximada a la que se ha utilizado para crear el workflow, eso no es problema porque para eso tenemos el Control de versiones de nodeJS, este Workflow en concreto lo he construido con la versión de Gulp 6.10.2.

Podemos instalar cada una de las dependencias del proyecto con gulp en modo –save y hacer un npm init para crear el package.json, pero esa tarea nos la vamos a ahorrar, este es el package.json para hacer npm install e instalar todas las dependencias necesarias:

package.json

{
  "name": "sassuglify",
  "version": "1.0.0",
  "author": "Roque Arnás Izquierdo",
  "homepage": "https://didesweb.com/",
  "private": true,
  "repository": {
    "type": "git",
    "url": "git://github.com/didesweb/sassuglify"
  },
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.18.8",
    "gulp": "^3.9.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-plumber": "^1.1.0",
    "gulp-sass": "^3.1.0",
    "gulp-uglify": "^2.1.2"
  }
}

A continuación creamos el gulpfile.js, en la línea 1 tenemos que modificar el valor de path por la ruta de nuestro proyecto.

gulpfile.js

var path        = "localhost/sassuglify/";
var gulp        = require('gulp');
var browserSync = require('browser-sync');
var reload      = browserSync.reload;
var sass        = require('gulp-sass');
var plumber     = require('gulp-plumber');
var minifycss   = require('gulp-minify-css');
var uglify      = require('gulp-uglify');
gulp.task('browser-sync', function() {
    var files = ['**/*.php'];
    browserSync.init(files, {
    proxy: path,
    notify: false
    });
});
gulp.task('sass', function () {
    gulp.src('assets/styles/**/*.scss')
    .pipe(plumber())
    .pipe(sass())
    .pipe(minifycss())
    .pipe(gulp.dest('app/styles'))
    .pipe(reload({stream:true}));
});
gulp.task('uglify', function() {
    gulp.src('assets/scripts/**/*.js')
    .pipe(plumber())
    .pipe(uglify())
    .pipe(gulp.dest('app/scripts'))
    .pipe(reload({stream:true}));
});
gulp.task('default', ['sass', 'uglify', 'browser-sync'], function () {
  gulp.watch("assets/styles/**/*.scss", ['sass']);
  gulp.watch("assets/scripts/**/*.js", ['uglify']);
});

Ahora solo faltaría crear el resto de archivos del proyecto, al final dejo un enlace a Github con todos los archivos y listo para trabajar (para los que tengáis mucha prisa), antes tenemos que ver que estamos haciendo al procesar los archivos, en primer lugar creamos las variables con las que nos serviremos en las funciones que vamos a ejecutar:

En la variable path escribiremos el nombre de nuestra ruta en local,

var path        = "localhost/sassuglify/";
var gulp        = require('gulp');
var browserSync = require('browser-sync');
var reload      = browserSync.reload;
var sass        = require('gulp-sass');
var plumber     = require('gulp-plumber');
var minifycss   = require('gulp-minify-css');
var uglify      = require('gulp-uglify');

A continuación creamos las funciones para cada proceso (browser-sync, sass y uglify), en browser-sync he utilizado la global “**/*.php” para que se visualicen los cambios de forma automática al modificar archivos php, si no necesitas esta opción puedes dejar el valor en blanco.

gulp.task('browser-sync', function() {
    var files = ['**/*.php'];
    browserSync.init(files, {
    proxy: path,
    notify: false
    });
});
gulp.task('sass', function () {
    gulp.src('assets/styles/**/*.scss')
    .pipe(plumber())
    .pipe(sass())
    .pipe(minifycss())
    .pipe(gulp.dest('app/styles'))
    .pipe(reload({stream:true}));
});
gulp.task('uglify', function() {
    gulp.src('assets/scripts/**/*.js')
    .pipe(plumber())
    .pipe(uglify())
    .pipe(gulp.dest('app/scripts'))
    .pipe(reload({stream:true}));
});

Por último creamos la función con la que ejecutaremos Gulp y lanzaremos los procesos, en este caso he dejado la llamada por defecto (default), aunque se puede modificar:

gulp.task('default', ['sass', 'uglify', 'browser-sync'], function () {
  gulp.watch("assets/styles/**/*.scss", ['sass']);
  gulp.watch("assets/scripts/**/*.js", ['uglify']);
});

Al hacer gulp desde la consola, se lanzarán los procesos de forma ordenada y se actualizarán los estilos y scripts, se servirán ya optimizados, la diferencia con otros Workflows más complejos es que este puede dar algún problemilla de caché, por supuesto, muy fácil de solucionar.

Si solo necesitas sass y prefieres eliminar los procesos que afectan a javascript puedes eliminar lo siguiente:
En el archivo package.json elimina la línea 18: “gulp-uglify”: “^2.1.2”
En el archivo gulpfile.js elimina la línea 8: var uglify = require(‘gulp-uglify’);
En el archivo gulpfile.js elimina la línea 33: gulp.watch(“assets/scripts/**/*.js”, [‘uglify’]);
En el archivo gulpfile.js elimina la función gulp(‘uglify’) por completo (líneas 24 a 30)

Y ya está, nos ahorramos una gran cantidad de procesos, carpetas y tiempo de procesamiento por cada cambio, sencillo, ágil y dinámico, recordad instalar las dependencias con npm install antes de hacer gulp, espero que os sirva de ayuda.

Ver o descargar este workflow en Github