gulp自動化壓縮合併 加版本號解決方案

雖然網上有很多的 gulp 構建文章，但是很多都已經隨著 gulp 外掛程式的更新無法執行了。因此，我寫了這個比較簡單的構建方案。

這個方案主要是為了實現js/css的壓縮合併、自動新增版本號和壓縮html。

主要通過上面外掛程式實現功能，其他外掛程式配合使用。

// gulpfile.js

var gulp = require('gulp'),
htmlmini = require('gulp-html-minify'),
useref = require('gulp-useref'),
uglify = require('gulp-uglify'),
csso = require('gulp-csso'),
filter = require('gulp-filter'),
revall = require('gulp-rev-all'),
del = require('del');
gulp.task('default',['del'], function
() ),
cssfilter = filter('**/*.css',),
htmlfilter = filter(['**/*.html'],);
gulp.src('/*.html')
.pipe(useref()) // 解析html中的構建塊
.pipe(jsfilter) // 過濾所有js
.pipe(uglify()) // 壓縮js
.pipe(jsfilter.restore)
.pipe(cssfilter) // 過濾所有css
.pipe(csso()) // 壓縮優化css
.pipe(cssfilter.restore)
.pipe(revall.revision())
.pipe(htmlfilter) // 過濾所有html
.pipe(htmlmini()) // 壓縮html
.pipe(htmlfilter.restore)
.pipe(gulp.dest('/dist'))
})gulp.task('del',function
() )

lang="en">
charset="utf-8">
gulp自動化構建解決方案title>
// 定義了構建後引用的css路徑
rel="stylesheet"
href="static/css/common.css"/>
rel="stylesheet"
href="static/css/index.css"/>
head>
......
// 定義了構建後引用的js路徑
src="static/js/jquery.js">
script>
src="static/js/common.js">
script>
src="static/js/index.js">
script>
body>
html>

|-dist

| |-static
| |-css
| |-index.96cf44da.css
| |-js
| |-index.42ce3282.js
| |-index.html

// dist/index.html

lang="en">
charset="utf-8">
gulp自動化構建解決方案title>
rel="stylesheet"
href="static/css/index.96cf44da.css"/>
head>
......
src="static/js/index.42ce3282.js">
script>
body>
html>

gulp之自動化靜態資源壓縮合併加版本號

這個方案主要是為了實現js css image的壓縮合併 自動新增版本號 自動加瀏覽器字首和壓縮html。先把下面這裡外掛程式 npm i 外掛程式名 d安裝到專案環境內 目錄結構 root dist 此目錄為下面生成的 css js images rev index.html node modul...

gulp之自動化靜態資源壓縮合併加版本號

這個方案主要是為了實現js css image的壓縮合併 自動新增版本號 自動加瀏覽器字首和壓縮html。先把下面這裡外掛程式 npm i 外掛程式名 d安裝到專案環境內 目錄結構 root dist 此目錄為下面生成的 css js images rev index.html node modul...

gulp實現開發生產版本，自動新增版本號為引數格式

以下為舊版本，會存在bug，以github最新更新為準 gulpfile.js 引入gulp及各種元件 use strict var gulp require gulp uglify require gulp uglify 壓縮js minifycss require gulp clean css ...