Grunt Build Tool

Grunt is a JavaScript build tool that simplifies work for tasks that require repetitive repetition, such as compression (Minification), compilation, unit testing, linting, and so on. The grunt ecosystem is very large. You can use grunt to do everything automatically and at the least cost. If you can't find the plugin you need, create a grunt plugin yourself and publish it to NPM. First, Grunt installation: Grunt and Grunt plugins are installed and managed by NPM, NPM is a node. js Package Manager. Grunt 0.4.x must be used in conjunction with the node >= 0.8.0 . js version. The odd version of node. JS is considered to be an unstable development version. Before you install Grunt, make sure that the NPM installed in your current environment is the latest version and that you perform npm update -g npmInstructions to upgrade (in some systems you may need to sudodirective). Grunt command Line (CLI) installed in the Global environment

NPM install-g GRUNT-CLI

Once the above command is executed, the grunt command is added to your system path and can be executed in any directory at a later time.

Note that the installation grunt-cliis not equivalent to installing the grunt! The task of the Grunt CLI is simple: Call and GruntfileGrunt in the same directory. The benefit is that it allows you to install multiple versions of Grunt on the same system at the same time. This allows multiple versions of Grunt to be installed on the same machine at the same time. How the CLI works: every run grunt, he uses node-provided require()The system looks for locally installed Grunt. It is because of this mechanism that you can run in any subdirectory of the project grunt。 If a locally installed grunt,cli is found, it is loaded and passed GruntfileAnd then perform the task you specified ii. prepare a new grunt project Gruntfile:This file is named Gruntfile.jsOr Gruntfile.coffeeThat is used to configure or define tasks (Task) and load the grunt plug-in. package.json：Should be placed in the root directory of the project. And GruntfileIn the same directory, and should be submitted along with the project's source code. In the above list ( package.jsonIn your directory) npm installwill be based on package.jsonEach dependency listed in the file is automatically installed with the appropriate version of the dependency.

{  "name":"mygrunttest",  "version":"0.0.1",  "Description":"JS for uglify",  "author": {    "name":"Saint-Yao",    "Email":"[email protected]"  },  "Repository": {    "type":"git",    "URL":"Https://github.com/tuupola/jquery_lazyload"  },  "devdependencies": {    "Grunt":"^0.4.5",    "Grunt-contrib-concat":"~0.1.1",    "Grunt-contrib-cssmin":"~0.5.0",    "Grunt-contrib-jshint":"~0.3.0",    "grunt-contrib-uglify":"~0.1.2"  }}

The package.json simplest way to add grunt and grunt plugins to existing files is through commands.

NPM Install <module>--save-dev

This command is not only installed, it is <module> also automatically added to the Devdependencies configuration section

Before the project is deployed online, it is common to compress, merge, and copy the source files into the BCH or trunk. After JS Modularization, there is one more analysis, extracting the work of the dependent module in the business code. An automated tool that solves this series of heavy work, called the Build tool. The task flow might be this:

• Task:clean

• Task:uglify

• Task:qunit

• Task:concat

At the command line, enter the directory where the project is located, type the following command npmwill be based on devDependenciesThe configuration that will be required in the gruntand plug-ins to download to your project directory.

NPM Install grunt--save-dev

Grunt-contrib-jshint (JS grammar check), Grunt-contrib-concat (JS merge), grunt-contrib-uglify (using UGLIFYJS compression js), Grunt-contrib-cssmin (CSS compression merge), Grunt-htmlhint (HTML grammar check), the above are common plug-ins.

After the plug-in installation is complete, look at the root directory, you will find the Node_modules directory, including the corresponding plug-in directory. Reference: http://blog.csdn.net/playboyanta123/article/details/43230831

Grunt Build Tool