Exploring A Generator For Gulp.js

03 Feb 2014

Work has begun on our first official Yeoman generator for Gulp.js.

Gulp is a streaming build system which focuses on code over configuration. By harnessing the power of Node streams, it enables faster build times by avoiding the need to write temporary files to disk. You simply put in a file and get a file out.

The Yeoman team don't have any plans on dropping our support for Grunt at all. On the contrary, we feel that both Grunt and Gulp can happily co-exist and hope to support both communities with some automation tooling as best we can.

Our Gulp generator based on our Grunt generator for web apps and you can follow along our progress at generator-gulp-webapp. It's still early days, but our gulpfile already contains early work for handling HTML, CSS, JS and images. See the samples below for a peek at what we're doing:

Require Gulp and load our Gulp plugins:

var gulp = require('gulp');

// Load plugins
var $ = require('gulp-load-plugin')({camelize: true});
var server = $.tinyLr();

Styles:

gulp.task('styles', function () {
    return gulp.src('app/styles/main.scss')
        .pipe($.sass({
          style: 'expanded',
          loadPath: ['app/bower_components']
        }))
        .pipe($.livereload(server))
        .pipe($.autoprefixer('last 1 version'))
        .pipe($.csso())
        .pipe(gulp.dest('dist/styles'))
        .pipe($.size());
});

Scripts:

gulp.task('scripts', function () {
    return gulp.src('app/scripts/**/*.js')
        .pipe($.jshint('.jshintrc'))
        .pipe($.jshint.reporter('default'))
        .pipe($.concat('main.js'))
        .pipe($.livereload(server))
        .pipe($.uglify())
        .pipe(gulp.dest('dist/scripts'))
        .pipe($.size());
});

Images:

gulp.task('images', function () {
    return gulp.src('app/images/**/*')
        .pipe($.livereload(server))
        .pipe($.cache($.imagemin({
            optimizationLevel: 3,
            progressive: true,
            interlaced: true
        })))
        .pipe(gulp.dest('dist/images'))
        .pipe($.size());
});

Watch:

gulp.task('watch', function () {
    // Listen on port 35729
    server.listen(35729, function (err) {
        if (err) {
            return console.error(err);
        };

        // Watch .html files
        gulp.watch('app/*.html');

        // Watch .scss files
        gulp.watch('app/styles/**/*.scss', ['styles']);

        // Watch .js files
        gulp.watch('app/scripts/**/*.js', ['scripts']);

        // Watch image files
        gulp.watch('app/images/**/*', ['images']);
    });
});

Clean:

gulp.task('clean', function () {
    return gulp.src(['dist/styles', 'dist/scripts', 'dist/images'], {read: false}).pipe($.clean());
});

Build:

// Build
gulp.task('build', ['html', 'styles', 'scripts', 'images']);

// Default task
gulp.task('default', ['clean'], function () {
    gulp.start('build');
});

At this time, we welcome community contributions which help us fill in the feature gap in our new generator. Feel free to watch the project repo. We'll let you know as soon as it's finished cooking.

Exploring A Generator For Gulp.js

Further reading