参考资料：
http://www.ydcss.com/archives/18
http://www.techug.com/gulp
http://www.browsersync.cn/
一．安装
前提条件：已安装nodeJS
*所有 绿色带下划线均为指令 在命令行下操作
选装cnpm:
受国内网络影响，设在国外的npm服务器在国内访问有可能出现异常，所以可选淘宝团队构建的cnpm来代替npm指令。
下文所有npm指令用cnpm代替，如果没有安装cnpm则把下文cnmp指令换成npm即可。
安装cnpm指令：npm install cnpm -g --registry=https://registry.npm.taobao.org
1.全局安装gulp
cnpm install gulp -g
查看是否正确安装：gulp -v 出现版本号则正确安装
2.在开发目录中新建package.json文件
使用cd命令进入开发目录，如没有特殊说明，以下所有命令都已在开发目录下运行。
package.json是一个项目的配置文件，它是一个json格式的文本文件。可以手动创建，也可以使用cnpm init命令自动创建并根据提示填写信息。
下面是一个package.json文件的例子：
我们在这里不讨论关于package.json文件中的各项配置的含义，如有兴趣自行百度。我们重点关注”devDependencies”一项中的信息（在下一步中很重要），这一项配置的是该项目依赖的插件，也就是在当前项目中通过cnpm install命令安装的一系列插件名称及其版本号。
3.在开发目录中安装gulp及你所需要的插件
cnpm install gulp --save-dev
全局安装gulp是为了执行gulp任务，开发目录中安装gulp则是为了调用gulp插件的功能。
安装gulp插件的命令和在开发目录中安装gulp的命令一样，格式都是：
cnpm install 插件名 --save-dev
你会发现每次开发都需要重复地输入命令行安装各种各样的插件是一件很繁琐的事，因此上一步提到的package.json的作用就体现出来了，你可以复制上一次开发用到的package.json文件到你的本次开发目录下（配置文件中的项目名称、作者、版本号等信息自行更改），然后直接执行
cnpm install --save-dev
这样会根据你在package.json中写入的”devDependencies”一项中的信息自动安装完所有的插件。
重要：你安装的每一个插件，都会在node_modules文件夹下生成一个属于该插件的文件夹（例如：.2.0.0@gulp-uglify文件夹就是gulp-uglify的文件夹），文件夹中的README.md文件详细记载了该插件的使用方法，遇到中文教程缺乏的插件，可参考README.md文件使用该插件。
4.创建gulpfile.js文件
gulpfile.js是gulp项目的配置文件，负责gulp任务的设置。
下面是一个gulpfile.js文件的例子：
//导入所引用的模块
var gulp = require("gulp"); //基础库
var sass = require("gulp-sass"); // sass/css编译
var uglify = require("gulp-uglify"); //压缩&重命名JS
var browserSync = require('browser-sync').create(); //自动刷新
var autoprefixer = require('gulp-autoprefixer');//自动添加css3浏览器前缀
var changed = require('gulp-changed');//只操作有过修改的文件 对sass文件无效
//将所有html文件整理至dist文件夹下
gulp.task('html',function(){
return gulp.src('src/**/*.html')//指定源文件路径，并进行文件匹配
.pipe(changed('dist')) // 对比文件是否有过改动（此处填写的路径和输出路径保持一致）
.pipe(gulp.dest('dist'));//输出路径
});
//css预处理附加css3兼容前缀
gulp.task('sass',function(){
return gulp.src('src/sass/**/*.scss')
.pipe(sass({outputStyle:'expanded'}).on('error',sass.logError))
.pipe(autoprefixer({ //自动补全css3属性前缀
browsers:['last 2 versions','Android >= 4.0'],//主流浏览器的最新两个版本
cascade:true//是否美化属性值
})
)
//编译后的css排列风格以及报错输出
.pipe(gulp.dest('dist/css'))//输出到开发路径
.pipe(gulp.dest('src/css'))//输出到路径
});
//JS压缩&重命名
gulp.task('script',function(){
return gulp.src('src/js/*.js')//指定源文件路径、进行文件匹配
.pipe(changed('dist/js')) // 对比文件是否有过改动（此处填写的路径和输出路径保持一致）
.pipe(uglify({preserveComments:'some'}))//使用uglify进行压缩，并保留部分注释
.pipe(gulp.dest('dist/js'))//输出路径
});
//启动本地测试服务器并监视文件改动
gulp.task('serve',function(){
browserSync.init({
server:"./src"
});
gulp.watch("src/js/*.js",['script']).on('change',browserSync.reload);//检测js改动并压缩刷新
gulp.watch("src/sass/*.scss",['sass']).on('change',browserSync.reload);//检测scss改动并编译刷新
gulp.watch("src/*.html",['html']).on('change',browserSync.reload);//检测html改动并刷新
});
//默认任务
gulp.task('default',['html','script','sass','serve']);
gulpfile.js中的部分语句或函数的解释：
一．
require()
引入上一步已经安装好的插件，并提供一个接口去实现插件的命令。
二．
gulp.src()
指定该项任务操作的文件，如gulp.src(‘src/**/*.html’)代表该任务操作的文件为src文件夹及其所有子文件夹下的所有后缀为html的文件。
三．
gulp.task()
创建gulp任务，语法：
gulp.task(‘自定义任务名称’,function(){});
在第二个参数function(){}中写入该任务需要执行的操作。一般通过pipe()连接多步操作。
四．
pipe()
pipe()是需要多个插件协同完成任务的“管道”。
我们从需求说起，例如：
“我想用sass写css，这就需要gulp-sass插件来编译scss文件转换成css,但我又想在生成css的时候用gulp-autoprefixer插件来补全css3的兼容性前缀。”
这个时候我们就需要pipe()来连接这两个任务：
.pipe(sass({outputStyle:'expanded'}).on('error',sass.logError))
.pipe(autoprefixer({ //自动补全css3属性前缀
browsers:['last 2 versions','Android >= 4.0'],//主流浏览器的最新两个版本
cascade:true//是否美化属性值
})
五．
gulp.dest()
输出文件。
大部分任务的最后一步都是输出文件，使用gulp.dest()将已经处理好的文件输出到指定目录。
涉及到具体插件的用法请看开头的参考资料的链接，其中有详细的使用说明，或者找到node_modules下对应该插件的README.md说明文档。
5.运行gulp任务
当你完成了gulpfile.js中的任务的创建，就可以执行设定的任务了。
命令格式：
gulp 任务名
如果没有指定任务名，直接运行gulp 命令，则会执行任务名为default的默认任务。
6.总结
1.安装nodejs
2.新建package.json文件
3.全局和本地安装gulp
4.安装gulp插件
5.新建gulpfile.js文件
6.通过命令行运行gulp任务
PS.以上为个人理解参考资料的总结，如有错误，纯属正常，请谨慎参考加实践。
