以下例子来自真实项目，有所删减
grunt-test project
目录结构如下
一我的目的：
1.在src-dev目录中开发最终产出于src目录
2.src-dev中的index目录相当于一个widget
二准备工作
完成这项工作我需要那些步骤才能做到呢。
1.需要先准备好合并压缩好的css（common/reset.css+index/c.css）合并压缩放置与一个零时文件夹中待用。
2.其次压缩index/j.js放置于零时文件夹中。
3.再者把css、js、tpl（index/t.html）inline到layout（index.html）中
三编写gruntfile
开始编写gruntfile.js/gruntfile.coffee
module.exports = function(grunt) {
var rt ='src-dev/',//工作根目录
indexDir = rt + 'index/',//widget目录
tempDir = rt + 'temp/';//零时文件夹
console.log(grunt.option('keys'));//获取从命令行传递过来的参数如 grunt --keys=1 日志输出1 这个很有用后面说明
grunt.file.exists(tempDir) && grunt.file.delete(tempDir);//如果存在临时文件则删除，清楚以前生成的文件
grunt.file.mkdir(tempDir);//创建新的零时文件夹
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),//可以用这种方法再读取一个json（config.json）文件当配置,下面的赋值就没有必要了
rt : rt,//运行时只能获取自身的变量，所以需要这样处理
temp: tempDir,
index : indexDir,
clean: {
build: ['<%=temp%>']//<%=temp%> gruntjs的模板类似于宏，这样即使是key也可以轻松处理
},
jsdoc : {
dist : {
src : '<%=index%>doc.js',//源文件夹
options : {
destination : '<%=rt%>../out/'//输出文件夹
}
}
},
cssmin: {
//debug : true,
combine: {
files: {
'<%=temp%>c.min.css': ['<%=rt%>common/reset.css', '<%=index%>c.css']//输出文件夹:目标文件
}
}
},
includes : {//依赖layout文件，请看index/index.html
files: {
//debug: true,
src: ['<%=rt%>**/*.html'],//源文件
dest: '<%=temp%>',//输出文件
cwd: '.',//工作目录
flatten: true,//消除文件路径，/a/b/c.html --> c.html
options: {
banner: ''//在组合好的代码最前面插入内容，html不建议这么做
}
}
},
watch : {//需要监听的文件，如有变化则调用tasks
files : ['<%=index%>j.js','<%=index%>*.html' ,'<%=index%>c.css'],
tasks : ['clean', 'uglify', 'cssmin', 'includes', 'copy', 'clean'],//注意一个任务key用task,value用'clean'，多个任务key用task，value用['clean']
//debug : true,
options: {
livereload: true //这里配置的化打开liveload插件文件变化就会刷新页面
}
},
uglify: {
dist: {
files: {
'<%=temp%>j.js': ['<%=index%>*.js']//没有要注意的地方
}
}
},
copy: {
main: {
files: [
{
flatten: true,//同includes
expand: true,//递归所有目录
filter: 'isFile',
src: ['<%=temp%>index.html'],
dest: '<%=rt%>../src/'
},
//{src: ['<%=temp%>doc/**'], dest: '<%=temp%>../'},//grunt-jsdoc没装成功，没有用到。直接用jsdoc输出的，大家可以试试contrib-yuidoc
]
}
}
});
//加载用到的插件，加载了没用到可以，用到了没加载。。。。。。
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-includes');
grunt.loadNpmTasks('grunt-devtools');//后面特别给出
//注册任务 命令行中grunt 就会执行defult
//grunt watch 就会执行watch 同理
grunt.registerTask('build', ['clean', 'uglify', 'cssmin', 'includes', 'copy', 'clean']);
grunt.registerTask('default', ['build']);
};
重要名词：cwd 工作文件夹
gruntfile.js创建好以后
1.开发中只要grunt watch 然后打开浏览器中的livepage
2.修改监听文件，grunt就会自动执行命令并且刷新文件（这个过程要几秒中稍慢）
四grunt可视化工具
1.chrome 商店中安装grunt f12打开发人员工具条，console面板旁会出现一个grunt的tab
2.点击help会去grunt-devtools的github主页
npm install -g grunt-devtools
3.在gruntfile.js 添加
grunt.loadNpmTasks('grunt-devtools');
4.安装好以后在命令行执行
grunt devtools
用浏览器预览项目中的文件夹，奇迹发生了！开发工具中的grunt面板可以正常使用。
gruntfile中的任务都会被列出，只要用鼠标操作就可以了，日志也会被输出在grunt的面板中。
5.简化操作
windows 可以把执行devtools的命令拷贝创建为一个bat文件直接点击执行
linux-like 可以拷贝创建一个sh文件，用命令行执行sh
五输出api文档
由于grunt-jsdoc没安装成功，我直接用jsdoc输出的文档。大家可以用代理安装或者使用grunt-contrib-yuidoc
结果预览
1.会以类名生成一个独立的文件Hua.html
2.采用jsdoc格式编写的注视会被安类别输出为一个列表，常量不单独列出，会被包含在文档内。
3.已render方法为例
4.js也会被输出在独立的文档中
是不是很酷
以前：编码--修改--切换程序--刷新--查看
现在：编码--修改--查看
如果有两个显示器那真是福音啊！