寫在前面的話：
常見的自動建構工具有 grunt、gulp、webpack，把源碼進行合并壓縮，節省帶寬等~
一起來學習 gulp 的使用吧~
三、gulp的使用( gulp 中文網)：
gulp 的優點：基于流、任務化
常用API: src 、dest 、watch 、task 、pipe
（1）安裝 gulp：
npm install -g gulp
（2）再在 webapp檔案夾下安裝一些 nodejs 子產品：
npm init
之後webapp中就會出現一個package.json檔案，以及一個 node_modules 檔案夾
（3）繼續安裝一些依賴插件：
npm install --save-dev gulp
一個一個裝太麻煩了，可用批量安裝的方式（之間用空格分開）：
npm install --save-dev gulp-clean gulp-concat gulp-connect gulp-cssmin gulp-imagemin gulp-less gulp-load-plugins gulp-uglify open
安裝完了之後 package.json檔案的内容如下圖，可以看到已安裝的依賴（10個）的版本資訊：
（4）配置檔案夾，首先要對需要的檔案目錄預先做一下設計，參考如下：
目錄結構設計：
build 用于調試
dist 用于釋出使用
src:
data (用于mock資料)
image
script：config,controller,directive,filter,service
app.js
style:
view: 各種html檔案
index.html
404.html
編寫任務
lib
html
json
css
js
image
clean
reload
watch
開始編寫任務吧，是以按照任務名稱，下面有九步~
做法：
1）在webapp檔案下建立一個檔案gulpfile.js，内容如下：
1 var gulp = require('gulp');
2 var $ = require('gulp-load-plugins')();
3 var open = require('open');
4
5 var app = {
6 srcPath: 'src/',
7 devPath: 'build/',
8 prdPath: 'dist/'
9 };
10
11 gulp.task('lib', function(){
12 gulp.src('bower_components/**/*')
13 .pipe(gulp.dest(app.devPath + 'vendor'))
14 .pipe(gulp.dest(app.prdPath + 'vendor'))
15 }); 儲存後，運作如下指令：
gulp lib
執行成功後，webapp 檔案夾下出現了 build 、dist 兩個檔案夾，且都包含了 vendor 檔案夾。
2）在webapp檔案下建立一個檔案夾 src, 并在gulpfile.js檔案新增如下代碼：
gulp.task('html', function(){
gulp.src(app.srcPath + '**/*.html')
.pipe(gulp.dest(app.devPath))
.pipe(gulp.dest(app.prdPath))
}); 寫完了之後可以測試一下：在src中建立一個名為view的檔案夾，在view中建立一個1.html文檔(内容為空都沒有關系)，然後運作
gulp html
執行成功後，webapp 檔案夾下的 build 、dist 兩個檔案夾中，且都包含了 view 檔案夾，證明配置成功啦~
3）在gulpfile.js檔案新增如下代碼：
gulp.task('json', function(){
gulp.src(app.srcPath + 'data/**/*.json')
.pipe(gulp.dest(app.devPath + 'data'))
.pipe(gulp.dest(app.prdPath + 'data'))
}); 寫完了之後可以測試一下：在src中建立一個名為data的檔案夾，在data中建立一個1.json文檔(内容為空都沒有關系)，然後運作
gulp json
執行成功後，webapp 檔案夾下的 build 、dist 兩個檔案夾中，且都包含了 data 檔案夾，證明配置成功啦~
4）在gulpfile.js檔案新增如下代碼：
gulp.task('less', function(){
gulp.src(app.srcPath + 'style/index.less')
.pipe($.less())
.pipe(gulp.dest(app.devPath + 'css'))
.pipe($.cssmin())
.pipe(gulp.dest(app.prdPath + 'css'))
}); 寫完了之後可以測試一下：在src中建立一個名為 style 的檔案夾，在 style 中建立一個1.less文檔 以及一個 index.less文檔 (内容為空都沒有關系)，然後運作
gulp less
執行成功後，webapp 檔案夾下的 build 、dist 兩個檔案夾中，且都包含了 css 檔案夾及index.css，證明配置成功啦~
注：此處使用index.less作為一個總的引用，在其中使用@import将其他所有的.less檔案都引入過來。
5）在gulpfile.js檔案新增如下代碼：
gulp.task('js', function(){
gulp.src(app.srcPath + 'script/**/*.js')
.pipe($.concat('index.js'))
.pipe(gulp.dest(app.devPath + 'js'))
.pipe($.uglify())
.pipe(gulp.dest(app.prdPath + 'js'))
}); 寫完了之後可以測試一下：在src中建立一個名為 script 的檔案夾，在 script 中建立一個1.js文檔 以及一個 2.js文檔 (内容為空都沒有關系)，然後運作
gulp js
執行成功後，webapp 檔案夾下的 build 、dist 兩個檔案夾中，且都包含了 js 檔案夾及index.js，證明配置成功啦~
注：此處使用index.js作為一個總的引用。
6）在gulpfile.js檔案新增如下代碼：
gulp.task('image', function(){
gulp.src(app.srcPath + 'image/**/*')
.pipe(gulp.dest(app.devPath + 'image'))
.pipe($.imagemin())
.pipe(gulp.dest(app.prdPath + 'image'))
}); 寫完了之後可以測試一下：在src中建立一個名為 image 的檔案夾，在 image 中加入一個1.png，然後運作
gulp image
執行成功後，webapp 檔案夾下的 build 、dist 兩個檔案夾中，且都包含了 image 檔案夾及1.png，且圖檔被壓縮得更小了，原來是72.6k, build中是72.6k, dist中是63.4k。 證明配置成功啦~
7）在gulpfile.js檔案新增如下代碼：
gulp.task('clean', function(){
gulp.src([app.devPath, app.prdPath])
.pipe($.clean())
}); 寫完了之後運作
gulp clean
執行成功後，webapp 檔案夾下的 build 、dist 兩個檔案夾都消失了。 證明配置成功啦~
至此，9個裡面已經有7個配置完啦！可以透露一下小技巧了，執行一個指令，将所有需要編譯拷貝的檔案一下全搞定~隻要在gulpfile.js檔案新增如下代碼：
gulp.task('build',['image', 'js', 'less', 'lib', 'html', 'json']); 運作：
gulp build
然後之前被删掉的都回來啦~開發時這樣用就比較友善啦，不用運作那麼多次了。同時，還可設定建構時自動打開浏覽器，并指定監控端口為1234，隻要在gulpfile.js檔案新增如下代碼：
gulp.task('serve',['build'], function(){
$.connect.server({
root: [app.devPath],
livereload: true,
port: 1234
});
open('http://localhost:1234');
gulp.watch('bower_components/**/*',['lib']);
gulp.watch(app.srcPath + '**/*.html', ['html']);
gulp.watch(app.srcPath + 'data/**/*.json', ['json']);
gulp.watch(app.srcPath + 'style/**/*.less', ['less']);
gulp.watch(app.srcPath + 'image/**/*', ['image']);
gulp.watch(app.srcPath + 'script/**/*.js', ['js']);
}); 運作：gulp serve
當然這樣是不能夠實作重新整理的，還需要進行下一步reload才可。
8）在gulpfile.js檔案新增如下代碼：
在1~6步 的後面都要加上 reload()，也就是下面的一句話：
.pipe($.connect.reload());
執行個體：隻列舉一個~
這樣的話，每次運作 gulp serve時都能自動更新了，
還有一個方法，可以實作 隻輸入 gulp 即可運作，方法如下，在gulpfile.js檔案新增如下代碼：
gulp.task('default', ['serve']); //加了這一句之後，直接運作gulp後面不加什麼，就可以直接serve 來試一下：
gulp
額，浏覽器自動打開！ 并呈現出 index.html中的内容。
注意：index.html是寫在src路徑下的。
ok 啦~
至此，本文結束~
轉載于:https://www.cnblogs.com/Christeen/p/6491964.html