Grunt.js Get Started

Official Site gruntjs.org/docs/getting-started.html

Or look at http://tgideas.qq.com/webplat/info/news_version3/804/808/811/m579/201307/216460.shtml.

What can grunt do for us?
Grunt is an automated tool to automatically compress JS CSS to build related files & folders

First grunt needs to run in Nodejs environment.
Before you install grunt, you can run node-v on the command line to view your node. JS version
Node Environment (>0.8.0)

Node environment includes NPM package management tools
NPM is a node. js Package Manager that runs on the command line and is used to manage the dependencies of the app (more popular point you can install and delete things)

Installing the grunt CLI is also the grunt command-line tool
NPM install-g GRUNT-CLI
When the installation is complete, the location of the installation is informed
/USR/LOCAL/LIB/NODE_MODULES/GRUNT-CLI,

This command will embed the grunt command into your system path, allowing you to run it from any directory (navigate to any directory to run the grunt command).

How do I use it?
Use the Grunt XXX command at the command line to perform pre-set work (pre-set work saved in Gruntfile.js)
PS This command is not installed grunt it just installs the globally available command-line tool

Configuration
The gruntfile.js itself reads the Package.json in the same directory.
So there are actually two files that are configured with JSON primarily project information
The Gruntfile.js store is an automated work setup.

Package.json can be generated automatically via NPM init (recommended)
Remember the contents of the name item. Other optional
About entry JS temporarily unclear
This is the JSON result (removing unnecessary stuff)
{
"Name": "Protest1",
"Version": "0.1.0",
"Dependencies": {
"Grunt-contrib-uglify": "^0.2.7",
"Grunt": "^0.4.4"
}
}

Of course, you can directly copy the contents of the official documents only about the dependent versions we don't know, so rely on the init command to generate the best

Installing grunt
NPM Install grunt--save-dev
Package.json will be changed when finished
Check it out and find out more about this.
"Devdependencies": {
"Grunt": "^0.4.4"
}

About Gruntfile.js
An example
Module.exports = function (grunt) {

Project configuration
Grunt.initconfig ({
Pkg:grunt.file.readJSON (' Package.json '),
Uglify: {
Options: {
Banner: '/*! <%= pkg.name%> <%= grunt.template.today ("Yyyy-mm-dd")%> */\n '
},
Build: {
SRC: ' src/<%=pkg.name%>.js ',
Dest: ' build/<%= pkg.name%>.min.js '
}
}
});

Load plug-ins that provide "uglify" tasks
Grunt.loadnpmtasks (' grunt-contrib-uglify ');

Default task
Grunt.registertask (' Default ', [' uglify ']);
}

Pkg The key in this variable is that the key in the JSON file sets the path of the source file that needs to be compressed in the uglify, and the path of the output
The first half of the file name that is exported is the name defined in the JSON

Run
If name I set to Test1
Name this configuration reads the test1.js in the SRC directory and compresses the output to the build directory