Donald McKendrick: Roll your own asset Pipeline with gulp.js

Donald McKendrick (@DearDonald) was talking about gulp.js at Codebase lunch and learn.

Ruby has a pre-defined way of handling your assets - CSS and JS. Instead of the asset pipeline wanted to separate out front end from back end so looked at gulp.

By using a dedicated front end build process you can change the back end without having to change the font end process.

What is it?

It's a JS asset pipeline.

How do you use it?

Install using: npm-install glup

Run using gulp - needs a gulp file: gulpfile.js

Can bring in modules via require.js

In the gulpfile define tasks as JavaScript:

gulp.task('sass', function() {
  gulp.src(['src/scss/app.css'])
    .pipe(sass()))
    .pipe(gulp.dest('./build/css'));
});

Runs task default if no arguments passed in.

Can run watch tasks, tell it which tasks to run as required.

Plugins available to do more advanced tasks - such as autoprefixer to set CSS prefixes for different browsers. [see also burobon.io for sass]

Plumber will allow you to handle conditions from pipes, such as error handling.

Livereload is supported - gulp connect plugin.

Packaging is good, well documented and people are working on it.