Skip to content

Instantly share code, notes, and snippets.

@swashcap swashcap/gulp-vs-grunt.md
Last active Aug 29, 2015

Embed
What would you like to do?
A little comparison of GulpJS and GruntJS

Gulp vs. Grunt

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.

Code Example

Compiling Sass to CSS gives an excellent measure of the differences between Gulp and Grunt. These are taken straight from each project’s Readme.

gulp-ruby-sass:

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-sass:

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.

More Reasons to use Gulp

  • 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).

(A few) Reasons to use Grunt

  • The project is older and more stable.
  • It has more available plugins.
  • Tasks are generally more configurable.

References

At least read the first one:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.