一、了解Gurnt
Grunt 是一个基于任务的JavaScript工程命令行构建工具。
Grunt和Grunt插件，是通过npm安装并管理的，npm是Node.js的包管理器。
了解Grunt前，首先要准备两件事：
1、了解npm（Node Package Manager）：npm是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。
2、安装node：进入nodejs官网（https://nodejs.org/），单击INSTALL下载node安装包，默认安装。安装完成后，进入对应目录，会发现nodejs文件夹下面有npm,直接用npm安装相环境既可。
二、安装Grunt
参考Grunt官网http://www.gruntjs.net/
安装Grunt：npm install -g grunt-cli
注意，安装grunt-cli并不等于安装了Grunt！Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。这样带来的好处是，允许你在同一个系统上同时安装多个版本的Grunt。
三、简单实用Grunt
一个新的Grunt项目，必须在根目录下要有两个文件：package.json 和 Gruntfile.js
package.json: 此文件被npm用于存储项目的元数据，以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件，放置于devDependencies配置段内。
Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee，用来配置或定义任务（task）并加载Grunt插件的。
1. npm init命令会创建一个基本的package.json文件。或者手动创建，如下：
{
"name": "my-project-name",
"description":"test grunt ...",
"version": "0.1.0"
}
2. 安装Grunt和Grunt插件（https://github.com/gruntjs）
向已经存在的package.json 文件中添加Grunt和grunt插件的最简单方式是通过：
npm install –save-dev。此命令不光安装了，还会自动将其添加到devDependencies 配置段中。
3. grunt –help 命令将列出所有可用的任务
四、简单项目流程示例
清空编译工作区 -> copy源文件到编译工作区 -> 合并文件 -> 压缩文件 -> 加时间戳
clean -> copy -> concat -> min -> md5
1. grunt-contrib-clean：Clear files and folders.
2. grunt-contrib-copy：Copy files and folders.
3. grunt-contrib-concat：Concatenate files.
4. grunt-contrib-cssmin：Compress CSS files.
grunt-contrib-uglify：Minify files with UglifyJS.
grunt-contrib-htmlmin：Minify HTML.
5. grunt-filerev：Static asset revisioning through file content hash
第一步：创建package.json
{
"name":"test_grunt",
"description":"test grunt ...",
"version":"0.0.1"
}
第二步：安装对应插件（加上–save-dev，会在package.json中加上devDependencies依赖）
npm install grunt-contrib-clean --save-dev
npm install grunt-contrib-copy --save-dev
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-cssmin --save-dev
npm install grunt-contrib-uglify --save-dev
第三步：创建Gruntfile.js，添加要使用插件配置
'use strict';
module.exports = function(grunt) {
// 构建的初始化配置
grunt.initConfig({
//配置具体任务
});
// 载入要使用的插件
grunt.loadNpmTasks('grunt-contrib-clean');
// 注册刚配置好的任务
grunt.registerTask('default', ['clean']);
}
五、地址
nodejs官网地址：https://nodejs.org/
grunt中文官网地址：http://www.gruntjs.net/
grunt官网插件地址：https://github.com/gruntjs
六、源码
// package.json
{
"name": "test_grunt",
"description": "test grunt ...",
"version": "0.0.1",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-clean": "^0.6.0",
"grunt-contrib-concat": "^0.5.1",
"grunt-contrib-copy": "^0.8.0",
"grunt-contrib-cssmin": "^0.12.3",
"grunt-contrib-uglify": "^0.9.1"
}
}
//Gruntfile.js
'use strict';
module.exports = function(grunt) {
// 构建的初始化配置
grunt.initConfig({
/* 配置具体任务 */
pkg: grunt.file.readJSON('package.json'),
dirs: {
src: 'path',
dest: 'dest//',
},
// clean任务（删除dest/test_grunt/0.0.1 目录下非min的文件）
clean: {
js: ["/*.js", "!/*.min.js"],
css: ["/*.css", "!/*.min.css"]
},
// copy任务（拷贝path目录下的文件到dest目录）
copy: {
main: {
files: [
// includes files within path
{expand: true, src: ['path/*'], dest: '/', filter: 'isFile'},
]
}
},
// concat任务（将dest目录下的a.js和b.js合并为built.js）
concat: {
options: {
separator: 'n',
},
concatCSS: {
src: ['/a.css', '/path/b.css'],
dest: '/built.css',
},
concatJS: {
src: ['/a.js', '/b.js'],
dest: '/built.js',
}
},
// cssmin任务（压缩css）
cssmin: {
target: {
files: [{
expand: true,
cwd: '',
src: ['*.css', '!*.min.css'],
dest: '',
ext: '.min.css'
}]
}
},
// uglify任务（压缩js）
uglify: {
options: {
mangle: {
except: ['jQuery', 'Backbone']
}
},
my_target: {
files: {
'/bulit.min.js': ['/*.js']
}
}
}
});
// 载入要使用的插件
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
// 注册刚配置好的任务
grunt.registerTask('cls', ['clean']);
grunt.registerTask('cpy', ['copy']);
grunt.registerTask('con', ['concat']);
grunt.registerTask('cmpCSS', ['cssmin']);
grunt.registerTask('cmpJS', ['uglify']);
grunt.registerTask('default', ['copy','concat','cssmin','uglify','clean']);
}
PS：
1. 自己配置的任务名称，不能和插件名称一样，否则会造成无限循环
2. 插件名称，除最外层外，中间层名称可自定义
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.e1idc.net
