准备工作：grunt基于node环境运行，所有先安装node.js
1.安装grunt，通过node的npm的包管理工具
>npm install grunt --save-dev
2.npm init在项目中引导创建一个package.json文件
>npm init
3.新建一个Gruntfile的js文件，主要是写入grunt的配置
module.exprots = function(grunt){
grunt.initConfig({此处写配置的信息})
}
4.几个常用的插件
(1)less监听
>npm install grunt-contrib-less --save-dev
a.配置信息：
less:{development: {files: {'public/css/home/home.css': 'public/css/home/home.less'}}}
b.注册信息：
grunt.loadNpmTasks('grunt-contrib-less')
c.运行：
>grunt less
(2)watch监听
>npm install grunt-contrib-watch --save-dev
a.配置信息：
watch:{css: {files: [ 'public/css/home/home.less'],tasks:['less'],options:{livereload:true}}}
b.注册信息：
grunt.loadNpmTasks('grunt-contrib-watch')
c.运行：
>grunt watch
(3)浏览器同步测试工具
>npm install browser-sync --save-dev
a.配置信息：
不需要配置信息
b.注册信息：
不需要注册信息
c.运行：
>browser-sync start --server --file "*.html"
(4)css压缩
>npm install grunt-contrib-cssmin --save-dev
a.配置信息：
cssmin: {
target: {
files: [{
expand: true,
cwd: 'public/css/home', //需要压缩的css路径
src: ['*.css', '!*.min.css'], //需要压缩的css
dest: 'build/css/home', //压缩之后的路径
ext: '.min.css' //压缩之后的css后缀名
}]
}
}
b.注册信息：
grunt.loadNpmTasks('grunt-contrib-cssmin')
c.运行：
>grunt cssmin
(5)js合并压缩
>npm install grunt-contrib-uglify --save-dev
a.配置信息：
uglify: {
my_target: {
files: {
'build/js/home/home.min.js': ['public/js/home/home1.js', 'public/js/home/home2.js']
}
}
}
b.注册信息：
grunt.loadNpmTasks('grunt-contrib-uglify')
c.运行：
>grunt uglify
(6)合并css和js
>npm install grunt-contrib-concat --save-dev
a.配置信息：
concat:{
js:{
files:{
'build/js/home/concat.js':['public/js/home/*.js']
}
},
css:{
files:{
'build/css/home/concat.css':['public/css/home/*.css']
}
}
}
b.注册信息：
grunt.loadNpmTasks('grunt-contrib-concat')
c.运行：
>grunt concat
(7)css精灵
>npm install grunt-spritesmith --save-dev
a.配置信息：
sprite:{
all:{
src:["public/img/*.png","public/img/*.jpg"], //需要整理的图片
dest:"build/img/spriteRes.png", //生成一张图片的名称
destCss:"build/css/spriteRes.css" //生成css的路径和文件名
}
}
b.注册信息：
grunt.loadNpmTasks('grunt-spritesmith')
c.运行：
>grunt sprite
(8)图片压缩
>npm install grunt-contrib-imagemin --save-dev
a.配置信息：
imagemin:{
release:{
files:[{
expand:true,
src:['build/img/spriteRes.png']
}],
options:{
optimizationLevel:3
}
}
}
b.注册信息：
grunt.loadNpmTasks('grunt-contrib-imagemin')
c.运行：
>grunt imagemin
(9)注册多任务执行