Grunt vs Gulp: The technical comparison for newbies

So the Javascript world has exploded starting with technologies like NodeJS and the NPM (Node Package Manager), but other technologies have become mainstream and super-popular such as Composer, Gulp, Grunt, AngularJS, CoffeeScript, SASS, ReactJS, and others. All of these technologies are mostly driven by Javascript. SASS powers CSS, but is still powered by Javascript in the background. Web developers need to stay on top. This area of web development is the most important now, so web developers who do not learn them fall behind quickly. That was the case with me until I started to catch up.

Gulp and Grunt are known as javascript-powered task runners. They simply run tasks. Web developers create files known as Gruntfile.js and Gulpfile.JS. If you know Javascript already, this is a boost to your learning curve. The simple difference between the two technologies is that Grunt uses a configuration file while Gulp uses pure Javascript. Both technologies allow you to download a package that can originate from the NPM site (Node Package Manager) or other package libraries such as Bower (which is also integrated well with Twitter Boostrap).

Other packages that work well with both are Express (NodeJS server manager), Uglify (cleaning up and minifying your Javascript), SASS (and LESS), CSS compilers and minifiers, concatenate and more.

Grunt In a Nutshell:

Grunt has a configuration like this:

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);

Basically from the code above, Grunt registers a task and calls the corresponding NPM package. Then, it runs the task with a number of configurations. In this example, you simply register an Uglify task and when you run “Grunt” or “Grunt Default” or “Grunt Uglify”, your javascript in the “src” directory is minified and saved in the “build” directory known as the “dest” configuration. It works well and quickly.

Gulp in a Nutshell:

Gulp does not use a configuration, but instead works with “Gulp tasks”. When you download packages from the Node Package Manager, you simply require those packages as NodeJS modules and then run them in gulp.task like this:

var task = require('task');

gulp.task('task-name', function () {
  return gulp.src('source-files') // Get source files with gulp.src
    .pipe(aGulpPlugin()) // Sends it through a gulp plugin
    .pipe(gulp.dest('destination')) // Outputs the file in the destination folder
})

From this code above, Gulp will run the task known as “task-name” and its associated “piped” options through the “pipe” command that gets chained to the task.

Comparing the two, I prefer Gulp because it is faster to write. It is also easier for newbies. I believe that Grunt works well, but if you do not want to mess with configurations, Gulp is your best bet. It is easier to grasp. Both work with the NodeJS site and NPM, so the exposure is covered. Both can be integrated with Github repositories and a lot of developers use Github to push updates to users.