{"id":11445,"date":"2016-03-23T16:15:37","date_gmt":"2016-03-23T14:15:37","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=11445"},"modified":"2016-03-20T10:04:45","modified_gmt":"2016-03-20T08:04:45","slug":"grunt-requirejs-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/requirejs\/grunt-requirejs-example\/","title":{"rendered":"Grunt RequireJS Example"},"content":{"rendered":"
\n

Table Of Contents<\/h3>\n
\n
1. Grunt<\/a><\/dt>\n
2. RequireJS<\/a><\/dt>\n
3. Grunt with RequireJS<\/a><\/dt>\n
4. Example<\/a><\/dt>\n
5. Summary<\/a><\/dt>\n
6. Download<\/a><\/dt>\n
7. Links<\/a><\/dt>\n<\/dl>\n<\/div>\n

<\/a>1. Grunt<\/h2>\n

The main pre requisite that you need in order to follow this example is to have NodeJS installed in your environment. You can check the installation instructions here https:\/\/nodejs.org\/en\/<\/a>.<\/p>\n

Grunt is a JavaScript based task runner. It is quite simple to use since everything is about configuring what tasks you want to execute and in what order. You can specify all these tasks in a single Grunt file configuration. One of the keys about Grunt success is its amount of available plugins (http:\/\/gruntjs.com\/plugins<\/a>). For more information about grunt please visit http:\/\/gruntjs.com\/<\/a>.<\/p>\n

The first step is to install Grunt within your NodeJS installation. Here you can find the proper instructions: http:\/\/gruntjs.com\/getting-started<\/a>.<\/p>\n

<\/a>2. RequireJS<\/h2>\n

RequireJS is an AMD JavaScript library that supports asynchronous file and module loading. It is optimized for web browser usage but it is also possible to use in Java or Node environments. It is compatible with all main browsers and quite intuitive to use. Its main benefit is that it offers the option to logically structure an application following the AMD principles.<\/p>\n

In the article https:\/\/www.webcodegeeks.com\/javascript\/requirejs\/requirejs-tutorial-how-to-use-requirejs\/<\/a> you can find more information about how to use RequireJS.<\/p>\n

<\/a>3. Grunt with RequireJS<\/h2>\n

In this example we are going to show how to create an application that uses RequireJS in combination with Grunt. We will use Grunt to download and install the needed RequireJS packages and to generate the desired deliverables.<\/p>\n

The first step is to install the RequireJS Grunt plugin, you can do that by typing in your NodeJS console:<\/p>\n

npm install grunt-contrib-requirejs --save-dev\r\n<\/pre>\n
if you want to check that the installation has been successful, you can type:<\/p>\n
npm ls\r\n<\/pre>\n
And something like the following should appear:<\/p>\n
`-- grunt-contrib-requirejs@1.0.0\r\n  `-- requirejs@2.1.22\r\n<\/pre>\n
If this is the case, you are ready to go!<\/p>\n
<\/a>4. Example<\/h2>\n
This is going to be a real life example showing a foreign exchange calculator. The application contains a home page where users enter a base and target currency and an amount and the application returns the used rate and the result applying this rate to the passed amount. The examples modules are shown here:<\/p>\n
HTML view:<\/p>\n
index.html<\/em><\/span><\/p>\n
\/\/check download section to see HTML code\r\n\r\n    $(\".fxcalculation\").click(function(event)\r\n    {\r\n        var fromCur = $(\".fx1\").val();\r\n        var toCur = $(\".fx2\").val();\r\n        var amountFrom = $(\".fxamount\").val();\r\n        var result = fxApp.rate(fromCur, toCur, amountFrom); \/\/created in the wrap.start snippet\r\n        $(\".fxrate\").html(result.rate);\r\n        $(\".fxresult\").html(result.total);\r\n        return false;\r\n    });\r\n\r\n\r\n<\/pre>\n
Main JavaScript file acting as controller:<\/p>\n
App.js<\/em><\/span><\/p>\n
define([\r\n    \"jquery\",\r\n    \"fx\/DataConnector\",\r\n    \"fx\/Calculator\"\r\n], function($, DataConnector, Calculator)\r\n{\r\n    'use strict';\r\n\r\n    var fxApp = {};\r\n\r\n    \/**\r\n     * Calculates from to and puts result in a label\r\n     *\/\r\n    fxApp.rate = function()\r\n    {\r\n        var fromCur = $(\".fx1\").val();\r\n        var toCur = $(\".fx2\").val();\r\n        var amountFrom = $(\".fxamount\").val();\r\n        var fxRate = DataConnector.retrieveData(fromCur, toCur);\r\n        var amountTo = Calculator.calculate(amountFrom, fxRate);\r\n        $(\".fxrate\").html(fxRate);\r\n        $(\".fxresult\").html(amountTo);\r\n        return false;\r\n    };\r\n\r\n    return fxApp;\r\n\r\n});\r\n<\/pre>\n
The module bellow takes care of calculations and currency normalizations:<\/p>\n
Calculator.js<\/em><\/span><\/p>\n
define([], function()\r\n{\r\n    'use strict';\r\n\r\n    var calculator = {};\r\n    \/**\r\n     * very complicated calculations are part of this method\r\n     * @param amount\r\n     * @param rate\r\n     * @returns {number}\r\n     *\/\r\n    calculator.calculate = function(amount, rate)\r\n    {\r\n        return amount * rate;\r\n    };\r\n    return calculator;\r\n});\r\n<\/pre>\n
The following snippet shows a module taking care of the data retrieval for the foreign exchange rates:<\/p>\n
DataConnector.js<\/em><\/span><\/p>\n
define([], function () {\r\n    'use strict';\r\n\r\n    var connector = {};\r\n    \/**\r\n     * data retrieval to get fx rate for a given currency pair (fake)\r\n     * @param from\r\n     * @param to\r\n     * @returns {number} fx rate\r\n     *\/\r\n    connector.retrieveData = function (from, to) {\r\n        var rate = 1;\r\n        if (\"EUR\" === from) {\r\n            if (\"USD\" === to) {\r\n                rate = 1.5;\r\n            }\r\n            else if (\"GBP\" === to) {\r\n                rate = 0.5;\r\n            } else if (\"CHF\" === to) {\r\n                rate = 0.24;\r\n            }\r\n        } else if (\"USD\" === from) {\r\n            if (\"EUR\" === to) {\r\n                rate = 0.5;\r\n            }\r\n            else if (\"GBP\" === to) {\r\n                rate = 0.25;\r\n            } else if (\"CHF\" === to) {\r\n                rate = 1.24;\r\n            }\r\n        } else if (\"GBP\" === from) {\r\n            if (\"EUR\" === to) {\r\n                rate = 1.5;\r\n            }\r\n            else if (\"USD\" === to) {\r\n                rate = 1.75;\r\n            } else if (\"CHF\" === to) {\r\n                rate = 1.33;\r\n            }\r\n        } else if (\"CHF\" === from) {\r\n            if (\"EUR\" === to) {\r\n                rate = 1.22;\r\n            }\r\n            else if (\"USD\" === to) {\r\n                rate = 3.75;\r\n            } else if (\"GBP\" === to) {\r\n                rate = 6.33;\r\n            }\r\n        }\r\n        return rate;\r\n    };\r\n    return connector;\r\n});\r\n\r\n<\/pre>\n
The RequireJS configuration with the used options, for a full list of options available please visit the tutorial https:\/\/www.webcodegeeks.com\/javascript\/requirejs\/requirejs-tutorial-how-to-use-requirejs\/<\/a>:<\/p>\n
main.js<\/em><\/span><\/p>\n
requirejs.config({\r\n    baseUrl: 'js',\r\n    waitSeconds: 20,\r\n    paths: {\r\n        \"jquery\": \"jquery\"\r\n    },\r\n    deps: ['fx\/App'],\r\n\r\n    urlArgs: \"t=20160320000000\"\r\n});\r\n\r\n<\/pre>\n
And finally, the grunt file, where the configuration options are listed and the deliverables are created using the RequireJS Grunt plugin:<\/p>\n
gruntfile.js<\/em><\/span><\/p>\n
module.exports = function (grunt) {\r\n\r\n    \/\/ Project configuration.\r\n    grunt.initConfig({\r\n\r\n            \/\/package json containing needed Grunt plugins\r\n            pkg: grunt.file.readJSON('package.json'),\r\n\r\n            \/\/require js configuration\r\n            requirejs: {\r\n                build: {\r\n                    options: {\r\n                        baseUrl: \"js\",\r\n                        mainConfigFile: \"js\/main.js\",\r\n                        name: \"almond\", \/\/using almond plugin to generate deliverable\r\n                        include: [\"fx\/App\"],\r\n                        wrap: {\r\n                            \"startFile\": \"js\/wrap.start\", \/\/wrapping before deliverable\r\n                            \"endFile\": \"js\/wrap.end\" \/\/wrapping after deliverable\r\n                        },\r\n                        optimize: 'none', \/\/ none \/ uglify2\r\n                        \"out\": \"build\/FxCalculator.js\"\r\n                    }\r\n                }\r\n            },\r\n\r\n            \/\/small tidy up task\r\n            clean: {\r\n                start: [\r\n                    'build\/*'\r\n                ]\r\n            }\r\n        }\r\n    );\r\n\r\n    grunt.loadNpmTasks('grunt-contrib-requirejs');\r\n    grunt.loadNpmTasks('grunt-contrib-clean');\r\n\r\n    \/\/ Default task(s).\r\n    grunt.registerTask('default', [\r\n        'clean:start',\r\n        'requirejs:build'\r\n    ]);\r\n\r\n};\r\n<\/pre>\n
The file above uses the following package.json:<\/p>\n
package.json<\/em><\/span><\/p>\n
{\r\n  \"name\": \"ForeignExchangeCalc\",\r\n  \"version\": \"0.0.1\",\r\n  \"description\": \"Module for foreign exchanges calculations\",\r\n  \"dependencies\": {},\r\n  \"devDependencies\": {\r\n    \"grunt-contrib-requirejs\": \"~0.4.4\",\r\n    \"grunt-contrib-clean\": \"^0.7.0\"\r\n\r\n  },\r\n  \"scripts\": {\r\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\r\n  },\r\n  \"author\": \"Dani Buiza\",\r\n  \"license\": \"\"\r\n}\r\n\r\n<\/pre>\n
Since we are using almond.js in our configuration we put a start and end snippets around our deliverable so the module is exposed globally:<\/p>\n
wrap.start<\/em><\/span><\/p>\n
(function (root, factory) {\r\n    if (typeof define === 'function' && define.amd) {\r\n        \/\/ AMD.\r\n        define(['jquery'], factory);\r\n    } else {\r\n        \/\/ Browser globals\r\n       root.fxApp = factory(root.$);\r\n    }\r\n}(this, function ($) {\r\n<\/pre>\n
wrap.end<\/em><\/span><\/p>\n
    \/\/Register in the values from the outer closure for common dependencies\r\n    \/\/as local almond modules\r\n    define('jquery', function () {\r\n        return $;\r\n    });\r\n\r\n    \/\/Use almond's special top-level, synchronous require to trigger factory\r\n    \/\/functions, get the final module value, and export it as the public\r\n    \/\/value.\r\n    return require('fx\/App');\r\n}));\r\n<\/pre>\n
In order to generate the desired deliverables you just need to type in (where the grunt configuration file is located):<\/p>\n
npm install\r\n<\/pre>\n
in order to install all required NodeJS modules and<\/p>\n
grunt\r\n<\/pre>\n
in order to generate the deliverables. At the end you can open the index.html<\/code> file in a browser and see the results.<\/p>\n
<\/a>5. Summary<\/h2>\n
That’s it. In this example we briefly explained what Grunt and RequireJS are, we listed very useful internal and external resources and we provided a working example that shows how to deliver a RequireJS application using Grunt and the almond.js plugin.<\/p>\n
<\/a>6. Download<\/h2>\n
Download<\/strong>
\nIn the following link you can download a full working example covering the main components explained in this article: requireJsGruntExample.zip<\/a><\/strong><\/div>\n
<\/a>7. Links<\/h2>\n
You can find more in deep information about Grunt, RequireJS or NodeJS in the following links:<\/p>\n