gulp是一个用来在web开发中完成一些自动化任务的工具，它常被用作以下任务：
- 启动一个web服务器；
- 保存代码时自动刷新浏览器；
- 预处理less,scss等；
- 优化压缩代码如CSS,JavaScript,HTML;
gulp不仅能完成上述任务，你甚至可以使用它来构建一个静态站点生成器。他相当强大，你可以利用他定制自己的一些任务。
why gulp?
像gulp之类的工具常常被称为build tools,因为这些工具通过执行一系列任务来构建网站。目前最流行的两个工具是gulp和grunt。两者主要的不同是你如何配置工作流，相比于grunt，gulp配置更简单同时也更快。
下面通过简单的配置来达到上面的4个任务。
installing gulp
- 首先需要依赖node环境，如有不清楚，请上官网查看如何安装。
-
npm install -g gulp，如果安装成功,gulp -v会打印出当前版本号。
creating a gulp project
- 创建一个文件夹
gulp-project. - 进入文件夹执行
npm init初始化项目，一路回车。这时会自动创建package.json文件 - 执行
npm install gulp --save-dev。安装成功后，可以看到gulp-project文件夹多了一个node_modules文件夹，另外package.json文件中也多了"devDependencies": { "gulp": "^3.9.1" }.
目前为止，我们已经准备好了gulp的环境，接下来让我们建立目录结构。
determining folder structure
- 建立如下目录,就是在gulp-project目录下建立app目录，dist目录和gulpfile.js文件。
app目录下建立相应的js，css等文件夹。
|- app/
|- css/
|- fonts/
|- images/
|- index.html
|- js/
|- scss/
|- dist/
|- gulpfile.js
|- node_modules/
|- package.json
上面结构的一点解释：
app目录就是主目录，项目中所有代码都编写在此目录下，dist内文件由gulpfiles.js内配置一系列任务生成。由此可见，主要工作流为app--->gulpfils.js-->dist。app相当于input，dist相当于output。gulpfiles相当于工厂。
writing you first gulp task
编写gulpfile.js
var gulp=require('gulp');
gulp.task('hello',function(){
console.log("hello world");
})
执行 gulp hello,就会打印出 hello world.
当然项目中很少让你打印hello world，更多的是下面这样的结构。
var gulp=require('gulp');
gulp.task('name',function(){
return gulp.src("source-files")
.pipe(plugin())
.pipe(gulp.dist("sistionation"))
})
gulp.src表示入口文件，经过相关插件，输出到gulp.dist
preprocessing with gulp
首先完成一个小任务，将sass编译为css。
- 安装相关插件。
npm install gulp-sass --save-dev - 项目中包含该依赖。
var sass=require("gulp-sass"); - scss文件夹下建立styles.scss文件，随便写一点scss,比如
.testing { width: percentage(5/7);},然后更改gulpfile.js文件如如下
var gulp=require('gulp');
var sass=require('gulp-sass');
gulp.task('sass', function(){
return gulp.src('app/scss/style.scss')
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest('app/css'))
});
- 命令行执行
gulp sass，看看发生了什么，css文件夹下自动生成了styles.css。
好的，第一个任务编译sass到此结束，是不是很简单！
watching sass files for change
gulp 提供了watch方法用来查看文件是否被保存。
gulp.watch("file-to-watch",["tasks","to","run"]).
如果我们想监听所有sass文件的改动，只需这样写
gulp.task('watch',function(){
gulp.watch('app/scss/**/*.scss',['sass']);
})
这样每当我们修改scss文件时，就会调用sass的task，自动修改css文件。自动保存并编译算是实现了，那么我们如何在编译后实时刷新浏览器呢？我们继续往下看！
live-reloading with browser-sync
首先安装大名鼎鼎的browser-sync，不了解的google一下，非常强大的一个插件。
