前端工程化 | 定制专属提速“外挂”（上）
友情提示：推荐阅读时间15分钟 + 练习时间15分钟
HTML5学堂：上一期给大家分享了Gulp的安装与使用，让大家对Gulp有着初步的认识。咱们学习使用Gulp的目的是提升开发效率，把开发过程中重复性的工作交给Gulp，让Gulp按照你的配置去完成操作。
Gulp本身给开发者提供了5个API接口，可以根据这些接口来开发Gulp插件。但是，Gulp目前拥有丰富的插件资源，开发人员可以根据项目的需求和个人偏好来配置使用这些插件，比如可以配置当修改了HTML文件浏览器自动刷新，也可以配置修改了CSS文件浏览器自动刷新。今天的文章主要给大家分享Gulp插件的安装与使用: 浏览器自动刷新、CSS压缩、文件合并。
本文内容概要
1 为何不用npm，而选用cnpm
2 浏览器自动刷新
3 文件合并
4 CSS文件压缩
1 为何不用npm，而选用cnpm
原因：因为npm安装插件是从境外服务器下载，在境内受网络影响很大，容易出现异常，于是淘宝团队在境内做了一个npm的镜像，使用淘宝团队定制的cnpm命令行工具来安装插件。简单的理解就是定期从境外服务器拷贝一份数据放在境内的服务器，使用cnpm来安装插件就是从境内服务器下载，这样就能够快速、稳定的安装Gulp插件了。
http://npm.taobao.org官网的说明：“这是一个完整 npmjs.org镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”
安装：$ npm install cnpm -g --registry=https://registry.npm.taobao.org；
提醒：安装完后最好查看其版本号cnpm -v或关闭命令提示符再重新打开，防止使用时出现问题；另外，cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm。
2 浏览器自动刷新
F5键对于网页开发工程师来说再熟悉不过了，也是使用频率超高的一个键。网页开发工程师使用F5键的目的是及时预览当前网页开发的效果，方便他们对网页进行调试与修改。但是，在开发的过程中我们是希望当我们对网页文件（包括HTML、CSS、JS、LESS文件等）做了修改，浏览器能够自动刷新网页。这样的好处在于每次修改代码后，开发工程师不用去按F5键或移动鼠标到浏览器选中刷新查看效果，节省了大量重复性的操作时间，进一步提高了开发效率。今天我们要在Gulp中使用的这款插件叫browser-sync。
browser-sync是一款浏览器同步测试工具，可以单独使用，也可以插入到Gulp、Grunt等工作流里使用，该篇文章主要介绍browser-sync在Gulp中的使用。
2.1 安装：browser-sync
命令行：$ cnpm install --save-dev browser-sync
2.2 在gulpfile.js中引入browser-sync插件
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;2.3 建立浏览器自动刷新服务器
gulp.task('f5', function(){
browserSync.init({
server: {
baseDir: './'
}
});
});2.4 监听文件
下面的例子是监听项目中所有的HTML文件，大家也可以试试其他文件的监听。
gulp.watch(['./**/*.html']).on('change', reload);2.5 完整的配置代码
// 引入Gulp安装好的插件 require('模块名称')
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
// 定义一个f5任务，名称自定义即可
gulp.task('f5', function(){
browserSync.init({
server: {
baseDir: './'
}
});
gulp.watch(['./**/*.html']).on('change', reload);
});Tips：Ctrl + C可以终止browser-sync的运行。
2.6 查看browser-sync使用效果
Tips：gulp + 任务名称是用来执行gulp的任务。
3 文件合并
在项目开发完成后，我们需要对项目进行优化，文件合并是必不可少的一个环节，比如CSS文件合并、JS文件合并，因为一个文件对应一个请求，过多的文件会造成请求阻塞、服务器的请求压力等一系列问题。在这边我们可以使用Gulp的文件合并插件gulp-concat来解决这个问题。
3.1 安装：gulp-concat
命令行：$ cnpm install gulp-concat --save-dev
3.2 在gulpfile.js中引入gulp-concat插件
var concat = require('gulp-concat');3.3 配置gulp-concat的功能
gulp.task('concatFile', function () {
// 需要合并的文件
gulp.src('css/*.css')
//合并后的文件名
.pipe(concat('common.css'))
// 合并后的文件所在的文件夹
.pipe(gulp.dest('dist/css'));
});3.4 完整的配置代码
// 引入Gulp安装好的插件 require('模块名称')
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var concat = require('gulp-concat');
// 定义一个f5任务，名称自定义即可
// 浏览器自动刷新
gulp.task('f5', function(){
browserSync.init({
server:{
baseDir:'./'
}
});
gulp.watch(['./**/*.html']).on('change', reload);
});
// 文件合并
gulp.task('concatFile', function () {
// 需要合并的文件
gulp.src('css/*.css')
//合并后的文件名
.pipe(concat('common.css'))
// 合并后的文件所在的文件夹
.pipe(gulp.dest('dist/css'));
});
3.5 查看gulp-concat使用效果
4 CSS文件压缩
在项目上线前我们会对HTML、CSS、JS等文件进行压缩处理，一方面可以提升网站的加载速度，另外一方面可以减少带宽，降低网络负荷。在Gulp中可以使用gulp-clean-css对CSS文件进行压缩处理。
Tips：带宽是指在单位时间（一般指的是1秒钟）内能传输的数据量。网络和高速公路类似，带宽越大，就类似高速公路的车道越多，其同行能力越强。
4.1 安装：gulp-clean-css
命令行：cnpm install gulp-clean-css --save-dev
4.2 在gulpfile.js中引入gulp-clean-css插件
var cleanCSS = require('gulp-clean-css');4.3 配置gulp-clean-css的功能
// CSS文件压缩
gulp.task('cssMin', function() {
// 需要压缩的CSS文件
gulp.src('css/*.css')
// CSS文件压缩
.pipe(cleanCSS())
// 压缩后的C文件所在的文件夹
.pipe(gulp.dest('dist/css'));
});4.4 完整的配置代码
// 引入Gulp安装好的插件 require('模块名称')
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var concat = require('gulp-concat');
var cleanCSS = require('gulp-clean-css');
// 定义一个f5任务，名称自定义即可
// 浏览器自动刷新
gulp.task('f5', function(){
browserSync.init({
server:{
baseDir:'./'
}
});
gulp.watch(['./**/*.html']).on('change', reload);
});
// 文件合并
gulp.task('concatFile', function () {
// 需要合并的文件
gulp.src('css/*.css')
//合并后的文件名
.pipe(concat('common.css'))
// 合并后的文件所在的文件夹
.pipe(gulp.dest('dist/css'));
});
// CSS文件压缩
gulp.task('cssMin', function() {
// 需要压缩的CSS文件
gulp.src('css/*.css')
// CSS文件压缩
.pipe(cleanCSS())
// 压缩后的C文件所在的文件夹
.pipe(gulp.dest('dist/css'));
});4.5 查看gulp-clean-css使用效果
本文系HTML5学堂独家内容，转载请在文章开头显眼处注明作者和出处“HTML5学堂(http://www.h5course.com/)”