Gulp
Gulp是一款项目自动化的构建工具，与Grunt一样可以通过创建任务（Task）来帮助我们自动完成一些工作流的内容。当然，今天我们的内容并不是讨论这二者的区别，仅仅是介绍介绍如何利用 Gulp 来优化我们的 Web 项目中前端自动化工作流。
引言
相信不少人看过百度大牛张云龙的那篇讲解大公司里怎样开发和部署前端代码?的文章，如果没有阅读的朋友请戳。由于在项目部署时，我们需要对项目 js，css,image 等文件进行压缩，合并处理，从而减少客户端对服务 Http 请求，已达到增强页面的加载速度，优化服务器带宽压力等等目的。所以本文主要讲的是利用 Gulp 优化我们 Web 部署优化工作。
安装&初始化
首先你得确保你的电脑上面是否已经安装了 Nodejs, 如果没有安装的话，那么请移步。假定有如下一个 Nodejs 的 Web 项目（当然你也可以是其他的例如 Java，.Net 的 Web 项目，且具体开发目录如下：
|- project
|- src // 前端项目的源文件
|- js
|- html
|- images
|- css
|- bower_component // bower 前端依赖包管理
|- node_component // nodejs 插件
|- server
|- api
|- views
|- app
|- assets // 前端静态文件存放目录
|- js
|- css
|- images
|- templates
|- ... // 其他目录就不一一列出了
src文件夹为前端的js，css, html, image的开发目录, 我们会通过 gulp 将这些源文件进行压缩合并后打包到目标目录，也就是assets目录下相应的js,css目录，html 视图文件会打包到views下的app文件夹和assets下的templates模板文件夹，具体视情况而定。其中的bower_component为bower前端包管理，我们可以用 bower 直接下载几乎任何我们前端日常所需的库，框架,而且可以任选版本，例如JQuery,Bootstrap,Angular，只需执行bower install packageName即可，不同版本只需bower install packageName#version,更多内容，可以去官网自行查阅，这里就不展开了。至于node_component 文件夹即是用npm安装的我们打包会用到的插件资源了。
- 全局安装 Gulp
npm install --global gulp
- 安装 Gulp 到开发项目中
npm install --save-dev gulp
- 在 src 创建
gulpfile.js文件，这个文件用来配置我们所需的task,接下来会具体讲解。 - 执行
$ gulp
或者
$ gulp taskName
gulp 会执行gulpfile.js文件下定义的default任务，如果我们需要执行特定的 task，则需要执行下面的命令
gulpfile.js 文件
gulpfile.js用来定义我们需要自动化的任务，里面包含了很多依赖关系。这里我们会创建 4 个 Task，第一个develop task,用于开发时使用，另一个release task,用于部署发布时用的，还有一个watch task, 用于实时监听文件修改行为，可及时打包，最后一个default task, gulp 默认执行的 task.
创建 Default Task
var gulp = require('gulp');
gulp.task('default', function() {
// place code for your default task here
});
// 如果默认情况下我们会执行一个叫develop的task，则这么写，执行gulp命令时，
// 会自动调用develop
gulp.task('default', ['develop']);
创建 Develop Task
创建develop task前，先介绍下我们今天要用到的一些插件
- gulp-uglify Js 压缩插件
- gulp-minify-css Css 压缩插件
- gulp-imagemin 图片压缩插件，支持格式： PNG, JPEG, GIF and SVG images
- gulp-strip-debug 清除源文件 console,debugger 代码
- gulp-useref 合并压缩 html 文件中的文件
以上列出的插件为我个人常用的一些插件，如果你还有 fonts 文件的话，也可以添加进去，gulp 有很多其他或者相似的插件，都可以去 google 搜索。安装方法则是正常的npm安装，可以戳进官网去查看。
首先我们需要为我们要压缩的源文件配置路径以及导入插件，假设我们 bower 里面已有 jquery 和 bootstrap 插件，以及其他源文件目录，如下
// 引入插件
var uglify = require('gulp-uglify'); // 压缩
var minifyCss = require('gulp-minify-css');
var stripDebug = require('gulp-strip-debug'); // 该插件用来去掉console和debugger语句
var useref = require('gulp-useref');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
// 任务处理的文件路径配置
var paths = {
js: [ // js目录
'app/*'
],
css: [
'css/*'
],
img: [
'images/*'
],
html: [
'html/*'
],
lib: { // 第三方依赖文件
js: [
'bower_components/bootstrap/dist/js/bootstrap.js',
'bower_components/jquery/jquery.js'
],
css: [
'bower_components/bootstrap/dist/css/bootstrap.css'
],
img: [
'bower_components/bootstrap/dist/images/*'
]
}
};
定义develop task
var output = "../server/assets/"; // output
/* 开发环境 */
gulp.task('develop', function() {
gulp.src(paths.js)
.pipe(gulp.dest(output + '/js'));
gulp.src(paths.lib.js)
.pipe(gulp.dest(output + '/js'));
gulp.src(paths.css)
.pipe(gulp.dest(output + '/css'));
gulp.src(paths.lib.css)
.pipe(gulp.dest(output + '/css'));
gulp.src(paths.img)
.pipe(gulp.dest(output + '/images'));
gulp.src(paths.lib.img)
.pipe(gulp.dest(output + '/images'));
});
上面的 develop task 直接将代码都输出到了我们的 server 目录下，并未通过插件进行相应的处理，主要是因为我们等会还会创建release task， 当真正部署的时候我们才进行压缩合并这些处理。
定义release task
/* 部署环境 */
gulp.task('release', function() {
gulp.src(paths.js)
.pipe(stripDebug())
.pipe(gulp.dest(output + '/js'));
gulp.src(paths.lib.js)
.pipe(stripDebug())
.pipe(gulp.dest(output + '/js'));
gulp.src(paths.css)
.pipe(gulp.dest(output + '/css'));
gulp.src(paths.lib.css)
.pipe(gulp.dest(output + '/css'));
gulp.src(paths.img)
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest(output + '/images'));
gulp.src(paths.lib.img)
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest(output + '/images'));
var assets = useref.assets();
gulp.src(paths.html)
.pipe(assets)
.pipe(gulpif('*.js', uglify()))
.pipe(gulpif('*.css', minifyCss()))
.pipe(assets.restore())
.pipe(useref())
.pipe(gulp.dest(output + '/templates'));
});
上面的代码首先是先打包静态文件到指定包，去掉多余的 console,debugger,给图片文件进行压缩处理，最后利用useref插件对 ejs 视图文件中的 js,css 进行压缩合并处理，并打包到指定目录。
利用useref对 html 内部的文件进行压缩合并
上面的release中我们以及定义了对 app 目录下 html 文件内部的 js，css 进行压缩何必，仅仅配置 task 是还不够的，我还需要在 html 内部做如下配置：
<html>
<head>
<!-- build:css css/main.css -->
<link href="css/style.css" rel="stylesheet">
<link href="css/bootstrap.cs.css" rel="stylesheet">
<!-- endbuild -->
</head>
<body>
<!-- build:js scripts/main.js -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<!-- endbuild -->
</body>
</html>
经过合并后的文件：
<html>
<head>
<link rel="stylesheet" href="css/main.css"/>
</head>
<body>
<script type="text/javascript" src="js/main.js"></script>
</body>
</htm>
更多关于gulp-useref的使用方法请戳。
定义watch Task
watch task 是为了监听文件发生改变后立即触发的任务，已便于我们开发。代码如下：
var watcher = gulp.watch(paths.scripts, ['develop']);
watcher.on('change', function (event) {
console.log('Event type: ' + event.type); // added, changed, or deleted
console.log('Event path: ' + event.path); // The path of the modified file
});
总结
以上基本介绍了如何使用 gulp 来自动完成打包，压缩，合并文件等任务，Gulp 插件非常多，本文只是简单的介绍了几种基本的。总之，使用 gulp，只需要几行命令便可以完成以上任务，使很多优化工作变得十分简单。
最后修改于 2015-04-26