gulp 構建前端專案（三） js,css檔名MD5,並修改html中引入的檔名。公共頁面的引入
阿新 • • 發佈：2018-12-26
gulp已經能打包和實時在瀏覽器中更新了，接下來就是 預防瀏覽器快取對程式碼的影響。
通過修改檔名包含MD5值，可以預防無效快取。 由於名稱修改就會有變化，所以加入了自動引入修改後的檔名。
1.通過 gulp-rev 外掛給檔名加MD5的字尾。
在處理css或者js檔案過程中，呼叫 gulp-rev 外掛。如下
gulp.task('scriptMinify', function() {
return gulp.src(sourcePath.js.src)
.pipe(uglify({
mangle:false,//型別：Boolean 預設：true 是否修改變數名
compress:false,//型別：Boolean 預設：true 是否完全壓縮
}))
.pipe(rev()) //生成MD5字串加到檔名後。不同於字尾 2.根據manifest.json生成的替換路徑，替換生成的html中資原始檔的路徑。外掛為 gulp-rev-cellector
首先生成css或者js的manifest.json檔案。
gulp.src(sourcePath.js.src)
.pipe(uglify({
mangle:false,//型別：Boolean 預設：true 是否修改變數名
compress:false,//型別：Boolean 預設：true 是否完全壓縮
}))
.pipe(rev()) //生產環境下
.pipe(gulp.dest(sourcePath.basePath + sourcePath.js.emit))
.pipe(rev.manifest('rev-js-manifest.json'))//生成一個rev-manifest.json
.pipe(gulp.dest('rev')) //生成manifest.json檔案，並儲存在rev資料夾下
//生成的檔案如下
{
"browerinfo.js": "browerinfo-1a7eeb0b30.js",
"chatManager.js": "chatManager-ec701be8bc.js",
"common.js": "common-7253b42ae8.js",
"logManager.js": "logManager-5f1968633e.js",
"login.js": "login-2dda7b2420.js",
"userManager.js": "userManager-fc1b35885a.js",
"util.js": "util-0f3a726e3a.js"
}
壓縮html程式碼中，替換rev檔案加下的util.js。注意，只是替換檔名。要保證生成的html和css，js的相對路徑是對的。
var revCollector = require('gulp-rev-cellector');
gulp.task('html', function() {
var options = {
removeComments: true,//清除HTML註釋
collapseWhitespace: true,//壓縮HTML
collapseBooleanAttributes: false,//省略布林屬性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: false,//刪除所有空格作屬性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css"
minifyJS: true,//壓縮頁面JS
minifyCSS: true//壓縮頁面CSS
};
return gulp.src(['rev/*.json,'views/*.html'])
.pipe(revCollector({replaceReved:true })) <script src="../js/common.js"></script> //html中的資原始檔就會被替換成下面的
<script src="../js/common-7253b42ae8.js"></script>3.公共頁面的引入。（html）使用外掛 gulp-file-include
.pipe(gulpFileInclude({
prefix: '@@'
})) //在html的處理程式碼中加入以上程式碼
//在html需要引入 程式碼塊的地方使用如下程式碼 @@include('headers.html')
/**
* author smallerCoder
* 2018-7-4
*/
var sourcePath = require("./path.config.js");
const gulp = require('gulp');
const clean = require('gulp-clean');
const rev = require('gulp-rev');
const revCollector = require('gulp-rev-collector');
const sequence = require('gulp-sequence');
const cache = require('gulp-cache');
const imagemin = require('gulp-imagemin');
const stylemin = require('gulp-clean-css');
const uglify = require('gulp-uglify');
const htmlmin = require('gulp-htmlmin');
const browserSync = require('browser-sync').create();
const gulpFileInclude = require('gulp-file-include');
const rename = require('gulp-rename');
/**
* 清空目標目錄
*/
gulp.task('clean', function() {
return gulp.src(sourcePath.basePath + "*")
.pipe(clean())
})
/**
* 打包js檔案
*/
gulp.task('scriptMinify', function() {
return gulp.src(sourcePath.js.src)
.pipe(uglify({
mangle:false,//型別：Boolean 預設：true 是否修改變數名
compress:false,//型別：Boolean 預設：true 是否完全壓縮
}))
.pipe(rev()) //生產環境下
.pipe(gulp.dest(sourcePath.basePath + sourcePath.js.emit))
.pipe(rev.manifest('rev-js-manifest.json'))//生成一個rev-manifest.json
.pipe(gulp.dest('rev'))
.pipe(browserSync.reload({stream:true}))
})
/**
* 打包css檔案
*/
gulp.task('styleMinify', function() {
return gulp.src(sourcePath.css.src)
.pipe(stylemin())
.pipe(rev())
.pipe(gulp.dest(sourcePath.basePath + sourcePath.css.emit))
.pipe(browserSync.reload({stream:true}))
.pipe(rev.manifest('rev-css-manifest.json'))//生成一個rev-manifest.json
.pipe(gulp.dest('rev'))
})
/**
* 壓縮img檔案 TODO
*/
gulp.task('minifyImg', function() {
return gulp.src(sourcePath.img.src)
.pipe(cache(imagemin({
optimizationLevel: 3, //型別：Number 預設：3 取值範圍：0-7（優化等級）
progressive: true, //型別：Boolean 預設：false 無失真壓縮jpg圖片
interlaced: true, //型別：Boolean 預設：false 隔行掃描gif進行渲染
})))
.pipe(gulp.dest(sourcePath.basePath + sourcePath.img.emit))
})
gulp.task('html', function() {
var options = {
removeComments: true,//清除HTML註釋
collapseWhitespace: true,//壓縮HTML
collapseBooleanAttributes: false,//省略布林屬性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: false,//刪除所有空格作屬性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css"
minifyJS: true,//壓縮頁面JS
minifyCSS: true//壓縮頁面CSS
};
return gulp.src('rev/*.json,'.concat(sourcePath.html.src).split(','))
// .pipe(htmlmin(options)) //取消壓縮html檔案
.pipe(gulpFileInclude({
prefix: '@@'
}))
.pipe(revCollector({replaceReved:true })) //檔案替換，打包時會出現找不到檔案的error
.pipe(gulp.dest(sourcePath.basePath + sourcePath.html.emit))
})
gulp.task('copy', function() {
return gulp.src(sourcePath.lib.src)
.pipe(gulp.dest(sourcePath.basePath + sourcePath.lib.emit))
})
gulp.task('default', function(cb) {sequence('clean', 'copy', 'scriptMinify', 'styleMinify', 'minifyImg', 'html')(cb) })
gulp.task('watch', function(cb) {
gulp.watch('js/*.*', ['scriptMinify']);
gulp.watch('css/*.*', ['styleMinify']);
gulp.watch('views/*.*', ['html']);
})
// 監聽scss和html檔案, 當檔案發生變化後做些什麼！
gulp.task('server', [],function () {
// 從這個專案的根目錄啟動伺服器
browserSync.init({
server: {
baseDir: "./dist",
}
});
gulp.watch("css/*.css", ['styleMinify']);
gulp.watch('js/*.js', ['scriptMinify']);
gulp.watch("views/*.html").on("change", browserSync.reload);
});