grunt能干些什么？

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

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

文件操作型：比如合并、压缩js和css文件等（包括）

预编译型：比如编译less、sass、coffeescript等

类库项目构建型：比如 angular、ember、backbone等（这种推荐使用yeoman）

工程质量保障型：比如jshint、jasmine、mocha等

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

使用工具：

node： http://www.nodejs.org

安装：

window:安装比较傻瓜式，就两步。

1 下载源文件 http://www.nodejs.org/download/ 选择对应的最新msi文件。

2 双击进行安装。

linux：

1 wget下载源文件

打开 http://www.nodejs.org/download/,寻找到自己要下载的文件地址

# wget 源文件路径

2 解压文件

# tar xvf 文件路径

3 进入解压目录

# cd node-v0.8.7

4 检查所需要配置

# ./configure

5 安装

# make install

6 检查是否成功安装，输入命令：

# node -v

配置：

npm node pakeage manage 包管理

国内的npm镜像配置

国内的npm安装由于某种原因总是比较慢，所以需要在做些配置了。

设置 npm 国内镜像

npm config set registry http://registry.cnpmjs.org

可选项:使用cjnpm

grunt：https://github.com/gruntjs/

安装：

grunt的安装需要先安装node才能继续安装。grunt也就是相当于node的一个模块。

1 npm install -g grunt-cli

里边的-g 安装到全局

卸载

npm uninstall -g grunt-cli

2 npm install -g grunt-init

使用grunt-init 进行配置（待补充）

配置：

packjson介绍：用于配置需要拉取的grunt插件信息。

{

"name": "demo",

"version": "1.0.0",

"devDependencies": {

"grunt-contrib-uglify": "~0.2.0"

}

}

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

使用：npm install 依赖拉取成功后，在demo工程中生成了node_modules目录，该目录就包含了grunt-contrib-uglify插件模块的代码。

实例：创建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核心方法：

grunt.initConfig(obj)

initConfig用于配置构建信息，第一个参数必须是个object。

grunt.file.readJSON(path)

读取一个json文件，通常我们会把构建任务的基本配置写在独立的json文件内，方便我们修改。

// 构建任务配置

grunt.initConfig({

//读取package.json的内容，形成个json数据

pkg: grunt.file.readJSON('package.json')

});

上面代码，将读取的json赋值给pkg字段，想要获取配置的值，就可以使用pkg.name这样的形式。

grunt.loadNpmTasks(pluginName)

加载指定插件任务，示例代码如下：

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

可以加载多个：

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

//css压缩

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

grunt.registerTask(taskName,taskArray)

注册任务，比如下面的代码：

grunt.registerTask('default', ['uglify']);

注册默认执行的任务，即你运行grunt命令时，触发的任务构建。

第二个参数为任务目标名，在initConfig()中配置：

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'

}

}

});

uglify为任务目标名，options为grunt-contrib-uglify插件配置参数。

banner向输出文件打印你需要的信息。

build为具体任务构建配置

文件的简单正则匹配语法

文件名（目录路径）的匹配，基本上和ant一样。

* 匹配除了/外的任意数量的字符，比如foo/*.js

? 匹配除了/外的单个字符

** 匹配包含/的任意数量的字符，比如foo/**/*.js

! 排除指定文件，比如src: ['foo/*.js', '!foo/bar.js']

{} 可以理解为“or”表达式，比如src: 'foo/{a,b}*.js'

用法举例：

//匹配foo目录下所有th开头的js文件

{src: 'foo/th*.js', dest: ...}

//等价于{src: ['foo/a*.js', 'foo/b*.js'], dest: ...}

{src: 'foo/{a,b}*.js', dest: ...}

//优先处理bar.js，然后再处理其他文件

{src: ['foo/bar.js', 'foo/*.js'], dest: ...}

//排除处理foo/bar.js文件

src: ['foo/*.js', '!foo/bar.js'], dest: ...}

grunt常用插件  参见：http://gruntjs.cn/

1 常用插件有

grunt-contrib-concat：文件合并

grunt-contrib-copy：用于复制文件或目录的插件

grunt-contrib-clean：用于删除文件或目录的插件

grunt-contrib-compress：用于压缩文件和目录成为zip包

grunt-contrib-jshint：js代码检查

grunt-contrib-mincss：css压缩

grunt-contrib-uglify：js压缩

grunt-contrib-watch：实时监听插件

grunt-contrib-imagemin，能够快速的压缩工程内的图片

grunt-contrib-yuidoc：基于YUIDOC生成js API文档

grunt-karma：单测回归插件

参考网页：http://www.36ria.com/6192

http://www.36ria.com/6226

http://www.36ria.com/6273