The Battle between Grunt and Gulp

Authored byParshva M.on Sep 22, 2016 in Topic Technology
Keyword Cloud

Subscribe to email updates

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.

Categories

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

Contact Us

Request a Consultation

Please prove you are human by selecting the Star.

Smartsourcing: A guide to selecting an Agile Development Partner

Smartsourcing is a brief guide to the world of modern technology partnerships. It was developed through a collaborative effort of top Zymr executives as we uncovered a gap in the market between the perception of what outsourcing used to be, and how leading technology innovators are leveraging this globalized approach to value generation. Read this guide to learn...

  • Key factors to consider for your development strategy
  • Popular destinations with a track record of high quality services
  • Selection criteria to narrow your shortlisted vendors

Get access to Smartsourcing eBook

 30 days 3 Months 1 year Still exploring

Register below to download your free eBook

Register below to download your free White Paper

Register below to download your free Guide

Register below to download your full Case Study

Please prove you are human by selecting the Key.

Register below to download your Healthcare Cloud Stack

Register below to download your Microservices eBook