grunt

简介：
Grunt是一种自动化任务处理工具，它就是一个工具框架，有很多插件扩展它的功能。。

---

Grunt 基于 Node.js ，用 JS 开发，这样就可以借助 Node.js 实现跨系统跨平台的桌面端的操作，例如文件操作等等。此外，Grunt 以及它的插件们，都作为一个 包 ，可以用 NPM 安装进行管理。

所以 NPM 生成的 package.json 项目文件，里面可以记录当前项目中用到的 Grunt 插件，而 Grunt 会调用 Gruntfile.js 这个文件，解析里面的任务（task）并执行相应操作。

安装 Grunt

Grunt 依赖 Node.js 所以在安装之前确保你安装了 Node.js。然后开始安装 Grunt。

实际上，安装的并不是 Grunt，而是 Grunt-cli，也就是命令行的 Grunt，这样你就可以使用 grunt 命令来执行某个项目中的 Gruntfile.js 中定义的 task 。但是要注意，Grunt-cli 只是一个命令行工具，用来执行，而不是 Grunt 这个工具本身。

安装 Grunt-cli 需要使用 NPM，使用下面一行即可在全局范围安装 Grunt-cli ，换句话说，就是你可以在任何地方执行 grunt 命令：

npm install -g grunt-cli

cli：利用node提供的requrie()系统查找本地安装的grunt，如果到grunt，cli就会加载并传递gruntfile中的配置信息，然后执行任务

生成 package.json 文件

进入项目的目录

npm init

{
  "name": "0717",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

安装 grunt

进入项目的目录

npm install grunt --save-dev

“—save-dev”的意思是，在当前目录安装grunt的同时，顺便把grunt保存为这个目录的开发依赖项

此时看package.json文件：

{
  "name": "1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^1.0.1"
  }
}

所需要的插件

Grunt 帮忙实现下面几个功能：检查每个 JS 文件语法、合并两个 JS 文件、将合并后的 JS 文件压缩、将 SCSS 文件编译、新建一个本地服务器监听文件变动自动刷新 HTML 文件。需要用到：

• 合并文件：grunt-contrib-concat
• 语法检查：grunt-contrib-jshint
• Scss 编译：grunt-contrib-sass
• 压缩文件：grunt-contrib-uglify
• 监听文件变动：grunt-contrib-watch
• 建立本地服务器：grunt-contrib-connect

它们的命名和文档都很规范，因为这些是官方提供的比较常用的插件。这些插件同时都是 NPM 管理的包，比如 grunt-contrib-concat - npm 你也可以在这上面看到用法等。

npm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect

加上了 –save-dev 参数，表示会把刚安装的东西添加到 package.json 文件中。

配置 Gruntfile.js 的语法

需要在项目根目录下新建一个叫Gruntfile.js的文件。这是一个 JS 文件，你可以写任意的 JS 代码，比如声明一个 对象 来存储一会要写任务的参数，或者是一个变量当作开关等等。

然后，所有的代码要包裹在：

//包装函数
module.exports = function(grunt) {
    //任务配置，所有插件的配置信息
    grunt.initConfig({
        //获取package.json的信息
        pkg: grunt.file.readJSON('package.json'),
    });
    //加载所用到的插件
    grunt.loadNpmTasks('grunt-contrib-uglify');

    //告诉grunt当我们在终端输入grunt时需要做什么，有先后顺序
    grunt.registerTask('default', ['uglify', 'concat','watch']);
}

• Contrib-jshint——javascript语法错误检查；
• Contrib-watch——实时监控文件变化、调用相应的任务重新执行；
• Contrib-clean——清空文件、文件夹；
• Contrib-uglify——压缩javascript代码
• Contrib-copy——复制文件、文件夹
• Contrib-concat——合并多个文件的代码到一个文件中
• karma——前端自动化测试工具

使用uglify插件（压缩javascript代码）

安装：

npm install grunt-contrib-uglify --save-dev

Gruntfile.js

module.exports = function(grunt) {
    //任务配置，所有插件的配置信息
    grunt.initConfig({
        //获取package.json的信息
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            options: {
                banner: '/*! create by <%= grunt.template.today("yyyy-mm-dd") %>*/\n'
            },
            build: {
                files: [{
                    src: 'js/index.js',
                    dest: 'build/index.min.js'
                }, {
                    src: 'js/index2.js',
                    dest: 'build/index2.min.js'
                }],
            }
        },
    });
    grunt.loadNpmTasks('grunt-contrib-uglify');

    //告诉grunt当我们在终端输入grunt时需要做什么，有先后顺序
    grunt.registerTask('default', ['uglify']);
}

这里对uglify的配置有两项。
“options”中规定允许生成的压缩文件带banner，即在生成的压缩文件第一行加一句话说明。注意，其中使用到了pkg获取package.json的内容。

“build”中配置了源文件和目标文件。即规定了要压缩谁？压缩之后会生成谁？

（PS：上文中说过的package.json的内容终于找到了他被应用的地方了。这样的好处是：例如，对文件版本的管理，你只需要在package.json中修改即可，grunt会自动根据最新的版本号生成相应版本的文件。你不用手动去修改文件的文件名。）

运行：

grunt

会发现，在build文件夹下已经多了index.min.js和index2.min.js两个文件。

Javascript使用uglify压缩，css可使用cssmin插件压缩。安装、配置方法一样的。

使用jshint插件（检查javascript语法错误）

安装：

npm install grunt-contrib-jshint --save-dev

module.exports = function(grunt) {
    //任务配置，所有插件的配置信息
    grunt.initConfig({
        //获取package.json的信息
        pkg: grunt.file.readJSON('package.json'),
         jshint: {
            options: {
                jshintrc: '.jshintrc'
            },
            build: ['Gruntfile.js','js/index.js','js/index2.js']
        },
    });
    grunt.loadNpmTasks('grunt-contrib-jshint');

    //告诉grunt当我们在终端输入grunt时需要做什么，有先后顺序
    grunt.registerTask('default', ['jshint']);
}

和uglify的配置一样，分为“options”和“build”两个部分。“build”中描述了jshint要检查哪些js文档的语法。 “options”中描述了要通过怎么的规则检查语法，这些规则的描述文件就保存在网站根目录下的一个叫做“.jshintrc”的文件中。

{
    "browser":true,//暴露浏览器属性的全局变量，列如 window,document;注意:这个选项不暴露变量 alert或 console。
    "boss":true,//禁止比较表达式的值没有达到预期警告。
    "curly": true,//循环或者条件语句必须使用花括号包围。这个选项需要你总是把花括号在块循环和条件。
    "devel":true //这个选项定义了全局变量,通常用于日志调试: console, alert等等
}

使用watch插件（真正实现自动化）

安装：

npm install grunt-contrib-watch --save-dev

Gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            options: {
                banner: '/*! create by <%= grunt.template.today("yyyy-mm-dd") %>*/\n'
            },
            build: {
                files: [{
                    src: 'js/index.js',
                    dest: 'build/index.min.js'
                }, {
                    src: 'js/index2.js',
                    dest: 'build/index2.min.js'
                }],
            }
        },
        jshint: {
            options: {
                jshintrc: '.jshintrc'
            },
            build: ['Gruntfile.js','js/index.js','js/index2.js']
        },
        concat: {
            bar: {
                src: ['build/*.js'],
                dest: 'dest/all.min.js'
            },
        },
        watch: {
            files: ["js/*index.js"],
            tasks: ['uglify']
        }
    });
    grunt.loadNpmTasks('grunt-contrib-uglify')
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.registerTask('default', ['jshint','uglify', 'watch']);
};