gulp系列学习笔记：
之前的任务都是单个的，比较简单。接下去我们开始引用多个插件，一次性把任务搞定，省时又方便。
1、合并压缩js文件
为了提高网页的显示速度，最好是将所有的js文件合并成同一个文件，再来引用，这时候可以用到 gulp-concat 插件；进一步，还可以对其进行压缩。但是有时候我们在写js代码的时候，经常用到 console 语句和 debugger 语句。有时候会忘了删除，这时候我们可以用插件 gulp-strip-debug。
好了，任务开始，安装模块：
npm install gulp-concat --save-dev
npm install gulp-strip-debug --save-dev
npm install gulp-uglify --save-dev
在配置文件中编写相应的代码：
// 引用插件
var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify'); // JS concat, strip debugging and minify
gulp.task('scripts', function() {
// 将lib.js放在上面，其他文件任意顺序
gulp.src(['./src/scripts/lib.js','./src/scripts/*.js'])
.pipe(concat('script.js'))
.pipe(stripDebug())
.pipe(uglify())
.pipe(gulp.dest('./build/scripts/'));
});
例如：
gulp.src(['./lib/file3.js', './lib/file1.js', './lib/file2.js'])
是将file3.js，file1.js 和 file2.js 按顺序进行合并。
后面输入相应的命令运行即可。
2、压缩合并css文件
与上一个任务基本相似，但是css里面不需要 gulp-strip-debug 插件，但是需要 gulp-autoprefixer 插件，能够自动添加css样式的前缀。
还是一样，安装相应的插件：
npm install gulp-autoprefixer --save-dev
npm install gulp-minify-css --save-dev
在配置文件添加如下代码：
// 引用插件
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css'); // CSS concat, auto-prefix and minify
gulp.task('styles', function() {
gulp.src(['./src/styles/*.css'])
.pipe(concat('styles.css'))
.pipe(autoprefix('last 2 versions'))
.pipe(minifyCSS())
.pipe(gulp.dest('./build/styles/'));
});
其中的 autoprefix('last 2 versions')含义是包含主流浏览器最近的2个版本。
后面输入相应的命令运行即可。
3、监听任务，自动执行
上面我们建立了很多任务，比如html，css和js压缩等，那我们每次要做某一件事就输一次命令是不是太麻烦了。我们完全可以这样做：
// 建立默认的gulp任务
gulp.task('default', ['imagemin', 'htmlpage', 'scripts', 'styles'], function() {
// 监听 HTML 变化
gulp.watch('./src/*.html', function() {
gulp.run('htmlpage');
}); // 监听 js 变化
gulp.watch('./src/scripts/*.js', function() {
gulp.run('jshint', 'scripts');
}); // 监听 CSS 变化
gulp.watch('./src/styles/*.css', function() {
gulp.run('styles');
});
});
把这些任务都监听后，我们要做的就是输入命令运行：
gulp
这样我们文件有修改，就会自动运行。
gulp还有其他很多好用插件，这就需要看个人的任务需要了。
文章参考了以下资料：
1、gulp详细入门教程: http://www.ydcss.com/archives/18;
2、gulp API 文档: http://www.gulpjs.com.cn/docs/api/;
3、gulp 入门指南: https://github.com/huanshen/gulp-book;
4、An Introduction to Gulp.js: https://www.sitepoint.com/introduction-gulp-js/