grunt vs gulp banner

  • Grunt and Gulp are task runners that allow developers to build web apps and automate repetitive processes, such as file concatenation for image, CSS and JS, and Html shrinking.
  • Now the question is what is a task runner? One word that sums it up is “Automation”. Task runners lead to less work for a developer while performing repetitive tasks like minification, compilation,unit testing etc. A task runner can do most of that repetitive work for you and your team with zero human effort.

Why Grunt?

  • Configuration over scripting: Developers prefer a more declarative configuration style approach to a scripting approach.
  • Plugins/ Priorities task: Over 5800+ plugins that are useful for configuring the task
  • Global runner: Starting in Grunt 0.4.0 (yet to be released) any globally-installed Grunt will defer to a locally-installed Grunt, if it has been installed locally, relative to the gruntfile. This will allow the user to run Grunt globally.
  • Async: Grunt uses async for asynchronous function queue processing, date format for formatting dates and temporary for creating temporary files.

Why Gulp?

  • Automation – Gulp is a webkit that automates time consuming tasks that need to be performed iteratively.
  • Platform-agnostic – Integrations are built into all major IDEs and developers use them with all the backend language
  • Plugins– over 2500+ plugins for streaming file transformations
  • Simple – By providing only a minimal API surface, Gulp is easy to learn and simple to use

Workflow of Grunt (focus on code)

grunt flow

  • Grunt handles task automation using mediatory files which are disk I/O operations and SASS files are compiled and then written to temporary files. The temporary files are used by the autoprefixer and then the final css code is written to the destination file.
  • Grunt uses task runners. The task runner performs repetitive tasks like compile SASS, do autoprefixer and minify the css before any build.
  • One disadvantage in Grunt compared to Gulp, is that it is low speed because it has more I/O operations.
#Sample Grunt File. js

grunt.initConfig({
    sass: {
        dist: {
            files: [{
                src: 'app/*.scss',
                dest: '.tmp/stylesheets',
                expand: true,
                ext: '.css'
            }]
        }
    },
    autoprefixer: {
        dist: {
            files: [{
                expand: true,
                cwd: '.tmp/stylesheets',
                src: '{,*/}*.css',
                dest: 'css/styles'
            }]
        }
    },
    watch: {
        styles: {
            files: ['dev/*.scss'],
            tasks: ['sass:dist', 'autoprefixer:dist']
        }
    }
});
grunt.registerTask('default', ['styles', 'watch']);

Workflow of Gulp(focus on configuration)

Gulp task runner

  • Gulp performs task automation in-memory (RAM). The source SASS file is compiled, the result is passed to the autoprefixer without writing to any mediatory file and the destination file is directly written.
  • Gulp uses a stream based flow. What is a stream? Stream is a mechanism that allows you to read the data for the source file and put it in a pipe that directly sends it to it’s destination. The main advantage of stream is that all processes are performed in-memory
  • This the advantage of Gulp over Grunt: there is no intermediate I/O operation, and all the automation tasks are processed in-memory
#Sample gulp file.js

gulp.task('sass', function () {
  gulp.src('dev/*.scss')
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(gulp.dest('css/styles'));
});
gulp.task('default', function() {
  gulp.run('sass');
  gulp.watch('dev/*.scss', function() {
    gulp.run('sass');
  });
});

Gulp vs. Grunt

GULP LOGO

GULP

GRUNT

  • Faster because of streams
  • 2,500+ plugins
  • Compress files
  • Easy to use
  • Efficient
  • High Quality
  • Easy to learn
  • Focus on configuration
  • 24000+ every day download
  • Huge community
  • 5,800+ plugins
  • Been around longer
  • Used in big production sites
  • Automate just about anything with minimum effort
  • Focuses on code
  • 38000+ every day download

Who wins this battle?

  • According to me both tools are equally useful, both have their own functionality, and both save tons of hours. Though Grunt is slower, it has a much larger community. Gulp is faster, and has a clean API.
  • I would prefer Grunt because it has a large community and more plugins. Also, i would prefer Gulp wherever I require a more convenient and clean API.
  • There is no clear winner here, and both toolkits can perform well and coexist. Conclusion: Both Grunt and Gulp win the battle, based on varying needs 🙂

This article was authored by Parshva Mehta, who is a Software Engineer at Zymr.

Recent Posts

Popular Posts

2 comments

  1. Nice accurate and up-to-date article! I think you may have swapped around the ‘Focus on configuration/code’ in the summary table though.

  2. Hi Timothy,

    Gulp is focused on configuration, Grunt is focused on code, it is already same in summary table.

    Thanks

Leave a Reply

© 2017, Zymr, Inc. All Rights Reserved.