一、简介

构建工具的作用：

在项目部署上线前，通常要将源文件压缩，合并，并拷贝到bch或trunk中。

在将js模块化后，又多了一个分析，提取业务代码中所依赖模块的工作。

解决这一系列繁重工作的自动化工具，称之为构建工具。

任务流程：

task:clean

task:uglify

task:qunit

task:concat

二、安装与构建

1、安装nodejs和npm。(window下集成npm，linux下就需要考虑手动在/usr/sbin/下配置相应的引用路径。

2、安装grunt CLI与grunt

npm install -g grunt-cli 出现错误时 采用npm install grunt-cli --save-dev

参考地址：http://stackoverflow.com/questions/20555605/how-can-i-install-the-grunt-cli-without-getting-errors

npm install grunt --save-dev

linux下安装完grunt之后，会出现-bash: grunt: command not found

vim ~/.bash_profile

加入这句话：export PATH=/home/brianzheng/node_modules/grunt-cli/bin:$PATH

source ~/.bash_profile

grunt --version 进行测试

3、在项目中使用grunt

3-1) 在项目中添加两个文件：package.json和Gruntfile.js

3-1-1) package.json格式示例：

{

"name": "tes",

"version": "1.0",

"description": "merge css and js",

"author": "brianzheng",

"devDependencies": {

"grunt": "~0.4.5",

"grunt-contrib-jshint": "~0.3.0",

"grunt-contrib-concat": "~0.1.1",

"grunt-contrib-uglify": "~0.1.2",

"grunt-contrib-cssmin": "~0.5.0",

"grunt-htmlhint": "~0.9.2"

}

}

package.json放在根目录下，它包含了该项目的一些元信息，如项目名称、描述、版本号，插件等。它应该和源码一样被提交到svn或git。

3-1-2) 在项目中安装常用的插件

grunt-contrib-jshint(js语法检查)、grunt-contrib-concat(js合并)、grunt-contrib-uglify(采用UglifyJS压缩js)、grunt-contrib-cssmin(Css压缩合并)、grunt-htmlhint(html语法验查)、grunt-contrib-clean(清除文件)

在项目中执行：npm install grunt-contrib-jshint，

安装剩余插件类似 npm install 插件名，

安装完成后：在node_modules目录下，会包含相应的插件目录。

Gruntfile.js：

3-2)Gruntfile.js ：

3-2-1)、wrapper函数，结构如下，这是Node.js的典型写法，使用exports公开API

module.exports = function(grunt) {

// Do grunt-related things in here

};

3-2-2)、项目和任务配置

3-2-3)载入grunt插件和任务

3-2-4)定制执行任务

示例文件如下：

module.exports = function(grunt) {

// 1.配置参数

grunt.initConfig({

pkg: grunt.file.readJSON("package.json"),

// js删除文件

clean: {

js: [ "build/js-min/*.js" ],

css: [ "build/css-min/*.css" ]

},

// js文件合并

concat: {

options: {

separator: ";",

stripBanners: true,

banner: '/*! - v - ' +

' */'

},

base: {

src: [

"doc/js/jquery-1.11.1.min.js",

"doc/js/common.js",

"doc/js/header.js"

],

dest: "build/js/js-base.js"

},

extras: {

src: [

"doc/js/render-grid.js",

"doc/js/popwin.js",

"doc/js/slider.js"

],

dest: "build/js/js-plugin.js"

}

},

// js压缩文件

uglify: {

options: {

},

base: {

files: {

"build/js-min/js-base.js":

"build/js/js-base.js"

}

},

extras: {

files: {

"build/js-min/js-plugin.js

": "build/js/js-plugin.js"

}

}

},

// css合并压缩

cssmin: {

options: {

keepSpecialComments: 0

},

compress: {

files: {

"build/css-min/css-base.cs

s": [

"doc/css/reset.css",

"doc/css/common.css"

]

}

}

}

});

// 2.载入插件

// js合并插件

grunt.loadNpmTasks("grunt-contrib-concat");

// js压缩插件

grunt.loadNpmTasks("grunt-contrib-uglify");

// css压缩插件

grunt.loadNpmTasks("grunt-contrib-cssmin");

// 清除文件

grunt.loadNpmTasks("grunt-contrib-clean");

// 3.注册任务

grunt.registerTask("default", ["clean", "concat", "uglify", "cssmin"]);

}

执行单个任务：grunt concat

出现错误：

>> Local Npm module "grunt-contrib-concat" not found. Is it installed?

>> Local Npm module "grunt-contrib-uglify" not found. Is it installed?

>> Local Npm module "grunt-contrib-cssmin" not found. Is it installed?

Warning: Task "concat" not found. Use --force to continue.

检查该项目模块里面是否包含node_modules，并且是否已经安装有该系列插件

成功状态提示：

Running "concat:dist" (concat) task

File build/js/js-base.js created.

Done, without errors.

pkg：grunt.file.read.JSON('package.json')：读取package.json已经定义的值

concat是一个合并任务(task)，该插件主要负责提取模块中的依赖，并为每个模块设置模块ID。

src：被执行的文件

dest：生成的文件放置的位置

多任务文件合并示例：

concat: {

options: {

separator: ";",

stripBanners: true,

banner: '/*! - v - ' +

' */'

},

base: {

src: [

"doc/js/jquery-1.11.1.min.js",

"doc/js/common.js",

"doc/js/header.js"

],

dest: "build/js/js-base.js"

},

extras: {

src: [

"doc/js/render-grid.js",

"doc/js/popwin.js",

"doc/js/slider.js"

],

dest: "build/js/js-plugin.js"

},

dist: {

src: [

"doc/js/popwin.js",

"doc/js/slider.js"

],

dest: "build/js/js-test.js"

},

dist2: {

src: [

"doc/js/popwin.js",

"doc/js/slider.js"

],

dest: "build/js/js-test.js"

}

}

uglify是一个压缩任务(task)

option：设置参数

build：构建产出文件

加载两个grunt插件

grunt.loadNpmTasks('grunt-contrib-transport');

grunt.loadNpmTasks('grunt-contrib-concat');

注册任务

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

cmd切换对应项目：

执行： grunt build

将grunt执行体加入到make中

grunt:

grunt build

make grunt