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
grunt前端构建工具使用教程