这几天去面试，经常被问到如何管理前端项目代码的问题（目前用的是rails），后来去了解了一下，有一个叫gulp的前端自动化构建工具，就决定学习一下。
网上找了好多参考资料，现在整理一遍。
一. 安装
先全局安装
npm install --global gulp // 有时候需要sudo npm install --global gulp
到项目所在文件夹
npm install --save-dev gulp // 作为项目的开发依赖安装，安装完后会出现一个node_modules文件夹
此时，如果输入gulp，会出现如下提示：
No gulpfile found
所以需要在项目的跟目录新建一个gulpfile.js的文件
文件内容： (关于这一部分，等会儿再说)
var gulp = require('gulp'); // 引用gulp
gulp.task('default', function() { // 设置默认任务
// 将你的默认的任务代码放在这
});
再执行gulp命令，会出现如下提示：
[09:51:56] Using gulpfile ~/work/demos/todoapp/gulpfile.js
[09:51:56] Starting 'default'...
[09:51:56] Finished 'default' after 89 μs
证明gulp已经安装完成，并且可以执行default方法了。
但是到这里还远远不够，我们需要继续创建几个文件夹和文件。
先在根目录下创建两个文件夹：
src(用于存放项目的html，css，js)和build(用于存放编译压缩过的html，css，js)
再在这两个文件夹中分别创建styles和scripts文件夹，在src中创建一个index.html文件
现在执行npm init // 创建一个 package.json 文件，便于与开发团队其他成员分享当前环境信息
二. API
需要了解的就4个API，gulp.src()，gulp.dest()，gulp.task()，以及gulp.watch()。可以参考文档
1. gulp.src(globs[, options])
gulp.src("src/scripts/*.js") //获取到src/scripts文件夹下的所有js文件流
.pipe(gulp.dest("build/scripts")); // 写入到目标文件夹build/scripts中，注意这里只能是文件夹的名称
globs参数： // 文件匹配模式，类似正则
类型： String or Array
这个可以参考node-glob
2. gulp.dest(path[, options])
path : 写入文件的路径 // 只能是文件夹的名称，如果目标文件夹不存在，会自动创建
3. gulp.task(name[, deps, fn])
name: 任务名
deps：任务开始前需要被执行或完成(依赖)的任务，类型：array
gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
});
这里需要注意的是，如果依赖的任务是异步执行的，就需要手动做一些处理： 执行回调、返回promise或返回一个事件流。这些链接的文档中都有，用到的话，可以参看文档。
fn: task中需要执行的代码
4. gulp.watch(glob[, opts], tasks) 或 gulp.watch(glob[, opts, cb])
gulp.watch(glob[, opts], tasks)
tasks: 类型 Array
当监视的文件改变时，会执行tasks里面的task
gulp.watch("src/*.html", ["reload", "uglify"]);
gulp.task("reload", function(){
// reload
});
gulp.task("uglify", function(){
// gulify
});
gulp.watch(glob[, opts, cb])
gulp.watch("src/*.html", function(event){
console.log("File" + event.path + "was" + event.type + ", running tasks...");
});
每次监视的文件改变，都会执行回调函数。
cb回调函数会传入一个event对象，描述文件的变化。
event.type : added, deleted, changed
event.path: 触发事件的文件路径
好了，API部分就不多讲了，网上有很多相关的讲解，讲得很细致，我就不赘述了。
三. 插件
插件非常多，可以参考文档
安装方法和使用方法，文档中也都有
四. 构建任务
了解了上面的基础之后，我最关心的就是如何构建一个server，监听工作目录，当目录中有文件改变时，就自动重新加载页面。
首先，要安装这个插件 browser-sync
BrowserSync可以同时同步刷新多个浏览器，更神奇的是你在一个浏览器中滚动页面、点击按钮、输入框中输入信息等用户行为也会同步到每个浏览器中。
npm install gulp-browser-sync --save-dev
gulpfile.js中：
var browserSync = require('browser-sync');
gulp.task('serve', function() {
browserSync.init({
server: './src/', // 解析src下的html
port: 3000
});
gulp.watch("src/*.html").on("change",browserSync.reload);
});
gulp.task('default', ['serve'], function() {
});
这个我也找了相关博客，可以参考
命令行输入gulp，就会自动打开浏览器，并且默认地址为：http://localhost:3000
现在，我们可以装一些需要的插件，写入相关gulp.task()，来管理我们的项目了。
ps：如果有理解的不对的地方，欢迎指正，谢谢！