国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
web前端開發(fā)之版本控制(緩存處理)
1.生成一個(gè)新的dist目錄,里面包含了要發(fā)布的html,js,css等文件 。
2.在原來(lái)的HTML文件上進(jìn)行js ,css版本的替換,不需要生成新的目錄文件。

通過(guò)兩種方法的實(shí)踐過(guò)程對(duì)比,決定使用第二種辦法,所以這里介紹一下第二種方式的實(shí)現(xiàn)過(guò)程:

一.

1. 修改js和css文件
2. 通過(guò)對(duì)js,css文件內(nèi)容進(jìn)行hash運(yùn)算,生成一個(gè)文件的唯一hash字符串(如果文件修改則hash號(hào)會(huì)發(fā)生變化)
3. 替換原h(huán)tml中的js,css文件名,生成一個(gè)帶版本號(hào)的文件名
原結(jié)構(gòu)下html文件代碼:<link rel="stylesheet" href="../css/style.css"><script src="../js/index.js"></script>
要達(dá)到的效果:在原結(jié)構(gòu)下html文件代碼
<link rel="stylesheet" href="../css/style.css?v=0d83247610"><script src="../js/index.js?v=61c1ef9f34"></script>

二.

1.作為項(xiàng)目的開發(fā)依賴(devDependencies)安裝gulp和gulp插件:
npm install --save-dev gulpnpm install --save-dev gulp-revnpm install --save-dev gulp-rev-collectornpm install --save-dev run-sequence
2.編寫gulpfile.js
//引入gulp和gulp插件  var gulp = require('gulp'),    runSequence = require('run-sequence'),     rev = require('gulp-rev'),      revCollector = require('gulp-rev-collector');//定義css、js文件路徑,是本地css,js文件的路徑,可自行配置  var cssUrl = 'css/*.css',     jsUrl = 'js/*.js';//CSS生成文件hash編碼并生成 rev-manifest.json文件名對(duì)照映射  gulp.task('revCss', function(){     return gulp.src(cssUrl)         .pipe(rev())         .pipe(rev.manifest())         .pipe(gulp.dest('rev/css')); });//js生成文件hash編碼并生成 rev-manifest.json文件名對(duì)照映射  gulp.task('revJs', function(){      return gulp.src(jsUrl)         .pipe(rev())         .pipe(rev.manifest())         .pipe(gulp.dest('rev/js')); }); //Html更換css、js文件版本   gulp.task('revHtml', function () {       return gulp.src(['rev/**/*.json', 'WEB-INF/views/*.html'])  /*WEB-INF/views是本地html文件的路徑,可自行配置*/          .pipe(revCollector())          .pipe(gulp.dest('WEB-INF/views'));  /*Html更換css、js文件版本,WEB-INF/views也是和本地html文件的路徑一致*/ });//開發(fā)構(gòu)建  gulp.task('dev', function (done) {     condition = false;     runSequence(         ['revCss'],         ['revJs'],          ['revHtml'],          done);});  gulp.task('default', ['dev']);
三.更改gulp-rev和gulp-rev-collector(重要)
  1.打開node_modules\gulp-rev\index.js    第144行 manifest[originalFile] = revisionedFile;    更新為: manifest[originalFile] = originalFile + '?v=' + file.revHash;  2.打開nodemodules\gulp-rev\nodemodules\rev-path\index.js    10行 return filename + '-' + hash + ext;    更新為: return filename + ext;  3.打開node_modules\gulp-rev-collector\index.js    31行if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !== path.basename(key) ) {    更新為: if ( !_.isString(json[key]) || path.basename(json[key]).split('?')[0] !== path.basename(key) ) {
四.執(zhí)行g(shù)ulp命令,得到的結(jié)果如下
 <link rel="stylesheet" href="../css/style.css?v=0d83247610"> <script src="../js/index.js?v=61c1ef9f34"></script>
五.更改gulp-rev和gulp-rev-collector的原理
 當(dāng)你完成第二步gulpfile.js的編寫,然后執(zhí)行g(shù)ulp后,你會(huì)發(fā)現(xiàn)效果如下: //rev目錄下生成了manifest.json對(duì)應(yīng)文件   { "style.css": "style-0d83247610.css"}    <link rel="stylesheet" href="../css/style-0d83247610.css">    <script src="../js/index-61c1ef9f34.js"></script>

這明顯沒(méi)有達(dá)到我們想要的效果,所以要按照第三步的要求更改代碼!

最后附上一個(gè)gulp自動(dòng)添加版本號(hào)的鏈接,里面寫的更加詳細(xì)http://www.cnblogs.com/givebest/p/4707432.html

本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊舉報(bào)。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
Gulp解決發(fā)布線上文件(CSS和JS)緩存問(wèn)題
常用gulp插件介紹(一)
gulp使用小結(jié)(一)
gulp應(yīng)用于ionic概述
Gulp自動(dòng)化構(gòu)建案例---文件壓縮
Browsersync中文網(wǎng)
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長(zhǎng)圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服