緩存
緩存一句話概括 :用戶瀏覽過的網(wǎng)站會被存儲到瀏覽器的緩存中,下次打開時候不消耗流量 , 讓用戶更快速的訪問網(wǎng)站資源
對開發(fā)者萬惡 , 對用戶友好
由于瀏覽器會緩存相應(yīng)的html和圖片 , 這樣就會造成當(dāng)前瀏覽器監(jiān)聽到當(dāng)前文件名稱不變的情況就會使用緩存相應(yīng)的資源 , 開發(fā)者更新的部分不會被重復(fù)加載,這就是相當(dāng)于用戶那邊看到的和開發(fā)者看到的不一樣
gulp-rev 是如何解決緩存的
一個html有一個 index.css , index.js , gulp-rev后實(shí)現(xiàn)index-a75bk34.css類似這樣的一個隨機(jī)字符串的文本 ,并被加載到頁面中 ,瀏覽器監(jiān)聽到文件名變化則下載新的文件,這樣就能保證用戶那邊和開發(fā)這邊的程序是保持一致性.
gulp-rev 具體實(shí)現(xiàn)
- 首先你得安裝一個nodejs
- 通過nodejs安裝如下依賴
//gulp
npm install gulp
//gulp-rev 更改名稱
npm install del
npm install gulp-rev
npm install gulp-rename
npm install gulp-compile-handlebars
npm install fs
//js 代碼合并及壓縮 , 這塊如果不需要可以不安裝
//壓縮錯誤提示
npm install gulp-sourcemaps
//合并
npm install gulp-uglify
npm install gulp-concat
js壓縮代碼及生成
'use strict';
var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var del = require('del');
var rev = require('gulp-rev');
function createErrorHandler(name) {
return function(err) {
console.error('Error frome: ');
for (var key in err) {
if (err.hasOwnProperty(key)) {
console.error(key, err[key], '\n');
}
}
};
}
gulp.task('js_release', function(cb) {
//src 第一個參數(shù)為文檔路徑,支持正則表達(dá)式
return gulp.src(['src/config/**/*.js','src/app/**/*.js'], {base: 'src'})
//加入管道,添加sourcemap
.pipe(sourcemaps.init())
.on('error', createErrorHandler('gulp.src'))
//合并src中的所有文件
.pipe(uglify())
.on('error', createErrorHandler('uglify'))
.pipe(concat('assets/js/app.js'))
//將合并的app.js 更改為新的文件名
.pipe(rev())
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('dist'))
//生成文件名的對比文件
.pipe(rev.manifest())
.pipe(gulp.dest('dist/assets/manifest/js'))
.on('error', createErrorHandler('gulp.dest'));
});
compile manifest()生成新的index.html文件
'use strict';
var gulp = require('gulp');
var rev = require('gulp-rev');
var rename = require('gulp-rename');
var handlebars = require('gulp-compile-handlebars');
var fs = require('fs');
var del = require('del');
var handlebarOpts = {
helpers: {
assetPath: function (path, context) {
return [context.data.root[path]];
}
}
};
gulp.task('compile',['js_release','js_rely_release','sass_release'], function (cb) {
// 讀取json文件
var manifest = JSON.parse(fs.readFileSync('dist/assets/manifest/js/rev-manifest.json', 'utf8'));
//通過index.hbs生成js文件
return gulp.src('src/index.hbs')
.pipe(handlebars(manifest, handlebarOpts))
.pipe(rename('index.html'))
.pipe(gulp.dest('dist'));
});
index.hbs寫法
<!DOCTYPE html>
<html ng-app="uuke" ng-strict-di>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title ng-bind="title"></title>
</head>
<body>
<script src="{{ assetPath "assets/js/app.js" }}"></script>
</body>
</html>
通過index.hbs會從src中讀取index.hbs文件生成到dist的index.html最終效果如下
<!DOCTYPE html>
<html ng-app="uuke" ng-strict-di>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title ng-bind="title"></title>
</head>
<body>
<script src="assets/js/app-85a26824c9.js"></script>
</body>
</html>
ok 就這么多了 ,有什么問題可以留言給我
