使用gulp要結合當前的專案架構做一定的處理，以實現自己想要的效果。
專案目錄大概：
liblar-ui
page
folder1
index.css
index.html
index.js
folder2
index.css
index.html
index.js
gulpfile.js
先羅列一下使用到的外掛程式：
1.gulp-load-plugins （自動載入package.json中的外掛程式）
2.gulp-clean （清除）
3.gulp-clean-css （壓縮css）
4.gulp-uglify （壓縮js）
5.gulp-rev （生成md5戳）
6.gulp-rev-collector （將html檔案中的js、css替換成帶有md5戳的檔案）
7.run-sequence （進行排序）
8.through2 （根據需求自定義外掛程式）
上**：
//var paths =載入gulp模組
var gulp = require('
gulp');
//自動載入外掛程式,能自動載入package.json裡的外掛程式，省去繁瑣的定義
var plugins = require('
gulp-load-plugins
')();
//載入run-sequence模組，按照順序執行
var runsequence = require('
run-sequence');
//載入through2模組
var through2 = require('
through2');
//定義路徑物件，方便調取
/** * 自定義外掛程式方法，修改rev.json檔案內容 */
function modify(modifier) );}/*
* * 刪除字段
* @param data json檔案裡的內容
* @returns */
function replacesuffix(data) /**
* 刪除字段，讓路徑統一 */
gulp.task(
"replacesuffix
",function (cb) );/**
* 刪除掉上一次構建時建立的資源 */
gulp.task(
'clean
',function () );/**
* 壓縮js,生成時間戳 */
gulp.task(
'uglifyjs
',function())
//壓縮js
.pipe(plugins.uglify())
//生成md5
.pipe(plugins.rev())
//輸出壓縮生成時間戳後的js檔案
//生成rev.json檔案
.pipe(plugins.rev.manifest())
//輸出json檔案
.pipe(gulp.dest(paths.rev_js));
});/*
* * 壓縮css，生成時間戳 */
gulp.task(
'minifycss
',function())
//壓縮css
.pipe(plugins.cleancss())
//生成md5戳
.pipe(plugins.rev())
//輸出壓縮生成時間戳後的css檔案
//生成rev.json檔案
.pipe(plugins.rev.manifest())
//輸出json檔案
.pipe(gulp.dest(paths.rev_css));
});/*
* * 替換檔案 */
gulp.task(
'pagepath
',function());/**
* 總入口 */
gulp.task(
'default
',function());
這個專案中遇到的問題在於全域性壓縮後帶有md5戳的js，css路徑都帶有上一級（即html中引入的是index.css，帶有時間戳的路徑是page/index-sdkfjdie102.css），導致替換檔案時出錯,解決辦法就是這段**：
/** * 自定義外掛程式方法，修改rev.json檔案內容 */
function modify(modifier) );
}
這裡用through2外掛程式自定義另乙個替換檔案的外掛程式，改變rev的json檔案內容，使路徑統一，最後使用run-sequence外掛程式讓期按指定的順序執行。因為這個專案裡html裡的js，css檔案都是同級目錄應用，經過處理的json檔案裡會有同名不同戳的檔案出現，導致後面的檔案覆蓋前面的檔案
如果專案中html中引入js、css方式是絕對路徑，可以不作處理。如果跟我一樣的話，解決方法看 gulp配合fs外掛程式與path外掛程式實現遍歷目錄得到子目錄。
js css檔案壓縮
當專案需要提交至外網環境時，可將js和css進行壓縮，以提高頁面的載入速度。進行js css壓縮有多種方式 1 node.js進行壓縮 注 此方法未使用過 2 nginx的gzip模組進行壓縮 注 詳細配置 在http模組新增如下幾段 即可。gzip on 開啟gzip gzip min lengt...
gulp 入門 使用gulp壓縮css
壓縮 css 可降低 css 檔案大小，提高頁面開啟速度。規律轉換為 gulp 找到css 目錄下的所有 css 檔案，壓縮它們，將壓縮後的檔案存放在dist css 目錄下。一 安裝 gulp minify css 模組 在命令列輸入sudo npm install gulp minify css...
gulp構建專案
1.建立project資料夾，手動初始化專案，使用npm管理工具 npm init yes2.根據package.json中的依賴包來進行專案的開發 cnpm install 此處使用的是 映象 安裝所有的依賴包3.首先確保你全域性安裝了gulp,當然專案中也安裝了gulp gulp init 此處...