Q：Grunt为何物？
A：一个专为JavaScript提供的构建工具。
Q：啥是构建工具？
A：在项目部署上线前，通常要将源文件压缩，合并，并拷贝到bch或trunk中。 在将js模块化后，又多了一个分析，提取业务代码中所依赖模块的工作。 解决这一系列繁重工作的自动化工具，称之为构建工具。
Q：grunt是如何工作的？
A：刚刚接触grunt，举个例子可能不太恰当，但应该可以让你先比较准确的认识她。 就好像一个万能工厂（grunt），只负责执行任务（Task），不关心每个任务到底都干了什么。 这些任务比如：
-
clean:删除临时文件
-
uglify:压缩
-
qunit:测试
-
concat:合并
1、建立 package.json 文件（内容如下），然后运行 npm install 安装其相关依赖的包。
{"name": "the-project-of-name","version": "0.0.1","author": "Jankerli <jankerli@gmail.com>","description": "the-project-of-description","dependencies": {"grunt": "*","grunt-contrib-less": "*","grunt-contrib-watch": "*","grunt-contrib-uglify": "*","grunt-contrib-cssmin": "*","grunt-contrib-copy": "*"}
}
2、建立 Gruntfile.js 文件（如下内容请根据具体项目稍作修改），然后运行 grunt，就会在其根目录下看到 dest 文件夹了，去看看你需要的文件是否都在里面了？
module.exports = function (grunt) {grunt.initConfig({pkg: grunt.file.readJSON('package.json'),// 编译 LESS 文件less: {compile: {files: {'assets/css/app.css': 'assets/css/app.less'}}},// 压缩 CSS 文件cssmin: {options: {report: 'gzip'},combine: {files: {'assets/css/app.min.css': 'assets/css/app.css'}}},// 压缩合并 JS 文件uglify: {options: {report: 'gzip',mangle: true, // Specify mangle: false to prevent changes to your variable and function names.banner: '/** \n' +' * -------------------------------------------------------------\n' +' * Copyright (c) 2013 Jankerli, All rights reserved. \n' +' * http://www.jankerli.com/ \n' +' * \n' +' * @version: <%= pkg.version%> \n' +' * @author: <%= pkg.author%> \n' +' * @description: <%= pkg.description%> \n' +' * ------------------------------------------------------------- \n' +' */ \n\n'},myTarget: {files: {'assets/js/lib/libs.min.js': ['assets/js/lib/jquery-1.9.1.min.js','assets/js/lib/underscore-min.js','assets/js/lib/backbone-min.js'],'assets/js/app.min.js': ['assets/js/app.js','assets/js/tpls.js','assets/js/view.js','assets/js/router.js']}}},// 复制文件，打包到 dest 文件夹目录下copy: {main: {files: [{src: 'index.html', dest: 'dest/index.html'},{src: ['assets/images/**'], dest: 'dest/'},{src: ['assets/css/app.min.css'], dest: 'dest/'},{src: ['assets/js/lib/libs.min.js'], dest: 'dest/'},{src: ['assets/js/app.min.js'], dest: 'dest/'}]}},// 监控 LESS 文件watch: {scripts: {files: ['assets/css/*.less'],tasks: ['less', 'cssmin']}}});grunt.loadNpmTasks('grunt-contrib-less');grunt.loadNpmTasks('grunt-contrib-uglify');grunt.loadNpmTasks('grunt-contrib-cssmin');grunt.loadNpmTasks('grunt-contrib-watch');grunt.loadNpmTasks('grunt-contrib-copy');grunt.registerTask('default', ['less', 'cssmin', 'uglify', 'copy']);};
