Node.js Project building Tools Grunt installation and configuration tutorial _node.js

Grunt based on Node.js, with JS development, so you can use Node.js to achieve cross-platform desktop-side operations, such as file operations, and so on. In addition, grunt and its plug-ins, as a package, can be managed with NPM installation.
So NPM generates a Package.json project file that records the grunt plug-ins that are used in the current project, and grunt calls gruntfile.js the file, parses the tasks within it, and performs the appropriate actions.

Install GRUNT-CLI
in fact, install GRUNT-CLI, where the command line support for grunt is installed (command-line interface, referred to as CLI), after which the command prompt will recognize the grunt command. Installing GRUNT-CLI is not known as installation grunt complete. This is because, grunt itself is not a global use, any specific working directory, if you want to use grunt, you need to install a grunt. This is also because of the different working directory, the automation work that needs to be done through grunt is different, therefore need to be configured independently.

NPM install-g GRUNT-CLI

-save-dev parameter, which means that what you just installed will be added to the Package.json file.

Generating Package.json files
NPM has a requirement for a working directory. This requirement is: there is a package.json at the root directory location
File. This file defines some of the project information (name, description) for the working directory and the dependencies of the package (that is, the NPM module).
You can initialize it by executing the following command

NPM Init

Install grunt and required plug-ins for the current working directory
Method 1
before we installed the grunt in the global catalog, we now need to introduce the current project path, while the required plug-ins may have these:

Merging files: Grunt-contrib-concat
Grammar check: Grunt-contrib-jshint
SCSS Compilation: Grunt-contrib-sass
Compressed file: grunt-contrib-uglify
Monitor file change: Grunt-contrib-watch
Setting up a local server: Grunt-contrib-connect
They can be installed in the following ways:

NPM Install--save-dev grunt
npm install--save-dev plugin 1 plugins 2 plugins 3

This time Package.json a few more code in the folder.

"Devdependencies": {
 "grunt": "0.4.1"
},

Method 2-Manually change Package.json

"Devdependencies": {
"grunt": "~0.4.1",
"grunt-contrib-cssmin": "~0.7.0"
}

Manually in the Package.json file to add this field, will need to rely on the package to add in, if you just install the latest version, you can change to *, and then perform NPM install, will find folders more Node_modules folder, which is stored in the plug-ins we need.

Configuration
in general, use a template directly as a configuration file.

Module.exports = function (grunt) {
 "use strict";
 Grunt.initconfig ({
 //plugin configuration Area
 });
 Load plug-in task, to use who will add who
 grunt.loadnpmtasks (' grunt-contrib-uglify ');
 Grunt.loadnpmtasks (' grunt-contrib-cssmin ');
 Grunt.loadnpmtasks (' grunt-contrib-imagemin ');
 Register Task
 grunt.registertask (' Default ', [' cssmin ', ' imagemin ', ' uglify ']);

Grunt.loadnpmtasks () is the Load plug-in task. In fact, if you want to use which plug-in function, please use this code in this section to add the plug-in task.
Grunt.registertask () is a registration task and defaults to default. The default means that when you use the last time, the directory command prompt character directly input grunt can perform the registration task, equivalent to the implementation of the default task.

Using Custom Tasks
you can sign up for more task commands and use other names. Like what

Grunt.registertask (' Custom ', [' cssmin ', ' imagemin ']);

corresponding to the use of the time, enter:

Grunt Custom