全部功能前提須要安裝nodejs（本人安裝版本v0.10.26）和ruby（本人安裝版本1.9.3p484）。javascript
Gulp 是一款基於任務的設計模式的自動化工具，經過插件的配合解決全套前端解決方案，如靜態頁面壓縮、圖片壓縮、JS合併、SASS同步編譯並壓縮CSS、服務器控制客戶端同步刷新。css
Gulp安裝
全局安裝Gulpjshtml
npm install -g gulp #全局安裝
局部安裝Gulpjs前端
npm install gulp --save-dev # 局部安裝
全局安裝
1. 將安裝包放在 /usr/local 下
2. 能夠直接在命令行裏使用java
本地安裝
1. 將安裝包放在 ./node_modules 下（運行npm時所在的目錄）
2. 能夠經過 require() 來引入本地安裝的包node
選擇Gulp組件
前端項目須要的功能：
一、圖片（壓縮圖片支持jpg、png、gif）
二、樣式 （支持sass 同時支持合併、壓縮、重命名）
三、javascript （檢查、合併、壓縮、重命名）
四、html （壓縮）
五、客戶端同步刷新顯示修改
六、構建項目前清除發佈環境下的文件（保持發佈環境的清潔）git
經過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）github
安裝Gulp組件
安裝組件項目目錄，經過cd project 進入目錄，執行下邊的npm安裝組件。web
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
項目目錄結構
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任務文件chrome
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')