The first step of installing a plugin is to install the package that contains it in the current project path. For our example, we'll install the contrib-jshint plugin that is contained in the grunt-contrib-jshint package. We can install this package and add it to our project dependencies by using the following command:

$ npm install --save grunt-contrib-jshint

Next, we'll have to load the tasks contained in the plugin package so they can be used in our configuration. This is done using the loadNpmTasks function, provided to us by the grunt object that is passed to us in the configuration file. After adding this, our configuration file should look similar to the following:

module.exports = function (grunt) {
  grunt.initConfig({});
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.registerTask('default', []);
};

Now that we have the package installed and its tasks loaded, we can use the loaded tasks in our configuration. For our example, we had the jshint task loaded, which enables us to use it in a manner similar to the following:

module.exports = function (grunt) {
  grunt.initConfig({
    jshint: {
      sample: {
        files: 'src/*.js'
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.registerTask('default', []);
};

Install the utility's package in the current project path and add it to your dependencies by using the following command:

$ npm install --save load-grunt-tasks

Now we can use it in our configuration file by importing the package and passing the grunt object to it. Now that we're making use of this utility, we can also remove all the loadNpmTasks we were using to load our plugins. This should result in a configuration file similar to the following:

module.exports = function (grunt) {
  require('load-grunt-tasks')(grunt);
  grunt.initConfig({
    jshint: {
      sample: {
        files: 'src/*.js'
      }
    }
  });
  grunt.registerTask('default', []);
};