gulp使用总结
这篇文章是针对正在使用或计划使用gulp的web开发人员的，希望对大家有帮助。
一、gulp是什么
gulp是前端开发过程中一种基于流的对代码进行构建的工具，而所谓的流就是建立在面向对象基础上的一种抽象的处理数据的工具。简言之就是一系列插件的集合。
要使用gulp，最快的方法当然是看官网,不得不说，gulp的中文API(http://www.gulpjs.com.cn/docs/api/)写的非常详细，根据步骤，一步步地操作。gulp的优势就是利用流的方式进行文件的处理，通过配置gulpfile.js文件，把任务pipe到一个个task中，有条理的完成我们的前端自动化构建。我们在项目开始之前就配置好gulpfile.js文件，项目中的js、css文件就跟小木偶一样按照我们配置好的规则一步步地前进了。
二、gulp安装
gulp贯穿项目每一个部分，项目中用到的gulp插件有gulp-compass,gulp-sass,gulp-jshint,gulp-minify-css,gulp-uglify,gulp-concat等等。利用gulp，终端能自动化地完成 js、css、scss 等文件的的查错、合并、压缩、浏览器自动刷新，并且在文件更改后，能自动重复执行以上步骤，非常的高效。当然，我用到的仅仅是gulp中非常小的一部分，gulp中还有很多新的东西等待我们去发现。
想要在项目中使用gulp，首先确保已经安装了nodejs环境(可在终端输入 node -v 查看nodejs版本号)，然后我们来安装gulp。
（1）npm install -g gulp 确保在全局环境下安装gulp,执行gulp -v确保安装成功。
（2） 全局安装gulp后，在本地安装gulp，把它放到你的devDependency中。
我刚接触gulp的时候，对gulp的目录结构有点迷惑，进入你的项目目录后，dist和stylesheets文件夹为gulp生成的文件夹，项目目录结构截图如下：
gulp需要在根目录构建一个gulpfile.js文件，项目中如下:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var compass = require('gulp-compass');
var rename = require('gulp-rename');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var minifyCss = require('gulp-minify-css');
// Static Server + watching scss/html files
gulp.task('serve', ['sass','scripts'], function() {
gulp.watch("sass/**/*.scss", ['sass']);
gulp.watch('javascripts/*.js',['scripts']);
gulp.watch("*.html").on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src("sass/**/*.scss")
.pipe(compass(
{
config_file: './config.rb',
css: 'stylesheets',
sass: 'sass'
}
))
.pipe(sass())
.pipe(minifyCss({compatibility: 'ie8'}))
.pipe(gulp.dest("stylesheets"))
});
gulp.task('scripts', function() {
gulp.src(['javascripts/zepto.min.js', 'javascripts/zepto.fullpage.js', 'javascripts/newyear.js'])
//.pipe(jshint())
.pipe(concat('all.js'))//合并后的文件名
.pipe(uglify())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('./dist'))
});
gulp.task('default', ['serve']);
gulpfile基本原理是使用require将gulp对象引入进来（也可以通过gulp-load-plugins将package.json文件中的插件加载进来），然后执行每一个task，以上面的sass task为例，该task没有需要依赖执行的task，将gulp.src目录下的文件读取到数据流中，执行每一个方法，每一个pipe就是一个方法。监听sass文件的变化，一旦写入文件，更改了sass文件中的内容，就会重新依次执行管道中的内容，return则是将整个任务的stream对象返回出去。
下面依次介绍用到的gulp插件：
gulp-jshint：检查javascript代码中的错误 。
gulp-uglify:js压缩工具。
gulp-compass：sass语言的工具集，有六大模块，大大提高工作效率。Compass是用Ruby语言开发的，所以安装它之前，必须安装Ruby。
gulp-sass：预编译器。
gulp-browser-sync：监听文件变化，页面自动刷新。
gulp plugins如何配置呢？打开https://www.npmjs.com/，搜索你需要使用的gulp插件，点击进入以后，每个plugins都会有详细的配置方法。
gulp使用中还有一些需要注意的细节：
（1）确保你的任何gulp操作位于你的文件夹根目录下。
（2）使用 gulp插件，请务必确保你将它放到 devDependency 中。
（3）文件夹中有多级目录时，可以通过sass/**/*.css，可以匹配sass目录下的所有文件。
gulp相关文章：
http://www.reeoo.me/archives/gulpjs.html
http://www.ruanyifeng.com/blog/2012/11/compass.html
