Speed up your entire Grunt build process with a single plugin: jit-grunt

Speed up your entire Grunt build process with a single plugin: jit-grunt

Every Grunt project averages 20 plugins per build. And - if you ever used Grunt, and chances are you have - you know it can ramp up to 30 plugins very quickly.

Problem

The standard Grunt way of loading plugins is adding a grunt.loadNpmTasks for each plugin you use. They look like this:

grunt.loadNpmTasks('grunt-contrib-htmlmin');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-browser-sync');
grunt.loadNpmTasks('grunt-contrib-cssnano');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-newer');
grunt.loadNpmTasks('grunt-mocha');

That's a lot of lines of code we'd all rather not have to write and skim through in our Gruntfile.js. It's repetitive. Those plugins are already in our package.json file and all we're doing here is iterating through a list and calling the loadNpmTasks method. And every time we install a plugin we have to remember add it to the list. Every time we uninstall a plugin, we have to also remove it from the list. Another downside is that method of loading plugins can take about 6 to 8 seconds! Or more. That's per build. A slowdown to our build process is not what we need.

Solution

There's a Grunt plugin that does all that for you, in the background, and does it fast. It's called jit-grunt and you can install it via npm:

npm i jit-grunt--save-dev

After that, all you have to do is add one line to your Gruntfile.js:  require('jit-grunt')(grunt). The top part of your Gruntfile.js will look a lot like this:

module.exports = function (grunt) {
  require('jit-grunt')(grunt);

  grunt.initConfig({
    ...
  });

  ...
}

That's it! jit-grunt will scout through your node_modules folder for all the plugins your Grunt tasks require, and will load them only as they are needed. For every packagename jit-grunt will look for three variants: grunt-contrib-packagename, grunt-packagename and just packagename, in order, until it finds the right plugin. And it will load the plugin for you. You can now do without all those redundant loadNpmTasks lines and not just that:  you magically end up saving precious seconds for every build. That 6 to 8 seconds slowdown we referred to before? Gone.

And what did we learn?

Grunt is a terrific build tool we all love and use, but the standard way of loading plugins takes a lot of real estate in our Gruntfile.js and slows down the build process. There's a way to fix that: all we have to do is get jit-grunt and let it do all the work for us. Learn more on installation and usage on the jit-grunt GitHub page. jit-grunt was created by Shotaro Tsubouchi.

Edoardo L'Astorina

Edoardo L'Astorina

Edoardo L'Astorina has 15 years of experience in software development. Edoardo has had a major role in the new Transport for London site and led the development of the new Royal Opera House site. Edoardo has developed sites and apps for Intuit, Stint, JPC, The Crocodile and Miura Edoardo started Blu Frame to help companies develop sites that stand out, load fast and are easy for users to access Edoardo is passionate about risotto, Terrence Malick movies, Oasis songs and rowing