Útiles plugins para gulp

Cada día amo un poco más usar gulp. Poder automatizar un gran rango de tareas a un solo comando en la consola simplifica mucho el desarrollo. Aquí dejo una lista de plugins que estoy usando en casi todo proyecto:

gulp-load-plugins

En lugar de tener que estar cargando cada plugin a mano, este se encarga de hacerlo automáticamente.

var plugins = require('gulp-load-plugins')();
gulp.task('js', function() {
    gulp.src('file.js')
        .pipe(plugins.uglify())
        .pipe(gulp.dest('file.min.js'));
});

gulp-uglify

Minifica javascript para tener un código más ligero para ponerlo en producción.

gulp-sass / gulp-less

Los nombres lo dicen, ¿no? Compila Less o Sass al CSS de todos los días.

gulp-autoprefixer

Deja de escribir a mano los prefijos para estilos en distintos navegadores, tampoco uses mixins de sass o less. ¡Mejor aplica Autoprefixer a tu CSS y olvídate de problemas!

gulp.task('css', function() {
    gulp.src('file.css')
        .pipe(
            plugins.autoprefixer({
                browsers: ['last 3 versions', '> 1%', 'ie >= 8'],
                cascade: false,
            }),
        )
        .pipe(gulp.dest('file.build.css'));
});

gulp-combine-media-queries

No me gusta tener muchos @media en mi archivo CSS final, una manía. El otro día encontré este plugin que nos junta los media queries que tengamos y que se repitan. Pase de 81 @media a solamente 11. Un poco menos de peso :D

gulp-csso

Minifica CSS de una forma un poco diferente a otros plugins. Ver CSSO para mas información.

gulp-if

Simple condiciones para decidir que tareas realizar en base a variables.

.pipe( plugins.if(production, plugins.csso()) )

gulp-sourcemaps

Nos permite generar sourcemaps en base a los archivos fuente, sin importar el procesado (compilar, autoprefixer, minificar, etc) que hagamos. Útil para debug.

gulp-concat

Para juntar varios archivos en uno mismo. ¡Menos peticiones al servidor!

gulp-watch

Se queda observando cambios a nuestros archivos para compilarlos de nuevo de forma automática.

Al final, un ejemplo de mi gulpfile.js podría ser algo así:

var gulp = require('gulp'),
    plugins = require('gulp-load-plugins')(),
    production = plugins.util.env._[0] === 'build';
var paths = {
    css: {
        src: ['./src/less/**.*'],
        dist: './assets/css/',
    },
    js: {
        src: ['./src/js/**.*'],
        dist: './assets/js/',
    },
};
gulp.task('css', function() {
    gulp.src(paths.css.src)
        .pipe(plugins.if(!production, plugins.sourcemaps.init()))
        .pipe(plugins.less())
        .pipe(
            plugins.autoprefixer({
                browsers: ['last 3 versions', '> 1%', 'ie >= 8'],
                cascade: false,
            }),
        )
        .pipe(plugins.combineMediaQueries({ log: false }))
        .pipe(plugins.concat('style.css'))
        .pipe(plugins.if(production, plugins.csso()))
        .pipe(plugins.if(!production, plugins.sourcemaps.write()))
        .pipe(gulp.dest(paths.css.dist))
        .on('error', plugins.util.log);
});
gulp.task('js', function() {
    gulp.src(paths.js.src)
        .pipe(plugins.if(!production, plugins.sourcemaps.init()))
        .pipe(plugins.concat('app.js'))
        .pipe(plugins.if(production, plugins.uglify()))
        .pipe(plugins.if(!production, plugins.sourcemaps.write()))
        .pipe(gulp.dest(paths.js.dist))
        .on('error', plugins.util.log);
});
gulp.task('watch', function() {
    gulp.watch(paths.css.src, ['css']);
    gulp.watch(paths.js.src, ['js']);
});
gulp.task('build', ['css', 'js']);
gulp.task('default', ['build', 'watch']);