grunt-1、安装

grunt其实是哆啦a梦的百宝袋，是工具集，拥有非常丰富的任务插件，可以实现各式各样的构建目标。

按任务目标大致可分为四类：

文件操作型：比如合并、压缩js和css文件等（包括）
预编译型：比如编译less、sass、coffeescript等
类库项目构建型：比如 angular、ember、backbone等（这种推荐使用yeoman）
工程质量保障型：比如jshint、jasmine、mocha等

除此之外还有像 watch （监听文件改变，自动触发构建）等功能。

安装grunt
grunt依赖NodeJs和npm，请确保你的计算机已经安装该环境。

特别留意下grunt是有二个版本：服务器端版本（grunt）和客户端版本（grunt-cli），我们需要安装的是客户端版本。

npm install -g grunt-cli
npm install grunt –save-dev

如果你不慎安装了服务器端版，请现予以卸载：

npm uninstall -g grunt

package.json
假设你有个工程目录叫demo，在工程根目录放个package.json
npm init 问答方式完成package.json的配置 配置结果:

{
  "name": "grunt-demo",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-contrib-uglify": "~0.2.0"
  },
  "main": "Gruntfile.js",
  "dependencies": {
    "grunt-cli": "^1.2.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

留意devDependencies字段，定义你要拉取的依赖模块，上面的代码，拉取grunt-contrib-uglify插件（用于压缩js），字段的值~0.2.0，指明需要模块的版本号，“~”是至少的意思。

在工程根目录启动命令行工具，运行：

npm install

Gruntfile.js
先在demo工程根目录创建个src目录放个测试文件，hello-grunt.js，代码如下：

(function($){
    var str = "hello grunt!";
    $('body').append(str);
    })(jQuery)

再在根目录下创建个build目录，我们的目标很简单，将src目录下的hello-grunt.js压缩到build目录下，文件名为hello-grunt-min.js。 在demo工程根目录下放个Gruntfile.js，文件内容如下：

module.exports = function(grunt) {

    // 构建任务配置
    grunt.initConfig({
        //读取package.json的内容，形成个json数据
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            //文件头部输出信息
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */n'
            },
            //具体任务配置
            build: {
                //源文件
                src: 'src/hello-grunt.js',
                //目标文件
                dest: 'build/hello-grunt-min.js'
            }
        }
    });

    // 加载指定插件任务
    grunt.loadNpmTasks('grunt-contrib-uglify');

    // 默认执行的任务
    grunt.registerTask('default', ['uglify']);
};

执行grunt命令：

Running "uglify:build" (uglify) task
File "build/hello-grunt-min.js" created.

Done.

来看下目录，你就会看到build下出现了hello-grunt-min.js，文件内容如下：

/*! grunt-demo 2016-11-29 */!function(a){var b="hello grunt!";a("body").append(b)}(jQuery);