gulp
gulp簡介
gulp是前端開發過程中對代碼進行構建的工具，是自動化項目的構建利器；她不僅能對網站資源進行優化，而且在開發過程中很多重複的任務能夠使用正確的工具自動完成；使用她，我們不僅可以很愉快的編寫代碼，而且大大提高我們的工作效率。
gulp是基於Nodejs的自動任務運行器， 她能自動化地完成 javascript/coffee/sass/less/html/image/css/jsp 等文件的的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。在實現上，她借鑑了Unix操作系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操作上非常簡單。
入門
安裝gulp
1.安裝node.js
gulp是基於nodejs的，必須安裝nodejs。windows直接去官網下載安裝即可。
2.安裝gulp
全局安裝
打開命令行窗口，執行命令 npm install -g gulp
局部安裝
命令行進入項目目錄，執行命令 npm install –save-dev gulp
npm是nodejs的包管理器，管理插件的安裝、卸載、升級等。
我們全局安裝了gulp，項目也安裝了gulp，全局安裝gulp是爲了執行gulp任務，本地安裝gulp則是爲了調用gulp插件的功能。
3.使用taobao鏡像
使用npm安裝node插件，連接國外網站有時會因爲網絡問題而安裝失敗。我們可以npm的淘寶鏡像，每10分鐘同步與官方同步一次
npm config set registry http://registry.npm.taobao.org/
運行gulp
1.創建package.json
package.json是nodejs配置文件。可以按照格式手動創建。也可以在項目目錄中執行命令npm init 按照提示一步一步輸入創建。
2.創建gulpfile.js
gulpfile.js是gulp項目的gulp配置文件，手動創建即可。
簡單示例：
var gulp = require('gulp');
gulp.task('default',function(){
});
3.運行gulp
在項目目錄執行命令gulp
4.插件下載及使用
在項目目錄使用npm命令下載，如下載合併文件的插件gulp-concat：
npm install –save-dev gulp-concat
使用時如下：
在gulpfile.js中添加 var concat = require(‘gulp-concat’);
var gulp = require('gulp');
var concat = require('gulp-concat');
gulp.task('default',function(){
gulp.src('src/js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist/js'));
});
`````
<div class="se-preview-section-delimiter"></div>
## demo示例
**注：gulp生成了新的目標文件，與源文件進行了隔離**
1.css文件添加md5後綴
<div class="se-preview-section-delimiter"></div>
```javascript
var gulp = require('gulp');
var rev = require('gulp-rev');//生成md5後綴
var notify = require('gulp-notify');
gulp.task('css',function(){//css處理
gulp.src('src/main/webapp/static/css/*.css')//加載匹配的文件獲取流
.pipe(rev())//文件名稱家md5後綴
.pipe(gulp.dest('src/main/webapp/dest/css'))//輸出目錄
.pipe(rev.manifest({//將文件名稱後綴一json形式保存
merge:true
}))
.pipe(gulp.dest('src/main/webapp/dest/rev/css'))//json文件目錄
.pipe(notify({
message:'css done !' //通知執行結果
}))
;
});
gulp.task("default", ['css']);在項目目錄，執行gulp 或者 gulp css
2.合併及壓縮css
gulp.task('cssmin',function(){//合併css
gulp.src('src/main/webapp/static/css/merge/*.css')
.pipe(concat('merge.css'))//合併文件名稱
.pipe(cssmin())//壓縮
.pipe(rev())//添加md5後綴
.pipe(gulp.dest('src/main/webapp/dest/css'))//輸出處理後文件
.pipe(rev.manifest({//將文件信息已json形式保存至rev-manifest.json
merge:true
}))
.pipe(gulp.dest('src/main/webapp/dest/rev/merge'))//json文件輸出目錄
.pipe(notify({
message:'merge done !'
}))
;
});3.替換
gulp.task('cssmin',function(){//合併css
gulp.src('src/main/webapp/static/css/merge/*.css')
.pipe(concat('merge.css'))//合併文件名稱
.pipe(cssmin())//壓縮
.pipe(rev())//添加md5後綴
.pipe(gulp.dest('src/main/webapp/dest/css'))//輸出處理後文件
.pipe(rev.manifest({//將文件信息已json形式保存至rev-manifest.json
merge:true
}))
.pipe(gulp.dest('src/main/webapp/dest/rev/merge'))//json文件輸出目錄
.pipe(notify({
message:'merge done !'
}))
;
});```
4.使用外部文件
```javascript
var config = require('./src/main/webapp/config/config.json');//引用外部配置文件
//處理css或者js文件
function doStuff(src,dest){
return gulp.src(src)
.pipe(rev())
.pipe(gulp.dest(dest))
.pipe(rev.manifest({
merge:true
}))
.pipe(gulp.dest(dest))
.pipe(notify({
message:'doStuff done !'
}))
;
}
//處理jsp
function doJsp(manifest,src,dest){
return gulp.src([manifest+'/*.json',src])
.pipe(revCollector({
replaceReved:false,
dirReplacements: {
'static/css': '../css'
}
}))
.pipe(gulp.dest(dest))
.pipe(notify({
message:'doJsp done !'
}))
;
}
gulp.task('appcss',function(){
return doStuff(config.app.cssSrc,config.app.cssDest);
});
gulp.task('appreplace',['appcss'],function(){
return doJsp(config.app.cssDest,config.app.jspSrc,config.app.jspDest);
});
<div class="se-preview-section-delimiter"></div>
5.按順序執行任務
var runSequence = require('run-sequence');//task順序執行
gulp.task('build',function(done){
runSequence(
['js'],
['css'],
['cssmin'],
['replace'],
done
);
});