gulp.js y sus tareas

Posted at Mar 5, 2014 - Tagged as developmentgruntgulpjsjavascript

Hace poco les hable de como integrar Grunt con Font Awesome, y desde entonces me tope con gulp.js, que hace lo mismo que Grunt pero mas rápido y sencillo :D Integrándolo en un proyecto para probarlo me tope con un dilema. Hay ciertas tareas que solamente quiero correr cuando estoy desarrollando y otras cuando estoy preparando para subir a producción. En grunt lo hacia usando distintas tareas con diferentes opciones cada una:

grunt.initConfig({
    sass: {
        dev: {
            options: {
                style: 'expanded',
                banner: '<%= tag.banner %>',
            },
            files: {
                '<%= project.publicPath %>/app.css': '<%= project.css %>',
            },
        },
        dist: {
            options: {
                style: 'compressed',
            },
            files: {
                '<%= project.publicPath %>/app.css': '<%= project.css %>',
            },
        },
    },

    watch: {
        /* */
    },
});

grunt.registerTask('default', ['sass:dev', 'watch']);

grunt.registerTask('build', ['sass:dist']);

De este modo tenemos un CSS comprimido (grunt build) listo para subir al servidor, y cuando estas desarrollando (grunt), el CSS sin comprimir y ademas se queda vigilando por cualquier cambio que se haga para volver a compilarlo. Con gulp podemos conseguir algo similar usando gulp-if:

var isProduction = gutil.env.type === 'production';

gulp.task('css', function() {
    gulp.src(paths.css.src)
        .pipe(sass({ style: 'expanded' }))
        .pipe(gulpif(isProduction, csso()))
        .pipe(gulp.dest(paths.css.dist))
        .on('error', gutil.log);
});

gulp.task('watch', function() {
    /* */
});

gulp.task('build', ['css']);

gulp.task('default', ['build', 'watch']);

Es bastante sencillo. Toma de parámetro una condición y una tarea a correr y solamente hay que pasarle un parámetro a la hora de llamarlo: gulp build --type production. No está mal, pero si la tarea build es la única que corro cuando quiero preparar el código para producción, encontre un modo mas sencillo:

var isProduction = gutil.env._[0] === 'build';

¡Y listo! Con solo eso, me basta correr gulp o gulp build para diferenciar cuando es desarrollo y producción, sin parámetros extra. Al final queda algo similar a esto:

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    gulpif = require('gulp-if'),
    csso = require('gulp-csso'),
    gutil = require('gulp-util');

var isProduction = gutil.env._[0] === 'build';

gulp.task('css', function() {
    gulp.src(paths.css.src)
        .pipe(sass({ style: 'expanded' }))
        .pipe(gulpif(isProduction, csso()))
        .pipe(gulp.dest(paths.css.dist))
        .on('error', gutil.log);
});

gulp.task('watch', function() {
    gulp.watch(paths.css.src, ['css']);
});

gulp.task('build', ['css']);

gulp.task('default', ['build', 'watch']);

Espero les sirva :)

© 2020, Made with ❤️ , cats and Gatsby.