gulp使用实例分析——yo angular的自动化任务分析
如果你了解gulp的使用方法，那么你需要一个实战的例子来帮你加深理解。
这里将会手把手教你如何搭建一个工作流，类似yo angular这样的gulpfile.js
---------------------------------------------------分析需求
- 我们会使用多个第三方的插件，并使用bower来嵌入
- 我们需要对样式文件进行解析，使用sass编译
- 我们要对依赖的css，js进行整合打包，并对文件hash命名，例如vendor-65b6dbc7a5.css
- 我们要对html进行注入压缩
- 开发的过程我们需要能实时预览（preview）
--------------------------------------------环境搭建以及需要的插件
nodejs环境
安装gulp
安装gulp插件
gulp-connect : 创建一个webserver 方便实时预览
gulp-autoprefixer：css自动添加前缀，以适应多浏览器
gulp-cache：gulp的文件缓存服务，尤其是任务处理过程中的中间文件特别有效
gulp-filter：文件匹配神器
gulp-imagemin：图片压缩神器
gulp-jshint：js语法检测
gulp-load-plugins：gulp插件自动加载神器，使用起来叼叼的！一个字，方便！
gulp-plumber：修复了pipe处理异常的bug，让任务执行更平滑
gulp-minify-css：压缩css的神器
gulp-rev：校订命名神器，将文件名附加文件内容hash后的重新命名，对于发布新版本静态资源的时候有效解决浏览器缓存问题
gulp-rev-replace：重写被rev命名后的文件索引，尤其是你使用了manifest离线缓存后这个非常有效
gulp-uglify：js压缩神器
gulp-useref：处理html中js或css占位符替换成真正的资源索引
gulp-util：这是gulp执行的界面工具，方便你输出执行过程中的信息(log)
gulp-watch：监听文件变化，并执行默认更新任务
wiredep：bower插件的依赖插入神器
lazypipe：pipe可复用的强大神器
gulp-sass：sass文件编译
open：主动打开某个网址，在编译预览时，方便！
jshint-stylish：js语法检测的格式化输出
rimraf：文件以及文件夹的操作
run-sequence：按顺序执行gulp任务，这是个过渡版本，预期以后gulp会增强相关的功能
--------------------------------------------------------------
开始编写gulpfile.js
我们当前的目录结构是：
--app
--package.json
--gulpfile.js
app中就是我们编写app的区域，我们所有gulp任务都是针对该文件夹处理的
============================定义加载的插件
加载gulp，以及gulp的插件（以gulp-开头所有的插件），和其他相关插件
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var openURL = require('open');
var lazypipe = require('lazypipe');
var rimraf = require('rimraf');
var wiredep = require('wiredep').stream;
var runSequence = require('run-sequence');
=============================定义全局路径
这里app就是我们源文件夹，dist是我们要打包输出的文件夹
var workflow = {
app: 'app',
dist: 'dist'
};
定义css，js路径以及视图路径
var paths = {
scripts: [workflow.app + '/scripts/**/*.js'],
styles: [workflow.app + '/styles/**/*.scss'],
views: {
main: workflow.app + '/index.html',
files: [workflow.app + '/views/**/*.html']
}
};
==========================定义可复用的pipe
lintScripts预设了js语法检测的参数设置，以及语法检测日志的输出使用jshint-stylish
styles预设了css样式处理的过程，使用sass编译，使用autoprefixer自动添加前缀，并指定了输出的文件夹
var lintScripts = lazypipe()
.pipe($.jshint, '.jshintrc')
.pipe($.jshint.reporter, 'jshint-stylish');
var styles = lazypipe()
.pipe($.sass, {
outputStyle: 'expanded',
precision: 10
})
.pipe($.autoprefixer, 'last 1 version')
.pipe(gulp.dest, '.tmp/styles');
============================开始编写任务
styles任务将我们的样式文件按照上述预制的styles执行
gulp.task('styles', function () {
return gulp.src(paths.styles)
.pipe(styles());
});
lint:scripts任务负责检测我们的js语法的合法性
gulp.task('lint:scripts', function () {
return gulp.src(paths.scripts)
.pipe(lintScripts());
});
clean:tmp任务负责清理.tmp文件夹，注意这里有了一个cb回调，意味着其他任务需要等待该任务执行完成后才能执行
gulp.task('clean:tmp', function (cb) {
rimraf('./.tmp', cb);
});
启动客户端，调用启动服务器，格式化样式，并在浏览器中打开指定网址
gulp.task('start:client', ['start:server', 'styles'], function () {
openURL('http://localhost:9000');
});
启动服务器，使用connect创建一个webserver
gulp.task('start:server', function() {
$.connect.server({
root: [yeoman.app, '.tmp'],
livereload: true,
hostname: 'localhost',
// Change this to '0.0.0.0' to access the server from outside.
port: 9000
});
});
添加监听任务，并执行相关的任务
gulp.task('watch', function () {
$.watch(paths.styles)
.pipe($.plumber())
.pipe(styles())
.pipe($.connect.reload());
$.watch(paths.views.files)
.pipe($.plumber())
.pipe($.connect.reload());
$.watch(paths.scripts)
.pipe($.plumber())
.pipe(lintScripts())
.pipe($.connect.reload());
$.watch(paths.test)
.pipe($.plumber())
.pipe(lintScripts());
gulp.watch('bower.json', ['bower']);
});
编译启动服务器，注册了一个按序执行的任务列表，清除.tmp, 检测js语法，启动客户端（启动webserver，编译样式css）,添加监听任务
gulp.task('serve', function (cb) {
runSequence('clean:tmp',
['lint:scripts'],
['start:client'],
'watch', cb);
});
bower任务负责将bower依赖注入
gulp.task('bower', function () {
return gulp.src(paths.views.main)
.pipe(wiredep({
directory: workflow.app + '/bower_components',
ignorePath: '..'
}))
.pipe(gulp.dest(workflow.app));
});
