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

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