gulp-rev-all的Options中的prefix失效的緣由

時間 2019-11-09

標籤 gulp rev options prefix 失效緣由欄目 JavaScript 简体版

原文原文鏈接

因工做崗位調整，要回去開發活動頁了。活動頁我仍是喜歡用gulp, 因此從新倒騰工做流。javascript

而後遇到如題的問題。直接看解決辦法

gulpfile.jscss

var gulp = require('gulp'), //gulp插件
    revAll = require('gulp-rev-all'), //修改文件名稱
    revdel = require('gulp-rev-delete-original'); //刪除rev的源文件
    ...
var basePath = './projects/h5_template';
var publicPath = 'https://mat1.gtimg.com/zj/lyen/2019/test/';
var dist = basePath + '/dist/**'
    ...
    // 增長hash
gulp.task('rev', function () {
  return gulp.src(dist)
        .pipe(revAll.revision({
          dontGlobal: [/share\.(je?pg|png)/],   // 不要作任何修改
          dontRenameFile: [ /\.html$/], // 不要加hash重命名，可是能夠修改內部引用地址
          prefix: publicPath
        }))
        .pipe(revdel())
        .pipe(gulp.dest(basePath + '/dist'))
})
複製代碼

開發代碼：(只看其中一個文件哈)html

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <link rel="stylesheet" href="../css/style.css" charset="utf-8">
  </head>
  <body>
    測試
    <img src="../imgs/zyc.png">
    <script src="../js/index.js"></script>
  </body>
</html>
複製代碼

打包結果：(很遺憾prefix沒有其效果)java

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <link rel="stylesheet" href="../css/style.08173c58.css" charset="utf-8">
  </head>
  <body>
    測試
    <img src="../imgs/zyc.dcc8a3d6.png">
    <script src="../js/index.d6f4c35d.js"></script>
  </body>
</html>
複製代碼

爲何會失效

遇到問題就應該冷靜，查看源代碼。node

node_modules/gulp-rev-all/revisioner.jsgulp

...
Revisioner.prototype.updateReferences = function(file) {
    ...
    for (var pathReference in file.revReferencePaths) {
        ...
        if (this.options.transformPath) {
        // Transform path using client supplied transformPath callback,
        pathReferenceReplace = this.options.transformPath.call(
          this,
          pathReferenceReplace,
          reference.path,
          reference.file,
          file
        );
      } else if (this.options.prefix && pathReferenceReplace[0] === "/") {   //問題出在這裏，只有引用路徑是以'/'開頭，纔會進入這個if
        // Append with user supplied prefix
        pathReferenceReplace = this.Tool.join_path_url(
          this.options.prefix,
          pathReferenceReplace
        );
      }
        ...
    }
    ...
}
...
複製代碼

源碼告訴咱們，只有是以'/'開頭的引用路徑，纔會拼接prefix。測試

那就這樣解決

使用 '/' 開頭的絕對路徑ui

開發代碼：this

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <link rel="stylesheet" href="/css/style.css" charset="utf-8">
  </head>
  <body>
    測試
    <img src="/imgs/zyc.png">
    <script src="/js/index.js"></script>
  </body>
</html>
複製代碼

打包結果：url

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <link rel="stylesheet" href="https://mat1.gtimg.com/zj/lyen/2019/test/css/style.08173c58.css" charset="utf-8">
  </head>
  <body>
    測試
    <img src="https://mat1.gtimg.com/zj/lyen/2019/test/imgs/zyc.dcc8a3d6.png">
    <script src="https://mat1.gtimg.com/zj/lyen/2019/test/js/index.d6f4c35d.js"></script>
  </body>
</html>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。