Quick start for grunt under Windows

1. Understanding Grunt

What is grunt: He is a set of front-end automation tools and is a NODEJS-based command-line tool. (Grunt and grunt plugins are installed and managed via NPM, so install Nodejs first).

What can grunt do: 1. compressing files 2. merging files 3. Simple grammar checking 4.5.less compilation of monitoring file changes

Grunt Advantages: 1. Reduce labor and streamline work 2. Free, no piracy 3. Plug-ins, and can write their own plug-ins

2.grunt Installation and use

First step: Add Package.json and Gruntfile.js files

Package.json How to add a configuration item:

A: Add manually (the basic grunt plugin is already written in the following section)

{
"Name": "Grunt_test",
"Version": "0.0.1",
"description": "Grunt Test",
"Main": "Index.js",
"Scripts": {
"Test": "Echo \" Error:no test specified\ "&& exit 1"
},
"Devdependencies": {
"Grunt": "^0.4.5",
"Grunt-contrib-jshint": "*",
"Grunt-contrib-uglify": "*",
"Grunt-contrib-cssmin": "*",
"Grunt-contrib-imagemin": "*",
"Grunt-contrib-watch": "*",
"Grunt-contrib-concat": "*"
},
"keywords": [
"Grunt"
],
"Author": "Caihe",
"License": "ISC"
}

Description

Grunt-contrib-jshint: Checking JavaScript syntax

Grunt-contrib-uglify: Compressing and merging JS files

Grunt-contrib-cssmin: Compressing and merging CSS files

Grunt-contrib-imagemin: Image Compression Module

Grunt-contrib-watch: Monitor file changes, make corresponding actions

Grunt-contrib-concat: Merging Files

The cmd window then enters the root directory of the current project Input command line: NPM Install

B: Command line implementation: NPM install Grunt-contrib-jshint--save-dev, etc.

Gruntfile.js File configuration:

The role of Gruntfile.js 1. Read Package.json information 2. Plug-in loading, registering tasks, running tasks

Module.exports = function (grunt) {
Project configuration
Grunt.initconfig ({
Reading configuration Items
Pkg:grunt.file.readJSON ("Package.json"),
Specific tasks
uglify:{
options:{
Add Comment
Banner: "/* This file <%= pkg.name%><%= pkg.version%> \n*/"
},
build:{
The path of the compressed file
SRC: "Src/jquery-1.9.1.js",
The file path after being compressed
Dest: "Dest/jquery-1.9.1.min.js"
}
},
Merge
concat:{
options:{
Add Comment
Banner: "/* This file <%= pkg.name%><%= pkg.version%> merged js\n*/"
},
build:{
The path of the compressed file
SRC: "Src/*.js",
The file path after being compressed
Dest: "Dest/concat.js"
}
},
Jshint: {
Files: [' Gruntfile.js '],
Options: {
}
},
Watch: {
Files: [' src/*.html ', ' src/*.css '],
tasks: [' Jshint ']
}
});
Loading plugins
Grunt.loadnpmtasks ("grunt-contrib-uglify");
Grunt.loadnpmtasks (' Grunt-contrib-jshint ');
Grunt.loadnpmtasks (' Grunt-contrib-watch ');
Grunt.loadnpmtasks (' Grunt-contrib-concat ');
Default execution Tasks
Grunt.registertask ("Default", ["Uglify", "concat", "Jshint", "Watch"]);
};

Then the cmd window enters the root directory of the current project Input command line: Grunt

Executable Grunt Task Grunt Watch can monitor file changes

Quick start for grunt under Windows