Grunt For Automate Your Workflow

In this article I will show you a tool to save time and effort for such work. That is Grunt a runner Javascript task.

At the first step let the installation and it is relatively simple Grunt because it uses npm package manager. That means you can install via the Node Grunt. First we need to check if your computer is not currently installed Node simple: Open up a terminal and type command npm -v. If the results show a version of Node, your computer would have installed Node then, even if shows "command not found" means you have not installed Node machine. See installation instructions in the download page Node .

Here is simple installation with the command for Grunt:

npm install -g grunt-cli

We have two files that make up the main of the Grunt that is package.json and Gruntfile.js. File package defines all third party dependencies that you will use, then let your Gruntfile control how they are used. A file package.json simple:

{
  "name": "test-project",
  "version": "1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
  }
}

defines the name and version of your project. Package dependencies contains all items you use. You might wonder that mark ~any effect here? Versions required to follow the rules that are defined in the semantic versioner for npm In a nutshell:

• Specifies a version that will be used: 4.5.2
• May indicate the version being used is greater than or less than a minimum version / max:> 4.0.3
• Use markers ~to specify a block version. Example ~ 1.2 equivalent 1.2.x - any version above 1.2.0, but under 1.3

There are many ways to define a version is available, but the summary above 3 things necessary and sufficient. The next step is to create a Gruntfile.jswill carry out the automation here:

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json')
    });
    grunt.registerTask('default', [] );
};

This is a basic framework of Gruntfile. There are two places of interest. The first is in initConfig()function. At that contains all the settings in your project as compiled LESS / SASS files, minify scripts ... The second is on the configuration function below the function, which identifies the tasks. You can see a task is determined by name default. Currently it does not do anything, then this can be added later. Task is essentially creating the bits and peaces queue (subdivide) configured projects and implement them

Try creating an make task javascript minify a single file. There are 4 things we need to do whenever a new task:

• Install the plugin if necessary
• Put it in Gruntfile
• Write a task
• Adding on to the task group task if necessary

The easiest way to find a plugin that is google: Use the following command to installgrunt-contrib-uglify

npm install grunt-contrib-uglify --save-dev

Maybe you'll have to run the command as root if the received message npm ERR! Please try running this command again as root/Administrator.. You just need to add sudo before the command is:

sudo npm install grunt-contrib-uglify --save-dev

Command will automatically add the plug on the file package.json.

Now let star the next step. The next step is to add a plugin to Gruntfile.

module.exports = function(grunt) {
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json')
    });
    grunt.registerTask('default', [] );
};

As we have discussed above, this should be done within the functioninitConfig()

module.exports = function(grunt) {
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            build: {
                src: 'scripts.js',
                dest: 'scripts.min.js'
            }
        }
    });
    grunt.registerTask('default', [] );
};

Even at this time, you can use the command grunt uglifyto execute minify JavaScript files on. However, if you want to use multiple tasks, you need to add it to the task group as follows:

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

In the array [uglify] you can declare multiple tasks running simultaneously with the group's task default. Use the command grunt default to run all tasks are declared in the array.

Every time you want to minify or concat command file to run on the terminal again. This is quite inconvenient. Fortunately, the command watch grunt-contrib-watch has solved that problem for us.

watch: {
    scripts: {
        files: ['dev/js/*.js'],
        tasks: ['concat', 'uglify'],
    },
}

When using the command grunt watch, the process will automatically perform the concat uglify and when to change any files.jsin the folder dev/js/.

There are many plugins to help you automate your task, not only for operations but also to javascripts file css files, image ... Hope this artcle can help you to clear about Grunt, Let's enjoy ...