这篇文章是针对正在使用或计划使用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需要在根目录构建一个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
原文：http://www.cnblogs.com/lilycn/p/5178431.html