Build Wars: Gulp vs. Grunt

🖥 That’s a presentation embedded above. Use your left/right arrow keys to navigate through it. You might need to click it first in order to focus it

💁‍♂️ New to Gulp? Read all about it in this introductory post

Grunt vs Gulp – Beyond the Numbers

Speed comparison between Grunt and the aforementioned Gulp

All Gulp plugins are just duplex streams that read in data and output data. Everything can be processed in memory, with the output of one stream piped as input to another. Much like Unix pipes.

This gives Gulp a huge speed advantage over Grunt, because I/O is very expensive when compared to in-memory operations. On top of that, Grunt has to compile all the files even if only one has changed, which adds additional build time.

But don’t switch just yet, the article – and this I didn’t know – also mentions that piping is on the Grunt roadmap.

Grunt vs Gulp – Beyond the Numbers →

Gulp – The streaming build system

gulpjs

gulp.task('sass', function() {
  return gulp.src('src/styles/main.scss')
    .pipe(sass({ style: 'compressed' }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('dist/assets/css'))
});

Gulp is a build system and performs tasks such as the ones we do using Grunt: minify, concat, prefix, uglify, etc. Main difference:

Gulp allows you to input your source file(s), pipe them through a bunch of plugins and get an output at the end, rather than configuring each plugin with an input and output—like in Grunt.

Must say that the gulpfile.js embedded below is more readable than its gruntfile.js counterpart where you have to jump through the file when first glancing at it.

Gulp →
Getting started with Gulp →