Working with Grunt Browserify Task -Tutorial Savvy

The grunt-browserify is an NPM module to work with Browserify.It can generate browserified code that can be used by browsers.
In this demo, “We will learn to create grunt task using grunt-browserify”.
To demonstrate grunt-browserify module use we have created a project named GruntBrowserifyDemo. The project structure looks like following screenshot:-

We need to install grunt, grunt-browserify and grunt-contrib-concat NPM modules to create a Grunt task to use browserify.
The code content of package.json are as follows:-

{
  "name": "grunt-browserify-demo",
  "version": "1.0.0",
  "author": "Sandeep",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-browserify": "^4.0.1",
    "grunt-contrib-concat": "^1.0.0"
  },
  "dependencies": {
    "arithmetics": "^1.0.4"
  }
}

The grunt-browserify module can be installed using npm install grunt-browserify –save-dev command in terminal.The following screenshot shows the grunt-browserify installation.

The grunt-contrib-concat module can be installed using npm install grunt-contrib-concat –save-dev command in terminal.The following screenshot shows the grunt-contrib-concat installation.

In this example we will use arithmetics NPM module.This module provides a list of mathematical methods addition(), subtraction(), divide() etc.This module is basically for Node.js programming language.You can find more information on following URL:-

https://www.npmjs.com/package/arithmetics

We will be using arithmetics module and browserify it to be used by my-script.js file in browser environment.Let install arithmetics NPM module using following command npm install arithmetics –save in terminal.The following screenshot shows the arithmetics installation.

The my-script.js file contains a method name doAddition() which imports arithmetics module using require statement.

var arithmetics = require('arithmetics');
var doAddition = function(){
   var value1 = document.getElementById("number1").value,
       value2 = document.getElementById("number2").value,
       result = document.getElementById("result"),
       number1 = parseInt(value1, 10),
       number2 = parseInt(value2, 10);
    console.log(arithmetics.addition(number1, number2));
    result.value= arithmetics.addition(number1, number2)
};

We have created 2 grunt tasks name forArithmetic and concat.The forArithmetic task takes arithmetics module generates the browserified code in dist/arithmetic.browserified.js.The concat tasks then combines dist/arithmetic.browserified.js and dev/my-script.js to generate a combined file ad dist/bundle.js.

module.exports = function (grunt) {
    grunt.initConfig({
        //Task 1
        browserify: {
            forArithmetic: {
                src: [],
                dest: 'dist/arithmetic.browserified.js',
                options: {
                    require: ['arithmetics']
                }
            }
        },
        //Task 2
        concat: {
            'dist/bundle.js': ['dist/arithmetic.browserified.js', 'dev/my-script.js']
        }
    });
    grunt.registerTask('default', ['browserify','concat']);
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-browserify');
};

The demo.html file contains the HTML markup code with 3 input element number1, number2 and result.User can enter 2 numbers in number1 and number2 and press the calculate button. the calculate button calls the doAddition() method to get the summation of number1 and number2.The summation is then displayed in third input box.The content of demo.html file are as follows:-

<html>
    <head>
        <title>Grunt browserify demo</title>
        <script src="dist/bundle.js"></script>
    </head>
    <body>
     <input type="number" id="number1" placeholder="Enter a Number1">
     <br><br>
     <input type="number" id="number2" placeholder="Enter a Number2">
     <br><br>
     <input type="number" id="result" placeholder="Number1 + Number2" readonly>
     <br><br>
     <button onclick="doAddition()">Calculate</button>
    </body>
</html>

We can run the grunt task using grunt command in terminal which will generate the dist/bundle.js file.The following screenshot shows the grunt command in execution.

On successful execution of grunt command the modified structure of GruntBrowserifyDemo looks like following screenshot.

The following screenshot shows the initial output of demo.html file in a browser.

Now we can enter two numbers 2 and 3 for number1 and number2 input box and press the calculate button.We can see the result 5 will be displayed in result input box.

The demo code can be downloaded from the following URL:-

https://github.com/saan1984/GruntBrowserifyDemo

Mar 3, 2016Sandeep Patel

Working with Grunt Browserify Task

Related

Sandeep Patel