The grunt of web development tool

With the diversification and complexity of the project, the front-end code maintenance and management (packaging, compression and so on) is becoming more and more difficult to maintain, human negligence often leads to unpredictable errors, which brings us a lot of trouble and unnecessary workload, for the front-end project with the development, Each of us will be responsible for different sections, JS, CSS disassembled into their respective modules developed separately, in order to facilitate the management of these modules are independent files, and for the page load speed ( increase the number of files at this time also generated excessive HTTP requests, affecting the page loading speed We have to merge these files, compression and so on, early we will use Yui to do these things but now we need more (such as the project source code to do unit testing and regression testing, and JS grammar automated detection, etc. ) Yui began to meet our needs, At this time grunt turned out, its many plug-ins and flexibility to meet our needs, for the need to repeat the task, such as compression, compilation, unit testing, code inspection, etc., easy to complete, today is mainly the use of grun.

Grunt is not difficult, it is mainly dependent on the Nodejs NPM Package Manager, and a JSON and a JS file, first say the NPM Package Manager, played Nodejs on it should be very familiar with, Here we only need to install Nodejs (the new version of Nodejs Basic integration of NPM), as for the Nodejs installation can point here, this article does not do a detailed introduction, after the installation of the Command Manager (Nodejs installed terminal) Input:

NPM install-g GRUNT-CLI

Install the global command interface in grunt;

And then say JSON, specifically, it should be package.json, it is mainly used to install grunt dependent plug-in, and Nodejs Pakeage.json, when executing NPM install, it will be the main entrance, NPM uses the devdependencies in this JSON to install these plugins, specifically about the package you can click here to see.

Finally is the most important and the most difficult gruntfile.js, it is used to configure and define the task of a master file, grunt run the task interface is mainly dependent on it, it is composed of include functions, task configuration, task load, custom task four parts, as follows:

//wrapper function  module.exports = function  (Grunt) {//task configuration  grunt.initconfig ({Pkg:grunt.file.readJSON (), uglify: {build: {src: ,  Dest:  ' build/<%= pkg.name%>.min.js ' }}});  //task load  grunt.loadnpmtasks ( ' grunt-contrib-uglify ' ); //custom task  grunt.registertask (, [  ' uglify ' ]);};  

There is nothing to say in the wrapper function, it is similar to backbone, mainly used to define an output module, in this module to deal with grunt related transactions, and the task configuration you can see here; the task load is to load the plugins you need such as concat, Jshint , uglify (merge, detect, compress), custom task is the execution command of custom grunt;

Specific people can click here, the code clone to the local execution run to see, after all, manual understanding will be easier to understand than the text description of more. Well, write here today, in fact, this article describes more is not many, to give more is the chain and their own git on a test code, multi-action to combine understanding than light to see the good, we want to look into the grunt of the official website, in addition, if you encounter what can mail me all exchanges. Finally, good night, everybody.