关于Grunt

简介

Q：Grunt为什么物？

A：一个专为JavaScript提供的构建工具。

Q：啥是构建工具？

A：在项目部署上线前，一般要将源文件压缩，合并，并拷贝到bch或trunk中。
在将js模块化后，又多了一个分析，提取业务代码中所依赖模块的工做。
解决这一系列繁重工做的自动化工具，称之为构建工具。

Q：grunt是如何工做的？

A：刚刚接触grunt，举个例子可能不太恰当，但应该可让你先比较准确的认识她。
就好像一个万能工厂（grunt），只负责执行任务（Task），不关心每一个任务到底都干了什么。
这些任务好比：

• clean:删除临时文件

• uglify:压缩

• qunit:测试

• concat:合并

任务流程多是这样的：

• task:clean

• task:uglify

• task:qunit

• task:concat

安装

前提是你已经安装了nodejs和npm。 你能够在 nodejs.org 下载安装包安装，也能够经过包管理器（好比在 Mac 上用 homebrew，同时推荐在 Mac 上用 homebrew）。

安装grunt CLI

npm install -g grunt-cli

按照官方的说法，grunt-cli只是为了在同一台机器上安装不一样的grunt版本，那么我们先不去管他。

在项目中使用grunt

首先须要往项目里添加两个文件：package.json和Gruntfile.js

• package.json:该文件用来为npm存放项目配置的元数据，与grunt关系最大的配置在devDependencies中。

"devDependencies": {
        "grunt": "~0.4.1",
        "grunt-cmd-transport": "~0.2.0",
        "grunt-cmd-concat": "~0.2.0",
        "grunt-contrib-uglify": "~0.2.0",
        "grunt-contrib-clean": "~0.4.0"
    }

• Gruntfile.js:注意G的大写，这个文件就是grunt的配置了，其中详细定义了每一个任务的细节和执行任务的顺序等。

安装grunt

在命令行进入项目所在目录，键入以下命令便可，npm会根据devDependencies中的配置，将须要的grunt及其插件下载到你的项目目录中。

npm install grunt --save-dev

传说中简单的配置T-T

终于到了简单配置环节，就从Gruntfile.js入手，一点点的认识grunt。

一个几乎是Gruntfile.js通用的写法：

module.exports = function(grunt) {
      grunt.initConfig({
        pkg: grunt.file.readJSON('package.json');
      });
    };

因为篇幅关系，这里只简单说下。grunt配置的主体都在grunt.initConfig中

pkg: grunt.file.readJSON('package.json')是为了之后在其它任务（task）中方便读取package.json已经定义好的值。

下面咱们来了解下任务（task）：

transport: {
            dialog: {
                files : [
                    {
                        src : '*',
                        dest : '.build/styles/component/dialog/src'
                    }
                ]
            }
        }

transport就是一个任务（task），她是此次spm2所提供的一系列grunt构建插件的其中一个，该插件主要负责提取模块中的依赖，
并为每一个模块设置模块ID。dialog是任务的其中一个目标（Target），files中定义了要对哪些文件执行该任务（src），
以及执行任务后，生成的文件放在什么地方(dest)。

下一个任务是合并(concat)：

concat: {
            dialog: {
                files: {
                    "dist/styles/component/dialog/src/dialog.js": [".build/styles/component/dialog/src/dialog.js"]
                }
            }
        }

concat的内容是合并依赖的模块，有不少须要设置的地方，由于本文档目的只是介绍grunt，
因此这里简单说，该配置采用了另一种src和dest的写法。相信你们只要理解了任务（task）和目标（target）后应该很好理解。

最后，加载grunt须要的插件：

grunt.loadNpmTasks('grunt-cmd-transport');
    grunt.loadNpmTasks('grunt-cmd-concat');

还要告诉grunt该怎么执行这些任务：

grunt.registerTask('build', ['transport', 'concat']);

完整的Gruntfile.js：

module.exports = function(grunt) {
          grunt.initConfig({
            pkg: grunt.file.readJSON('package.json'),

            transport: {
                        dialog: {
                            files : [
                                {
                                    src : '*',
                                    dest : '.build/styles/component/dialog/src'
                                }
                            ]
                        }
                    },
            concat: {
                        dialog: {
                            files: {
                                "dist/styles/component/dialog/src/dialog.js": [".build/styles/component/dialog/src/dialog.js"]
                            }
                        }
                    }
          });

          grunt.loadNpmTasks('grunt-cmd-transport');
          grunt.loadNpmTasks('grunt-cmd-concat');

          grunt.registerTask('build', ['transport', 'concat']);
        };

最后的最后，进入项目所在目录，命令行输入：

grunt build

一切顺利的话，你就能够看到变化了！