Sin Ideas

Útiles plugins para gulp

December 12, 2014

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']);

Escrito por Eduardo Reveles, dev & gamer viviendo en la caótica Ciudad de México. Sígueme en twitter