gulp是基於Nodejs的自動任務運行器， 她能自動化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。在實現上，她借鑑了Unix操作系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操作上非常簡單。
gulp 和 grunt 非常類似，但相比於 grunt 的頻繁 IO 操作，gulp 的流操作，能更快地更便捷地完成構建工作。
1、首先你要裝上nodejs環境；
http://nodejs.org；
在命令行輸入node -v
回車（Enter），如果安裝正確，你會看到n
ode的版本號；
在命令行輸入npm -v
如果正確，你可以看到npm的版本號；
如果錯誤，請重試；
2、npm介紹
（1）npm安裝插件
npm install [-g] [--save-dev]
（2）npm卸載插件
npm uninstall [-g] [--save-dev]
（3）npm更新插件
npm update [-g] [--save-dev]（不加name就是更新所有的插件） npm help、 npm list
因爲npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常。可以使用淘寶鏡像安裝
注意：安裝完後最好查看其版本號cnpm -v或關閉命令提示符重新打開，安裝完直接使用有可能會出現錯誤；npm install cnpm -g --registry=https://registry.npm.taobao.org
3、全局安裝gulp
cnpm install gulp -g
回車（Enter）
在輸入：gulp -v
如果看到版本號，說明安裝正確；
4、配置package.json文件
{
"name": "test",//項目名稱（必須）
"version": "1.0.0",////項目版本（必須）
"description": "This is for study gulp project !",//項目描述（必須）
"homepage": "",//項目主頁
"repository": {//項目資源庫
"type": "",
"url": ""//地址
},
"author": {
"name": "xyphf",//作者
"email": "[email protected]"//郵箱
},
"license": "ISC", //項目許可協議
"devDependencies": {//項目依賴的插件
"gulp": "^3.8.11",
"gulp-concat": "^2.6.0",//文件合併
"gulp-cssmin": "^0.1.7",//css壓縮
"gulp-imagemin": "^3.1.1",//圖片壓縮
"gulp-jshint": "^2.0.2",//js檢查
"gulp-rename": "^1.2.2",//重新命名
"gulp-uglify": "^2.0.0",//js壓縮
"jshint": "^2.9.4"
}
}
注意：json文件內是不能寫註釋的，複製下列內容請務必刪除註釋；
你可以將這個package.json複製下去，直接執行
npm install
5、本地安裝gulp插件
cd定位項目目錄 npm install --save-dev
PS：細心的你可能會發現，我們全局安裝了gulp，項目也安裝了gulp，全局安裝gulp是爲了執行gulp任務，本地安裝gulp則是爲了調用gulp插件的功能。
6、本地安裝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）
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
7、新建新建gulpfile.js文件（重要）
gulp有五個方法：src、dest、task、run、watch
src和dest：指定源文件和處理後文件的路徑
watch：用來監聽文件的變化
task：指定任務
run：執行任務
var gulp = require('gulp'), //基礎庫
htmlmin = require('gulp-htmlmin'),//html文件壓縮
css = require('gulp-minify-css'),//用於壓縮CSS
less = require('gulp-less'),//解析less文件
imagemin = require('gulp-imagemin'),//圖片壓縮
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') //liveload
rev = require('gulp-rev'),//版本號
server = tinylr(),
port = 35729,
liveload = require('gulp-liveload');//liveload
// 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.task('rev',function(){
gulp.src(['./src/*.json','./src/*.html'])
.pipe(revCollector({
replaceReved:true
}))
.pipe(gulp.dest('dist/'))
});
// 監聽任務 運行語句 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');
});
});
});
8、運行gulp
gulp 任務名稱
當執行gulp default或gulp將會調用default任務裏的所有任務
9.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即時會顯示到頁面中。
gulp常用地址
gulp官方網址：http://gulpjs.com
gulp插件地址：http://gulpjs.com/plugins
gulp 官方API：https://github.com/gulpjs/gulp/blob/master/docs/API.md
gulp 中文API：http://www.ydcss.com/archives/424