花了一天的时间，把gulp的一些基本用法过了一遍。总算对其有了些了解。记录下学习中的不解，也算对这次的学习一个总结。
首先介绍一下gulp，gulp是一个前端构建工具，利用它可以在项目开发过程中自动化执行任务。有赖于其强大的插件系统，我们可以利用gulp完成很多任务，例如执行JSHint，编译stylus，更新版本号等。
安装gulp：
全局安装：
npm install -g gulp
项目安装：
npm install --save-dev gulp
—save-dev 安装包将在开发环境下安装，版本信息写入package.json的devDependencies下。
gulp任务都定义在gulpfile.js中，可以在终端运行gulp命令来执行。
gulp任务
加载gulp模块
var gulp = require('gulp');
其他gulp插件的加载也是一样。
下面是一段编译stylus的gulp task代码，用来简单解释一下gulp的工作流程。
gulp.task('stylus', function(){
gulp.src('./assets/stylus/style.styl')
.pipe(stylus())
.pipe(gulp.dest('./assets/stylesheets'));
});
gulp.task(taskName, excutor)用来定义任务。需要任务名和执行函数两个参数。执行函数也可以是多个任务。
gulp.task(‘build’, [‘task’, ‘anotherTask’]);
但是这些任务不是顺序执行的。要保证一个任务先于另一个执行可以：
gulp.task('taskTwo', ['taskOne'], function () {
// taskTwo
});
taskTwo 会在 taskOne执行完后再执行。
gulp.src()函数用来匹配文件，创建一个对象流来代表这些文件，之后的操作都是以这些文件为对象进行操作。pipe顾名思义就是管道的意思， stylus()返回修改后的文件对象放入流中，这些输出的文件随着管道被输入到gulp.dest()函数中并保持下来。
最后不要忘记在文件头部加载gulp-stylus模块。
运行gulp
终端执行 $ gulp 会报错，因为gulp默认会执行default 任务。需要在gulpfile.js内定义此任务
gulp.task('default', function(){
//deal with default task
})
如果要运行指定任务
$ gulp taskName
watching files
用gulp来监听文件的修改状态非常方便。我们来定义一个watch任务看一下
gulp.task('watch', function(){
gulp.watch('./assets/stylus/*.styl', ['stylus']);
});
现在当改变styl文件时就会执行stylus任务。
当然仅仅是watch是不够的，我们还希望在文件修改的同时浏览器能同步更新。browserSync插件就可以做到。当改变代码的时候，BrowserSync会重新加载页面，如果是css文件，会直接添加进css中，页面并不需要再次刷新。这样我们修改前端代码时就不需要每次都手动刷新浏览器。
gulp.task('browser-sync', function(){
browserSync.init(null, {
proxy: 'http://localhost:3000',
files: ['assets/stylesheets/*.css'],
browser: 'google-chrome',
port: 7000,
reloadOnRestart: false
});
});
gulp.task('default', ['browser-sync']);
gulp运行时会默认执行browser-sync任务。启动browserSync，监听css文件的改变并在chrome中加载更新的部分。
proxy: vhost url
files: 监听改变的文件
port: browser侦测改变的端口
browserSync主要监听浏览器端的改变，要监听更新服务端需要用到nodemon
gulp.task('nodemon', function(){
return nodemon({
script: 'bin/www',
ext: 'js'
}).on('start', function(){
});
});
项目开发是基于express， 这段代码会执行bin/www文件运行服务端，并监听js文件的改变，每次改变重启服务。