Getting Started with Gulp

I recently discovered a new javascript based build automation tool called Gulp by @wearefractal. It's extremely simple to learn and use and can easily compete with gruntjs for a variety of different projects. It's so easy you'll be a Gulp expert after watching these slides. Well almost, here I'll go through a couple steps to get you started.


In your project folder install the gulp module:

$ npm install gulp

Next, download a gulp plugin like gulp-minify-css or gulp-swig

$ npm install gulp-minify-css gulp-swig

Then create a Gulpfile.js file.

// Gulpfile.js

var gulp = require('gulp');
var swig = require('gulp-swig');
var minifycss = require('gulp-minify-css');

// compile, minify, and copy templates
gulp.task('templates', function(){

// minify and copy styles
gulp.task('styles', function(){

gulp.task('default', function(){'templates', 'styles');

  // watch files and run scripts if they change"./src/templates/*.swig", function(event){'templates');
  });"./src/assets/css/*.css", function(event){'styles');


This example gulp file has 3 tasks: swig template compilation (templates), css minification (styles), and default (default). Each can be run on the command line separately:

$ gulp templates // or
$ gulp styles // or
$ gulp

In this example, the default task runs both the templates and styles tasks plus starts a watcher method that watches for changes to particular files and then runs a specified task when the file changes.

That's it, I think it's all pretty self-explanatory. I've written a couple plugins for it already that I've been using in my projects: gulp-swig and gulp-html-prettify. I'll be following this up to walk you though creating a gulp plugin. In the meantime, make sure you check out their github page where they talk a little about that.

Found this useful?

Edit This Page    You too can edit this page! ... just make your change then submit a pull request!

comments powered by Disqus