grunt学习笔记（1）

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