Grunt is “the JavaScript task runner” built on NodeJS. It does what it claims to do: run tasks. Gulp is a build tool that runs on NodeJS. In their words:
Gulp's use of streams and code-over-configuration makes for a simpler and more intuitive build.
Compiling Sass to CSS gives an excellent measure of the differences between Gulp and Grunt. These are taken straight from each project’s Readme.
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
gulp.task('default', function () {
return gulp.src('src/app.scss')
.pipe(sass({sourcemap: true}))
.pipe(gulp.dest('dist'));
});grunt.initConfig({
sass: { // task
dist: { // target
files: { // dictionary of files
'main.css': 'main.scss' // 'destination': 'source'
}
},
dev: { // another target
options: { // dictionary of render options
sourceMap: true
},
files: {
'main.css': 'main.scss'
}
}
}
});
grunt.loadNpmTasks('grunt-sass');
grunt.registerTask('default', ['sass']);Gulp’s major advantage here is what folks are calling “code over configuration”: instead of configuring separate plugins the Grunt way, Gulp minimizes setup and focuses on doing things to files.
As an example of this, adding vendor prefixes via Autoprefixer is a piece of cake. Load up the gulp plugin and add a single line to the task:
gulp.task('default', function () {
return gulp.src('src/app.scss')
.pipe(sass({sourcemap: true}))
.pipe(autoprefixer('last 2 version', 'ie 8'))
.pipe(gulp.dest('dist'));
});Doing the same thing in Grunt requires several lines of configuration.
- Gulp is a build tool; Grunt is primarily a task runner.
- Linking build steps in Gulp is easy to write; Grunt requires linking tasks up together manually.
- Gulp uses NodeJS streams, and it’s way faster. Grunt requires writing files to disk for each task (this may change in the future).
- The project is older and more stable.
- It has more available plugins.
- Tasks are generally more configurable.
At least read the first one: