gulp項目構建 多個開發者共同開發一個項目，每位開發者負責不同的模塊，這就會造成一個完整的項目實際上是由許多的“代碼版段”組成的； 使用less、sass等一些預處理程式，降低CSS的維護成本，最終需要將這些預處理程式進行解析； 合併css、javascript，壓縮html、css、javasc ...
gulp項目構建
多個開發者共同開發一個項目，每位開發者負責不同的模塊，這就會造成一個完整的項目實際上是由許多的“代碼版段”組成的；
使用less、sass等一些預處理程式，降低CSS的維護成本，最終需要將這些預處理程式進行解析；
合併css、javascript，壓縮html、css、javascript、images可以加速網頁打開速度，提升性能；
這一系列的任務完全靠手動完成幾乎是不可能的，藉助構建工具可以輕鬆實現。
所謂構建工具是指通過簡單配置就可以幫我們實現合併、壓縮、校驗、預處理等一系列任務的軟體工具。
常見的構建工具包括：Grunt、Gulp、F.I.S（百度出品）、webpack
Gulp
Gulp是基於Nodejs開發的一個構建工具，藉助gulp插件可以實現不同的構建任務，以其簡潔的配置和卓越的性能成為目前主流的構建工具。
全局安裝 npm install -g gulp
Gulp基礎
1、本地安裝gulp
進入項目根目錄執行npm install gulp --save-dev（添加--save-dev會在package.json記錄依賴關係）。
2、任務清單
在項目根目錄中創建gulpfile.js（這是一個配置文件）
var gulp = require('gulp');
gulp.task('default',function(){
//定義任務
})3、定義任務
在gulpfile.js定義構建任務，如壓縮、合併，Gulp自身並不執行任何任務，是通過調用具體插件來完成的。
以編譯LESS為例，安裝npm install gulp-less，如下圖定義任務
var gulp = require('gulp'),
less = require('gulp-less');
gulp.task('less',function(){
return gulp,src('./public.less/*.less')
.pipe(less())
.pipe(gulp.desk('./public/css'));
});4、執行任務
輸入命令 gulp less
gulp less這樣我們的LESS文件便會編譯成CSS了。
Gulp工作原理
通過不同的插件實現構建任務，Gulp只是按著配置文件調用執行了這些插件。
Gulp API
Gulp是基於NodeJS的，通過require可以引入一個NodeJS的包（模塊），其作用類似於瀏覽器中的script標簽引入資源，被引入的包存放在node_modules目錄下。
引入gulp包（模塊）後返回一個對象，習慣賦值給變數gulp，通過該對象提供的方法（API）完成任務的配置。
1、gulp.task() 定義各種不同的任務，如下圖有兩個參數
gulp.task('less',function(){
//定義人物
})不同任務間存在依賴關係時，可以指定依賴，如下
gulp.task('less',['依賴一'],['依賴二'],['依賴三'],function(){
})2、gulp.src() 需要構建資源的路徑，字元串或數組（可以正則方式書寫）
gulp.task('less',function(){
gulp.src('./public/less/**/*.js')
});2、gulp.pipe() 管道，將需要構建的資源“輸送”給插件。
gulp.task('less',function(){
gulp.src('./public/less/**/*.js')
.pipe(less())
});3、gulp.dest() 構建任務完成後資源存放的路徑（會自動創建）
gulp.task('less',function(){
gulp.src('./public/less/**/*.js')
.pipe(less())
.pipe(gulp.desk('./public/css'));
});4、gulp.watch()
常用Gulp插件(官網還有更多)
gulp-less 編譯LESS文件
gulp-autoprefixer 添加CSS私有首碼
gulp-cssmin 壓縮CSS
gulp-rname重命名
gulp-imagemin 圖片壓縮
gulp-uglify 壓縮Javascript
gulp-concat 合併
gulp-htmlmin 壓縮HTML
gulp-rev 添加版本號
gulp-rev-collector 內容替換
gulp-useref 文件合併，文件刪除
gulp-if 條件判斷完整的一個項目構建
var gulp = require('gulp'),
less = require('gulp-less'),
cssmin = require('gulp-cssmin'),
autoprefixer = require('gulp-autoprefixer'),
rev = require('gulp-rev'),
imagemin = require('gulp-imagemin'),
useref = require('gulp-useref'),
gulpif = require('gulp-if'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
revCollector = require('gulp-rev-collector');
// gulp 對象，提供了若幹方法
// 處理css
gulp.task('css', function () {
return gulp.src('./public/less/main.less')
.pipe(less())
.pipe(cssmin())
.pipe(autoprefixer())
.pipe(rev())
.pipe(gulp.dest('./release/public/css'))
.pipe(rev.manifest())
.pipe(rename('css-manifest.json'))
.pipe(gulp.dest('./release/rev'));
});
// 處理圖片
gulp.task('image', function () {
return gulp.src(['./public/images/**/*', './uploads/*'], {base: './'})
.pipe(imagemin())
.pipe(rev())
.pipe(gulp.dest('./release'))
.pipe(rev.manifest())
.pipe(rename('image-manifest.json'))
.pipe(gulp.dest('./release/rev'));
});
// 處理js
gulp.task('useref', function () {
return gulp.src('./index.html')
.pipe(useref())
.pipe(gulpif('*.js', uglify()))
.pipe(gulpif('*.js', rev()))
.pipe(gulp.dest('./release'))
.pipe(rev.manifest())
.pipe(rename('js-manifest.json'))
.pipe(gulp.dest('./release/rev'));
});
// 其它
gulp.task('other', function () {
return gulp.src(['./api/*', './public/fonts/*', './public/libs/*', './views/*.html'], {base: './'})//base:確定以哪個為基礎路徑
.pipe(gulp.dest('./release'));
});
// 替換
gulp.task('rev', ['css', 'image', 'useref'], function () {
gulp.src(['./release/rev/*.json', './release/index.html'])
.pipe(revCollector())
.pipe(gulp.dest('./release'));
});
//return用來解決依賴關係的執行時間問題
gulp.task('default', ['rev', 'other']);
// gulp.task('default', function () {
// console.log('預設');
// })
// gulp.task('demo', ['css', 'image'], function () {
// console.log(11);
// });
