在前端开发过程中,经常需合并文件、压缩代码、单元测试、检查语法错误等,需要用手工或不同的工具来完成不同的任务,重复劳动且耗时繁琐,而自动化构建工具可以帮我们自动管理和运行各种任务。可以减少代码构建手工出错的机会,大大增强了开发效率,节省资源。
以下是常见的自动构建工具,可根据需要,选择其中之一进行安装。
* Grunt
* Gulp
1. Grunt
首页:http://gruntjs.com
中文:http://www.gruntjs.net
项目:https://github.com/gruntjs(包括Grunt及其各种模块)
源码:https://github.com/gruntjs/grunt
插件:http://gruntjs.com/plugins
1.1 Grunt安装
Grunt和Grunt插件是通过npm(node package manager)安装管理的。
常见的Grunt模块说明
在项目目录安装Grunt及常见的Grunt插件:
npm install grunt-cli -g
npm install grunt --save-dev# 安装常见的grunt模块
npm install grunt-contrib-clean --save-dev
npm install grunt-contrib-compass --save-dev
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-copy --save-dev
npm install grunt-contrib-cssmin --save-dev
npm install grunt-contrib-imagemin --save-dev
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-watch --save-dev
grunt-cli为grunt的命令行界面,主要向Grunt传递Gruntfile配置信息,然后执行Grunt来完成配置文件中指定的任务。
-g:--global,表示全局安装,全局安装后可在任何目录执行grunt命令
--save-dev:表示安装grunt模块时,模块会被自动加到项目的package.json文件的依赖列表中
1.2 Grunt配置文件
模块安装完成后,在项目根目录创建名为Gruntfile.js的配置文件。该配置文件是一个node.js的模块,Grunt运行需要该配置文件。
Grunt常用API
-- grunt对象:Grunt通过将grunt对象赋值给module.exports函数,将grunt对象的属性和方法传递给Gruntfile、Grunt模块和task文件中
-- grunt.initConfig(configObject):grunt.config.init方法的别名,初始化各模块的配置
-- grunt.loadNpmTasks(pluginName):加载通过npm安装的Grunt模块
-- grunt.registerTask(taskName, taskList):注册定义任务
以下为压缩css的任务的配置文件
//Gruntfile.jsmodule.exports = function (grunt) {//初始化配置
grunt.initConfig({
cssmin: { //定义配置对象
minify: { //定义任务目标:压缩
expand: true, //表下面的文件占位符*要扩展成具体文件名
cwd: 'css/', //需要处理文件所在目录
src: ['*.css', '!*.min.css'],//需处理的文件列表(*表任意数量字符,!表示不匹配的情况)
dest: 'css/', //处理后生成的文件所在目录
ext: '.min.css' //处理后生成的文件扩展名
},
combine: { //定义任务目标:合并
files: { //目标文件名,源文件名列表
'css/out.min.css': ['css/part1.min.css', 'css/part2.min.css']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin'); //加载npm安装的cssmin模块
grunt.registerTask('default', ['cssmin:minify', 'cssmin:combine']); //注册任务
};
配置项属性可在Grunt插件列表http://gruntjs.com/plugins 找到对应的模块页面获取详细的信息。上述安装的其它模块的使用方法可参考插件模块页面的介绍。Grunt内部方法调用的基本流程是 grunt.initConfig() -> grunt.loadNpmTasks() -> grunt.registerTask()。
1.3 Grunt任务的运行
1) 运行方式1:Grunt命令行方式执行
命令行进到项目根目录,执行grunt命令,命令格式:grunt 模块名:目标名,未指定模块名,目标名将依次执行相应模块及相应目标。
grunt #各模块及目标依次执行
grunt cssmin #执行cssmin模块下所有目标任务
grunt cssmin:minify #执行cssmin模块下的minify目标任务
2) 运行方式2:开发工具IDE方式执行
1> WebStorm
打开项目代码,右键点击 Gruntfile.js 文件 -> 点击Show Grunt Tasks菜单项 -> 出现Grunt任务列表 -> 右键选中其中一个任务项 Run -> 完成执行。(若Grunt列表出现警告,未列出任务,则需要点击警告设置Grunt的NodeJS和Grunt-cli安装路径)。
2> SublimeText
SublimeText默认没有安装Grunt,参看SublimeText中插件支持的安装方法在Package Control中安装插件"Grunt"。
安装完成后 -> 快捷键ctrl+shift+p(或Tools -> Command Palette)运行命令行 -> 选中Grunt命令 -> 完成执行。
2. Gulp
首页:http://gulpjs.com
中文:http://www.gulpjs.com.cn
项目:https://github.com/gulpjs
源码:https://github.com/gulpjs/gulp
插件:http://gulpjs.com/plugins
2.1 Gulp安装
Gulp和Gulp插件是通过npm(node package manager)安装管理的。
常见的Gulp模块说明
在项目目录安装Gulp及常见的Gulp插件:
npm install gulp --global # 安装常见Gulp模块
npm install gulp-cache --save-dev
npm install gulp-concat --save-dev
npm install gulp-imagemin --save-dev
npm install gulp-jshint --save-dev
npm install gulp-livereload --save-dev
npm install gulp-minify-css --save-dev
npm install gulp-notify --save-dev
npm install gulp-plumber --save-dev
npm install gulp-rename --save-dev
npm install gulp-replace --save-dev
npm install gulp-strip-debug --save-dev
npm install gulp-uglify --save-dev
npm install imagemin-pngquant --save-dev
npm install del --save-dev
2.2 Gulp配置
模块安装完成后,在项目根目录下创建 gulpfile.js 代码文件。
Gulp常用API
-- gulp.src(globs [,options]):产生数据流。匹配glob或glob数组的文件,返回Vinyl-fs类型的stream,可通过管道(pipe)传递给插件
-- gulp.dest(path [,options]):作为管道的输出写入文件,同时输出将继续输出。多次调用dest将多次输出到多个目录,目录不存在则创建
-- gulp.task(name [,deps], fn):指定任务名及任务函数来定义任务。default为Gulp默认执行的任务。
-- gulp.watch(glob [, opts], tasks) 或者 gulp.watch(glob [, opts, cb]):监视文件变化执行某些操作,返回可分发change事件的EventEmitter对象。
以下为压缩css的任务的配置文件
//Gulpfile.jsvar gulp = require("gulp"),
mincss = require("gulp-minify-css"),
del = require("del");var stream = gulp.src("css/*.css"); //定义压缩的文件,返回stream//压缩前先清除文件夹里面的内容
gulp.task("clean", function (callback) {
del(["css/min"], callback);
});
gulp.task("mincss", function () {
return stream
.pipe(gulp.dest("css/min")) //输出文件夹
.pipe(mincss()); //执行压缩
});
gulp.task("default", ["clean"], function () {
gulp.start("mincss");//clear任务执行时,执行压缩。start方法可传入多个任务参数,表依次执行
});
Gulp API的使用方法详见:http://www.gulpjs.com.cn/docs/api。方法调用的基本流程是 gulp.src() -> gulp.dest() -> task()。
2.3 Gulp运行
1) 运行方式1:Gulp命令行方式执行
项目根目录,执行gulp命令,命令格式:gulp <task> <othertask>,未指定任务名,执行所有任务。
2) 运行方式2:开发工具IDE方式执行
1> WebStorm
打开项目代码,右键点击 Gulpfile.js 文件 -> 点击Show Gulp Tasks菜单项 -> 出现Gulp任务列表 -> 右键选中其中一个任务项 Run -> 完成执行。(若Gulp列表出现警告,未列出任务,则需要点击警告设置Gulp的NodeJS和Gulp安装路径)
2> SublimeText
SublimeText默认没有安装Gulp,参看SublimeText中插件支持的安装方法在Package Control中安装插件"Gulp"。
安装完成后 -> 快捷键ctrl+shift+p(或Tools -> Command Palette)运行命令行 -> 选中Gulp命令 -> 选中任务 -> 完成执行。
3. 构建工具小结
作为一个工具,核心的需求应该是让开发者花最少的时间学习使用,并为开发者节省更多的时间,解放重复的手工劳动。这就要求一个理想的自动化构建工具应满足 简单,易用,易扩展,易维护,高性能,多平台运行,可靠,可测试等要求。其架构设计应满足的功能需求与非功能性需求如下图所示。
Grunt与Gulp都比较完善的构建工具,但是各自有自己的特点:
Grunt
-- 插件较丰富
-- 易用,常见任务都有插件
-- Grunt及插件的选项较多,使用复杂
Gulp
-- 配置较少,使用简单
-- 利用Node.js流,不需要往磁盘写中间文件,速度更快
-- 易于学习,API较少
推荐阅读: