The is an NPM module to work with .It can generate browserified code that can be used by browsers. grunt-browserify Browserify In this demo, We will learn to create grunt task using grunt-browserify. To demonstrate module use we have created a project named . The project structure looks like following screenshot:- grunt-browserify GruntBrowserifyDemo We need to install , and NPM modules to create a task to use browserify. grunt grunt-browserify grunt-contrib-concat Grunt The code content of are as follows:- package.json {"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 module can be installed using command in terminal.The following screenshot shows the installation. grunt-browserify npm install grunt-browserify –save-dev grunt-browserify The module can be installed using l command in terminal.The following screenshot shows the installation. grunt-contrib-concat npm instal grunt-contrib-conca — save-dev grunt-contrib-concat In this example we will use module.This module provides a list of mathematical methods , etc.This module is basically for programming language.You can find more information on following URL:- arithmetics NPM addition() subtraction(), divide() Node.js https://www.npmjs.com/package/arithmetics We will be using module and browserify it to be used by file in browser environment.Let install arithmetics NPM module using following command in terminal.The following screenshot shows the installation. arithmetics my-script.js npm install arithmetics –save arithmetics The file contains a method name which imports arithmetics module using statement. my-script.js doAddition() require 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 grunt name and .The task takes arithmetics module generates the browserified code in .The tasks then combines and to generate a combined file ad . 2 tasks forArithmetic concat forArithmetic dist/arithmetic.browserified.js concat dist/arithmetic.browserified.js dev/my-script.js dist/bundle.js module.exports = function (grunt) {grunt.initConfig({//Task 1browserify: {forArithmetic: {src: [],dest: 'dist/arithmetic.browserified.js',options: {require: ['arithmetics']}}},//Task 2concat: {'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 file contains the HTML markup code with 3 input element , and .User can enter 2 numbers in number1 and number2 and press the button. the calculate button calls the method to get the of and .The summation is then displayed in third input box.The content of file are as follows:- demo.html number1 number2 result calculate doAddition() summation number1 number2 demo.html <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 command in terminal which will generate the file.The following screenshot shows the grunt command in execution. grunt dist/bundle.js On successful execution of command the modified structure of looks like following screenshot. grunt GruntBrowserifyDemo The following screenshot shows the output of file in a browser. initial demo.html Now we can two numbers and for and input box and press the button.We can see the result will be displayed in input box. enter 2 3 number1 number2 calculate 5 result The code can be from the following URL:- demo downloaded https://github.com/saan1984/GruntBrowserifyDemo ss
