gulp之自動化靜態資源壓縮合並加版本號
gulp之自動化壓縮合並加版本號
這個方案主要是為了實現js/css/image的壓縮合並、自動新增版本號、自動加瀏覽器字首和壓縮html。
先把下面這裡外掛 npm i (外掛名) -D 安裝到專案環境內
- gulp-sequence //順序執行任務
- gulp-csso //css壓縮
- gulp-jshint //js檢查
- gulp-uglify`), //js壓縮
- gulp-imagemin //壓縮圖片
- gulp-htmlmin //壓縮html
- gulp-clean //清空資料夾
- gulp-rev //更改版本名 md5字尾
- gulp-autoprefixer //加瀏覽器字首
- gulp-rev-collector //gulp-rev 的外掛,用於html模板更改引用路徑
目錄結構
|- root
| |-dist //此目錄為下面生成的
| |-css
| |-js
| |-images
| |-rev
| |-index.html
| |-node_modules
| |-src //資源目錄
| |-css
| |-js
| |-images
| index.html
| gulpfile.js
| package.json
gulpfile.js檔案
var gulp = require(`gulp`),
gulpSequence = require(`gulp-sequence`), //同步執行任務
csso = require(`gulp-csso`), //css壓縮
jshint = require(`gulp-jshint`), //js檢查
uglify = require(`gulp-uglify`), //js壓縮
imageMin = require(`gulp-imagemin`), //壓縮圖片
htmlMin = require(`gulp-htmlmin`), //壓縮html
clean = require(`gulp-clean`), //清空資料夾
rev = require(`gulp-rev`), //更改版本名 md5字尾
autoFx = require(`gulp-autoprefixer`), //加瀏覽器字首
revCollector = require(`gulp-rev-collector`); //gulp-rev 的外掛,用於html模板更改引用路徑
//清空資料夾
gulp.task(`clean`, function(){
return gulp.src(`dist`, {read:false})
.pipe(clean());
});
//壓縮css/加瀏覽器字首
gulp.task(`css`, function(){
return gulp.src(`src/css/*.css`)
.pipe(autoFx({
browsers: [`last 2 versions`, `Android >= 4.0`]
}))
.pipe(csso())
.pipe(rev())
.pipe(gulp.dest(`dist/css`))
.pipe(rev.manifest())
.pipe(gulp.dest(`dist/rev/css`));
});
//壓縮js
gulp.task(`js`, function(){
return gulp.src(`src/js/*.js`)
.pipe(uglify())
.pipe(rev())
.pipe(gulp.dest(`dist/js`))
.pipe(rev.manifest())
.pipe(gulp.dest(`dist/rev/js`));
});
//壓縮image
gulp.task(`image`, function(){
return gulp.src(`src/images/*.{png,jpg,gif,ico}`)
.pipe(imageMin({
optimizationLevel: 5,
progressive: true,
interlaced: true,
multipass: true
}))
.pipe(rev())
.pipe(gulp.dest(`dist/images`))
.pipe(rev.manifest())
.pipe(gulp.dest(`dist/rev/images`));
});
//改變css引用路徑
gulp.task(`revCss`,function(){
return gulp.src([`dist/rev/**/*.json`,`dist/css/*.css`])
.pipe(revCollector({
replaceReved: true
}))
.pipe(gulp.dest(`dist/css`));
});
//改變html引用路徑
gulp.task(`rev`, function(){
return gulp.src([`dist/rev/**/*.json`,`src/*.html`])
.pipe(revCollector({
replaceReved: true
}))
.pipe(htmlMin())
.pipe(gulp.dest(`dist/`));
});
gulp.task(`default`, gulpSequence(`clean`, `css`, `js`, `image`, `revCss`, `rev`)); //按順序執行任務
ok! 有問題,不懂的,錯誤,請大家積極留言!
相關文章
- gulp-imagemin版本9圖片壓縮
- 如何gulp壓縮,醜化程式碼
- 前端效能優化 --- 資源合併與壓縮前端優化
- 配置gulp進行es6開發,包括es6、壓縮圖片、編譯less、壓縮css、自動新增版本號,和熱更新的功能編譯CSS
- gulp壓縮檔案
- iOS拆分,合併靜態庫以壓縮打包空間iOS
- 淺談自動化構建之gulp
- Gulp壓縮報錯處理
- git合併多個commit & 壓縮合並GitMIT
- WPF:靜態、動態資源以及資源詞典
- CSP之壓縮編碼(動態規劃)動態規劃
- 靜態合批和動態合批
- 使用gulp實現前端自動化前端
- 靜態資源管理
- booster分析-App資源壓縮APP
- Web靜態資源快取及優化Web快取優化
- 將 Vue.js 專案部署至靜態網站託管,並開啟 Gzip 壓縮Vue.js網站
- 基於gulp的前端自動化方案前端
- 自動化漏洞挖掘:靜態程式分析入門
- 狀態壓縮
- webpack 靜態資源管理Web
- 靜態資源公共庫
- Web靜態資源加速Web
- 工程化——前端靜態資源快取策略前端快取
- 模組化開發靜態資源對映
- 效能優化 (十一) ProGuard 對程式碼和資源壓縮優化
- Linux下快速靜態編譯Qt以及Qt動態/靜態版本共存Linux編譯QT
- Hummingbird - WordPress快取、靜態資源合併、加速外掛快取
- 並查集系列之「路徑壓縮( path compression ) 」並查集路徑壓縮
- node.js gulp 自動化構建工具Node.js
- HikariPool原始碼(三)資源池動態伸縮原始碼
- 複習webpack4之靜態資源打包(上)Web
- 複習webpack4之靜態資源打包(下)Web
- [譯]未雨綢繆之:靜態資源處理
- SpringBoot之yaml語法及靜態資源訪問Spring BootYAML
- 自動化運維工具之Puppet常用資源(二)運維
- 自動化運維工具之Puppet常用資源(一)運維
- WordPress引用靜態資源方法