所有功能前提需要安装nodejs（本人安装版本v0.10.26）和ruby（本人安装版本1.9.3p484）。
Gulp 是一款基于任务的设计模式的自动化工具，通过插件的配合解决全套前端解决方案，如静态页面压缩、图片压缩、JS合并、SASS同步编译并压缩CSS、服务器控制客户端同步刷新。
Gulp安装
全局安装Gulpjs
局部安装Gulpjs
全局安装
1. 将安装包放在 /usr/local 下
2. 可以直接在命令行里使用
本地安装
1. 将安装包放在 ./node_modules 下（运行npm时所在的目录）
2. 可以通过 require() 来引入本地安装的包
选择Gulp组件
前端项目需要的功能：
1、图片（压缩图片支持jpg、png、gif）
2、样式 （支持sass 同时支持合并、压缩、重命名）
3、javascript （检查、合并、压缩、重命名）
4、html （压缩）
5、客户端同步刷新显示修改
6、构建项目前清除发布环境下的文件（保持发布环境的清洁）
通过gulp plugins，寻找对于的gulp组件
gulp-imagemin: 压缩图片
gulp-ruby-sass: 支持sass
gulp-minify-css: 压缩css
gulp-jshint: 检查js
gulp-uglify: 压缩js
gulp-concat: 合并文件
gulp-rename: 重命名文件
gulp-htmlmin: 压缩html
gulp-clean: 清空文件夹
gulp-livereload: 服务器控制客户端同步刷新（需配合chrome插件LiveReload及tiny-lr）
安装Gulp组件
安装组件项目目录，通过cd project 进入目录，执行下边的npm安装组件。
项目目录结构
project(项目名称)
|–.git 通过git管理项目会生成这个文件夹
|–node_modules 组件目录
|–dist 发布环境
|–css 样式文件(style.css style.min.css)
|–images 图片文件(压缩图片)
|–js js文件(main.js main.min.js)
|–index.html 静态文件(压缩html)
|–src 生产环境
|–sass sass文件
|–images 图片文件
|–js js文件
|–index.html 静态文件
|–.jshintrc jshint配置文件
|–gulpfile.js gulp任务文件
gulp基础语法
gulp通过gulpfile文件来完成相关任务，因此项目中必须包含gulpfile.js
gulp有五个方法：src、dest、task、run、watch
src和dest：指定源文件和处理后文件的路径
watch：用来监听文件的变化
task：指定任务
run：执行任务
编写gulp任务
/** * 组件安装 * npm install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-livereload tiny-lr --save-dev */ // 引入 gulp及组件 var gulp = require('gulp'), //基础库 imagemin = require('gulp-imagemin'), //图片压缩 sass = require('gulp-ruby-sass'), //sass minifycss = require('gulp-minify-css'), //css压缩 jshint = require('gulp-jshint'), //js检查 uglify = require('gulp-uglify'), //js压缩 rename = require('gulp-rename'), //重命名 concat = require('gulp-concat'), //合并文件 clean = require('gulp-clean'), //清空文件夹 tinylr = require('tiny-lr'), //livereload server = tinylr(), port = 35729, livereload = require('gulp-livereload'); //livereload // HTML处理 gulp.task('html', function() { var htmlSrc = './src/*.html', htmlDst = './dist/'; gulp.src(htmlSrc) .pipe(livereload(server)) .pipe(gulp.dest(htmlDst)) }); // 样式处理 gulp.task('css', function () { var cssSrc = './src/scss/*.scss', cssDst = './dist/css'; gulp.src(cssSrc) .pipe(sass({ style: 'expanded'})) .pipe(gulp.dest(cssDst)) .pipe(rename({ suffix: '.min' })) .pipe(minifycss()) .pipe(livereload(server)) .pipe(gulp.dest(cssDst)); }); // 图片处理 gulp.task('images', function(){ var imgSrc = './src/images/**/*', imgDst = './dist/images'; gulp.src(imgSrc) .pipe(imagemin()) .pipe(livereload(server)) .pipe(gulp.dest(imgDst)); }) // js处理 gulp.task('js', function () { var jsSrc = './src/js/*.js', jsDst ='./dist/js'; gulp.src(jsSrc) .pipe(jshint('.jshintrc')) .pipe(jshint.reporter('default')) .pipe(concat('main.js')) .pipe(gulp.dest(jsDst)) .pipe(rename({ suffix: '.min' })) .pipe(uglify()) .pipe(livereload(server)) .pipe(gulp.dest(jsDst)); }); // 清空图片、样式、js gulp.task('clean', function() { gulp.src(['./dist/css', './dist/js', './dist/images'], {read: false}) .pipe(clean()); }); // 默认任务 清空图片、样式、js并重建 运行语句 gulp gulp.task('default', ['clean'], function(){ gulp.start('html','css','images','js'); }); // 监听任务 运行语句 gulp watch gulp.task('watch',function(){ server.listen(port, function(err){ if (err) { return console.log(err); } // 监听html gulp.watch('./src/*.html', function(event){ gulp.run('html'); }) // 监听css gulp.watch('./src/scss/*.scss', function(){ gulp.run('css'); }); // 监听images gulp.watch('./src/images/**/*', function(){ gulp.run('images'); }); // 监听js gulp.watch('./src/js/*.js', function(){ gulp.run('js'); }); }); });
LiveReload配置
1、安装Chrome LiveReload
2、通过npm安装http-server ，快速建立http服务
npm install http-server -g
3、通过cd找到发布环境目录dist
4、运行http-server，默认端口是8080
5、访问路径localhost:8080
6、再打开一个cmd，通过cd找到项目路径执行gulp，清空发布环境并初始化
7、执行监控 gulp
8、点击chrome上的LiveReload插件，空心变成实心即关联上，你可以修改css、js、html即时会显示到页面中。
视频教材youtube（需要翻墙）：http://www.youtube.com/watch?v=OKVE6wE9CW4
项目git
配置好的项目已经放到github上。
下载地址：https://github.com/dbpoo/gulp
git clone地址：git@github.com:dbpoo/gulp.git
转载：http://www.dbpoo.com/getting-started-with-gulp/