Adding new grunt tasks

Usually, we'd have a single grunt file with a few basic commands in this file. However, this can get crazy quick. So here we have implemented a loader. All the tasks are inside the grunt-tasks file and named as such.

So if we wanted to add a new plugin to grunt such as babel. We would create a new file called babel.js in the /grunt-tasks` directory. In this file we would define the basic settings.

module.exports = function(grunt, options) {

   return {
      options: {
         sourceMap: true,
         presets: ['es2015']
      },
      dist: {
         files: {
            'dist/app.js': 'src/app.js'
         }
      }
   };

};

now you'll notice this is not the same as the config babel suggest which would look like this.

require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks

grunt.initConfig({
    babel: {
        options: {
            sourceMap: true,
            presets: ['es2015']
        },
        dist: {
            files: {
                'dist/app.js': 'src/app.js'
            }
        }
    }
});

grunt.registerTask('default', ['babel']);

At this point the loader is doing the lifting so we dont need to define anything except the settings. Basically take the config that the vendor suggests. But only copy the json array after the name of the plugin. So for us everything after and omitting babel: {.

However we are not done yet. note the file /grunt-tasks/aliases.js here we define what tasks we want to run given different scenarios.

{
    "default": ["build"],

    "compile-local": [
        "less",
        "notify:finished"
    ],

    "build": [  
        "compile-local"
    ]
}

so to add babel we would all it to our compile-local task list

{
    "default": ["build"],

    "compile-local": [
        "less",
        "notify:finished",
        "babel"
    ], 

    "build": [  
        "compile-local"
    ]
}