Grunt JavaScript World Build Tool (ii)--grunt project Combat (by Vczero)

First, preface

Next: Grunt JavaScript World Build Tool (i)--grunt use, this time with an open source project Grunt example as a narration. Now the internet company's large-scale JS project, such as Web App, PC, front-end project is a huge project in the use of grunt, with grunt sword in hand you can say that you can quickly build front-end features, of course, not full-time front-end team except, however, or strongly recommend to you grunt. Today, grunt as a team's front-end tool is standard, whether it is the JS API, web App, and so on. Needless to say, the example here is Heatmap.js's grunt application.

Heatmap.js is what, interested can go to understand under. This is only a grunt application, so you can see how the grunt is used in a front-end project and how to improve the efficiency of the front-end project.

Second, the use of grunt in the project

As you can see, there are two important files under the project Package.json (node. JS configuration), Gruntfile.js (Grunt configuration), which are mentioned in the first section of these two files. Go straight:

Third, and see Package.json

As usual, first look at Package.json.

1 {2"Name": "Heatmap.js",3"Version": "2.0.0",4"description": "Dynamic JavaScript heatmaps for the Web",5"Homepage": "http://www.patrick-wied.at/static/heatmapjs/",6"Devdependencies": {7"Grunt": ">= 0.4.1",8"Coffee-script": ">= 1.6.3",9"Grunt-contrib-uglify": ">= 0.2.0",Ten"Grunt-contrib-concat": ">= 0.1.3", One"Grunt-contrib-watch": "0.2.0rc7", A"Grunt-contrib-jshint": ">= 0.3.0" -   }, -"Buildfiles": [ the"Src/config.js",  -"Src/data.js",  -"Src/renderer/canvas2d.js",  -"Src/renderer.js",  +"Src/util.js",  -"Src/core.js" +   ] A}

Through the previous section, know here is more important is devdependencies, you can know, here Grunt 4 plugins: Uglify, Concat, watch, Jshint. At the same time, the author put Buildfiles in this package.json inside, actually can put in Gruntfile.js, personally think this more reasonable.

uglify:minify files with uglifyjs. zip js file;

Concat:js & CSS Merging;

Watch: Monitor tool, monitor file modification, then perform tasks such as: automatic execution of Jshint;

Jshint:js Code validation Tool, to prevent code lexical caused by bugs, sometimes quite rigid, after all, is lexical analysis, but the best use, preferring to follow.

Four, and see Gruntfile.js

The most important thing is the Gruntfil.js file.

1 /*Global Module:false*/2Module.exports =function(Grunt) {//This is a warp configured by Grunt and must be in module. Exports export3 4   varPackagejson = Grunt.file.readJSON (' Package.json ')); Reads the Package.json under the same path, which is actually the Package.json object after the read is completed5   //Project configuration.6 Grunt.initconfig ({7     //Metadata.8 Pkg:packagejson,9Banner: '/*\n * <%= Pkg.title | | Pkg.name%> v<%= pkg.version%> | JavaScript heatmap library\n *\n * Copyright 2008-2014 Patrick Wied <[email protected]>-All rights reserved.\n * D UAL licensed under MIT and Beerware license \ n *\n *:: <%= grunt.template.today ("Yyyy-mm-dd hh:mm")%>\n */\n ',//banner, statement, description, copyright, versionTen     //Task configuration. Merge task configurations:;(function (Global) {Part of a merge}) (This | | window); One concat: { A options: { -Banner: ' <%= banner%> ' + ';(function (global) {',  -Footer: ' \ n} ' (this | | window); ' the       }, - Dist: { - Src:packagejson.buildFiles, -Dest: ' Build/heatmap.js ' +       } -     },  + uglify: {//compression, plus declarations and other information can be found in: Https://github.com/gruntjs/grunt-contrib-uglify A options: { atBanner: ' <%= banner%> ', -Mangletrue, -Compressfalse,//compress must is false, otherwise behaviour change!!!!! -Beautify:false -       }, - Dist: { inSRC: ' build/heatmap.js ', -Dest: ' Build/heatmap.min.js ' to       } +     }, - jshint: {//JS code checksum the options: { *Curlytrue, $Eqeqeq:true,Panax NotoginsengImmed:true, -Latedef:true, theNewcap:true, +Noarg:true, ASubtrue, theUndeftrue, +Unusedtrue, -Bosstrue, $Eqnull:true, $Browsertrue -       }, - gruntfile: { theSRC: ' gruntfile.js ' -       }Wuyi     }, the Watch: {//monitor Https://github.com/gruntjs/grunt-contrib-watch - gruntfile: { WuFiles: ' <%= jshint.gruntfile.src%> ', -tasks: [' Jshint:gruntfile ']  About       }, $ Dist: { - Files:packagejson.buildFiles, -tasks: [' concat ', ' jshint ', ' uglify '] -       } A     } +   }); the  -   //These plugins provide necessary tasks. Load task plug-in $Grunt.loadnpmtasks (' Grunt-contrib-concat '); theGrunt.loadnpmtasks (' grunt-contrib-uglify '); theGrunt.loadnpmtasks (' Grunt-contrib-jshint '); theGrunt.loadnpmtasks (' Grunt-contrib-watch '); the  -   //the default task. Registering the defaults tasks of course, you can register your own tasks such as:Grunt.registertask (' Test ', [' concat ']);

 grunt.registertask (' Default ', [' concat ', ' jshint ', ' uglify ', ' Watch ' );

V. Enable Grunt

Step One: Install the dependency plugin $ npm Install, which will be dependent on the Package.json

Step Two: Configure Gruntfile.js

Step three: $ grunt, effect map or see the first article.

Grunt JavaScript World Build Tool (ii)--grunt project Combat (by Vczero)