Grunt vs Gulp: Which One Should You Use?

21:53:00 Grunt , Gulp , web design , WEB DEVELOPMENT 0 Comments

Similarities between Grunt and Gulp

• code minification
• code-quality analysis
• image optimization
• vendor-prefixing
• unit-testing
• … and much more

1. which files you want it to process
2. what you want it to do with the files (minify them, analyze them for errors, etc.)
3. where you want it to place the processed files

• Speed Up Your Web Development Workflow with Grunt
• How to Use Gulp

• They’re task runners that can automate portions of our development workflow
• We write the tasks we want them to run using JavaScript
• They both need Node and npm in order to work

Differences between Grunt and Gulp

• The way you configure your tasks. Grunt is configuration-based. Gulp is stream-based.
• The way they run your tasks. Grunt runs the processes you want to execute in a sequential manner. Gulp tries to run them with maximum concurrency, meaning it will try to execute processes in parallel if possible.

Task Configuration

1. Combine all CSS files found inside the src directory into one big stylesheet
2. Minify the stylesheet
3. Placed the minified file into the css directory with the name ofstyles.min.css
4. Report the task-execution time in the command line after the task has completed

Grunt Task Configuration

module.exports = function(grunt) {
  // Report the task-execution time in the command line
  require('time-grunt')(grunt);
  // Task configuration
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    // Combine all CSS files found inside the src directory
    concat_css: {
      dist: {
        src: ['src/*.css'],
        dest: 'css/styles.css'
      }
    },
    // Minify the stylesheet
    cssmin: {
      target: {
        // Write the minified file in the css directory
        files: [{
          'css/styles.min.css': ['css/styles.css']
        }]
      }
    }
  });
  // Load the plugins
  grunt.loadNpmTasks('grunt-concat-css');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  // Use `grunt` command to run the task
  grunt.registerTask('default', ['concat_css', 'cssmin']);
}

Gulp Task Configuration

// Load the plugins
var gulp = require('gulp');
var concatenate = require('gulp-concat-css');
var minify = require('gulp-cssmin');
var duration = require('gulp-duration');
// Task configuration
gulp.task('default', function() {
  gulp.src('src/*.css')
  // Combine all CSS files found inside the src directory
  .pipe(concatenate('styles.min.css'))
  // Minify the stylesheet
  .pipe(minify())
  // Report the task-execution time in the command line
  .pipe(duration('Execution Time: '))
  // Write the minified file in the css directory
  .pipe(gulp.dest('css/'));
});
// Use `gulp` command to run the task

Task Configuration Difference

The magic happens because of the object format that plugins exchange, the so called Vinyl. Vinyl is just an abstraction that describes a virtual file object—one that could refer to an existing file on the FS, a stream, or simply dead-ends with a null.

— Preslav Rachev

Gulp vs Grunt. Why one? Why the Other?

Task Execution

How Grunt Executes a Task

1. Open the processed file from the last process
2. Run the current process
3. Save the changes
4. Close the current processed file so that the next process can access it

How Gulp Executes a Task

Measuring Task-Execution Speed

Source: tech.tmw.co.uk

Grunt vs Gulp Stats

Project Start Date

Usage

Grunt Usage Stats

Gulp Usage Stats

Amount of Plugins

Development Activity

Grunt Development Activity Stats

Gulp Development Activity Stats

Popularity

Grunt Popularity Stats

Gulp Popularity Stats

Data Sources

• npm-stat: grunt
• npm-stat: gulp
• Plugins – Grunt: The JavaScript Task Runner
• gulp.js plugin registry
• github.com/gruntjs/grunt
• github.com/gulpjs/gulp

Conclusion