gruntjs 是一个基于nodejs的自动化工具，只要熟悉nodejs或者又一定js经验就可以熟练应用。

最近很火的前端自动化小工具，基于任务的命令行构建工具

我们需要一个自动化的工作流程，让我们更专注于coding，而不是coding外的繁琐工作。于是Grunt应运而生。可以想像，如果在node环境下，一行命令搞定一个场景，So Cool…

package.json //项目自动化所依赖的相关插件。

Gruntfile.js //项目自动化工作流配置文件，重要

1. 安装
   • 确保已经安装node和npm
   • 然后安装grunt的客户端命令行工具 npm install -g grunt-cli, 安装完之后就有了grunt
     压缩css js和合并文件需要grunt插件，grunt只是一个平台，完成各项任务有对应的插件。
   • grunt插件十分丰富，其中带contrib的为官方插件 其他的为第三方插件
2. 安装grunt插件
   • 方式1 在工程目录中创建一个package.json文件，列出依赖的插件和对应的版本即可
     然后cd到工程目录下 执行 npm install
   • 方式2 使用命令行工具 npm install grunt-contrib-watch --save-dev

3. 创建gruntjs工程文件

   gruntjs支持两种语言创建工程文件： gruntfile.js或者gruntfile.coffee
   grunt工程文件遵循node模块定义方式，主题结构为：

   module.exports = function(grunt){        grunt.initConfig({            clean:{                a:['<%=temp%>']             },            b:['<%=temp%>']        });    //获取工程中需要的插件    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-contrib-includes');    //注册任务    grunt.registerTask('build', ['clean','uglify','cssmin','includes','copy','clean']);    //在命令行中执行grunt,就会使用默认任务    grunt.registerTask('default',['build']);

   //一个完整的gruntjs工程文件module.exports = function(grunt){    var rt = 'src-dev/',        indexDir = rt + 'index/',        tempDir  = rt + 'temp/';    console.log(grunt.option('keys'));    grunt.file.exists(tempDir) && grunt.file.delete(tempDir);    grunt.file.markdir(tempDir);    grunt.initConfi({        pkg: grunt.file.readJSON('package.json');        rt: rt,        tempDir: tempDir,        indexDir = indexDir,        clear: { build:['<%=temp%>']},        jsdoc:{            dist:{                src:'<%=index%>doc.js',                options:{                    destination:'<%=rt%>../out/'                }            }        },        cssmin:{            combine:{                files:{                    '<%=temp%>c.min.css':['<%=rt%>common/reset.css', '<%=index%>c.css']                }            }        },        includes:{            files:{                sr:['<%=rt%>**/*.html'],                dest:'<%=temp%>',                cwd:'.',                flatten:true,                options{                    banner:''                }            }        },        watch:{            files:['<%=index%>j.js','<%=index%>*.html', '<%=index%>c.css']            tasks:['clean','uglify','cssmin','includes','copy','clearn'],            options:{ livereload:true}        },        uglify:{            dist:{                files:{                    '<%=temp%>j.js', ['<%=index%>*.js']                }            }        },        copy:{            main:{                files:[{                    flatten: true,                    expand: true,                    filter:'isFile',                    src:['<%=temp%>index.html'],                    dest='<%=rt%>../src/'                }]            }        }        //获取工程中需要的插件        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-contrib-includes');        //注册任务        grunt.registerTask('build', ['clean','uglify','cssmin','includes','copy','clean']);        //在命令行中执行grunt,就会使用默认任务        grunt.registerTask('default',['build']);