原文链接：https://zhang35.coding.me/2018-gulp-4-14.html
前言
perl设计者在著作programming perl中提到:
优秀的程序员具有三大美德: 懒惰 急躁 和傲慢 ( laziness,Impatience.and Hubris)。
恩，第一就是懒，我十分认同。重复性工作全都应该交由机器去做。
于是在前端项目中，Gulp这种自动构建工具就应运而生了。
gulp通过定义任务，能完成前端项目的自动预处理、生成、部署等，甚至连刷新浏览器都省了，做到了“所见即所得”。
于是程序员能专注于coding，保存代码即可见到结果。
真是懒到极致了。
什么是Gulp
Gulp是一个自动化工具，前端开发者可以使用它来处理常见任务：
- 搭建web服务器
- 文件保存时自动重载浏览器
- 使用预处理器如Sass、LESS
- 优化资源，比如压缩CSS、JavaScript、压缩图片
当然Gulp能做的远不止这些。如果你够疯狂，你甚至可以使用它搭建一个静态页面生成器。Gulp真的足够强大，但你必须学会驾驭它。
安装gulp模块
使用npm安装gulp，以便以后能在终端使用gulp命令：
$ sudo cnpm install gulp -g
tip：安装淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm，提高模块下载速度：
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
创建gulp项目
创建package.json文件：
$ npm init
在 package.json 文件中指定项目依赖的包，以后可使用 npm install 命令一次性下载这些依赖包。
关于package.json详见：https://blog.csdn.net/u011240877/article/details/76582670
局部安装Gulp模块：
$ cnpm install gulp --save-dev
dependencies就是你程序运行需要的模块，没有这个模块你程序就会报错。
devDependencies是开发的时候需要的模块。
举个例子，你用angularjs框架开发一个程序，开发阶段需要用到gulp来构建你的开发和本地运行环境。所以angularjs一定要放到dependencies里，因为以后程序到生产环境也要用。gulp则是你用来压缩代码，打包等需要的工具，程序实际运行的时候并不需要，所以放到dev里就ok了。
创建gulpfile.js
var gulp = require('gulp'); //使用本地gulp模块
//任务模块
gulp.task('hi', function() {
console.log('hello');
});
命令行执行：$ gulp hello，能看到：
[20:24:28] Starting 'hi'...
hello
[20:24:28] Finished 'hi' after 178 μ
写gulp任务
一般任务长这样：
gulp.task('task-name', function () {
return gulp.src('source-files') // Get source files with gulp.src
.pipe(aGulpPlugin()) // Sends it through a gulp plugin
.pipe(gulp.dest('destination')) // Outputs the file in the destination folder
})
src输入源文件，pipe到插件处理后，输出到dest。
监视文件变动
监视文件变动代码如下：
gulp.watch('files-to-watch', ['tasks', 'to', 'run']);
或者使用通配符：
gulp.watch('app/scss/**/*.scss', ['sass']);
或者使用任务同时监听多组文件：
gulp.task('watch', function(){
gulp.watch('app/scss/**/*.scss', ['sass']);
// Other watchers
})
使用livereload插件自动刷新浏览器
以监视html文件为例，一旦有变动，自动生成并刷新浏览器。
本地安装gulp-livereload
cnpm install gulp-livereload --save-dev
添加gulp任务
var gulp = require('gulp'),
livereload = require('gulp-livereload');
gulp.task('watch', function() {
livereload.listen();
gulp.watch('src/html/*.html', function(event){
livereload.changed(event.path);
});
});
安装浏览器插件
安装chrome的livereload插件，可下载crx文件直接拖入浏览器安装。
以服务器方式打开页面
加载本地html文件无法触发livereload，必须以服务器方式加载。
这里使用node的超轻量级web服务器http-server。
安装http-server：cnpm install http-server -g
在html所在文件夹执行：$ http-server。
此时便能在http://localhost:8080/访问到页面。
运行livereload
1、执行gulp任务：$ gulp watch
2、点击Chrome地址栏右边livereload按钮变成实心圈，即为启用。
此时修改文件，浏览器即可自动刷新。
