1. 程式人生 > >修復BUG:gulp自動新增版本號修復對CSS中background:url()的匹配問題

修復BUG:gulp自動新增版本號修復對CSS中background:url()的匹配問題

前天說要找到一個完美的解決方案,今天發動了各路大神,總算是搞定了.

問題描述:

修改gulp-rev-append外掛實現自動修改檔案中靜態資源連結新增md5版本號。但是前天有一點點很遺憾,對CSS中background:url()的匹配還存在一點點不足,url()必須帶單引號或者雙引號才能被正確匹配的到,但是CSS的標準寫法中,通常不會帶單引號或者雙引號。

===============================================================================

解決方案:

開啟node_modules\gulp-rev-append\index.js
修改第9行:var FILE_DECL = /(?:href=|src=|url\()['|"]([^\s>"']+?)\?v=([^\s>"']+?)['|"]/gi;
改成:

var FILE_DECL = /(?:href=|src=|url\()(?:['|"]?)([^\s>']+?)\?v=(@@hash).+(?:['|"|>]?)/gi;

具體完整程式碼:

var fs = require('fs');
var path = require('path');
var crypto = require('crypto');
var Buffer = require('buffer').Buffer;
var gutil = require('gulp-util');
var PluginError = gutil.PluginError;
var map = require('event-stream').map;

// var FILE_DECL = /(?:href=|src=|url\()['|"]([^\s>"']+?)\?v=([^\s>"']+?)['|"]/gi;
var FILE_DECL = /(?:href=|src=|url\()(?:['|"]?)([^\s>']+?)\?v=(@@hash).+(?:['|"|>]?)/gi;

var revPlugin = function revPlugin() {

  return map(function(file, cb) {

    var contents;
    var lines;
    var i, length;
    var line;
    var groups;
    var dependencyPath;
    var data, hash;

    if(!file) {
      throw new PluginError('gulp-rev-append', 'Missing file option for gulp-rev-append.');
    }

    if(!file.contents) {
      throw new PluginError('gulp-rev-append', 'Missing file.contents required for modifying files using gulp-rev-append.');
    }

    contents = file.contents.toString();
    lines = contents.split('\n');
    length = lines.length;

    for(i = 0; i < length; i++) {
      line = lines[i];
      groups = FILE_DECL.exec(line);
      if(groups && groups.length > 1) {
        var normPath = path.normalize(groups[1]);
        if (normPath.indexOf(path.sep) === 0) {
          dependencyPath = path.join(file.base, normPath);
        }
        else {
          dependencyPath = path.resolve(path.dirname(file.path), normPath);
        }

        try {
          data = fs.readFileSync(dependencyPath);
          hash = crypto.createHash('md5');
          hash.update(data.toString(), 'utf8');
           
          line = line.replace(groups[2], hash.digest('hex'));
        }
        catch(e) {
          // fail silently.
        }
      }
      lines[i] = line;
      FILE_DECL.lastIndex = 0;
    }

    file.contents = new Buffer(lines.join('\n'));
    cb(null, file);

  });

};

module.exports = revPlugin;

相關推薦

修復BUGgulp自動新增版本修復CSSbackground:url()的匹配問題

前天說要找到一個完美的解決方案,今天發動了各路大神,總算是搞定了.問題描述: 修改gulp-rev-append外掛實現自動修改檔案中靜態資源連結新增md5版本號。但是前天有一點點很遺憾,對CSS中background:url()的匹配還存在一點點不足,url()必須帶單引

Gulp開發Gulp自動新增版本

"/css/style.css" => "/dist/css/style-1d87bebe.css" "/js/script1.js" => "/dist/script1-61e0be79.js" "cdn/image.gif" =>

gulp自動新增版本

1.安裝Gulp npm install --save-dev gulp 2.分別安裝gulp-rev、gulp-rev-collerctor npm install --save-dev gulp-

使用gulp為專案的檔案自動新增版本之實踐思路

需要用到的Gulp外掛:1、gulp-rev2、gulp-rev-format3、gulp-rev-replace要實現html中增加版本號的效果:<link rel="stylesheet" href="/Public/css/lib/base.css?v=14780

關於如何在make一個Linux下的C/C++工程時,自動新增版本、編譯日期等資訊

本篇的目的:在makefile裡,將系統當前的時間傳遞進待編譯的C/C++工程中,用以指示編譯執行的時間,以及版本資訊等。 不多說了,先來看效果: 當前時間:2017.01.20  0:29 編譯完成後執行效果: [email protected]:~/Desk

CSS和js自動新增版本

昨天去winy那裡諮詢他網站裡css和js後面版本號的問題,我之所以想加這個功能是因為每次在A電腦修改的樣式或者js到了B電腦上就看不到效果,還得ctrl+f5才能看到,我承認我快取了網站的樣式和js,雖然可以讓使用者把一些常用的很少改動的樣式和js快取到本地,蛋似當我修

gulp自動化新增版本並修改為引數格式

問題: 當我們修改js和css檔案時往往需要清除瀏覽器的快取,否則有些效果就看不到更新過後的。 通過對js,css檔案內容進行hash運算,生成一個檔案的唯一hash字串(如果檔案修改則hash號會

前端開發靜態檔案自動新增版本解決方案

前端開發中不可避免的會遇到快取問題,那麼如何使給這些靜態自動給新增版本號使修改後的內容立即生效呢?下面講下我找到的兩種方法: 一、通過獲取檔案最後修改時間 原理:通過伺服器端語言讀取檔案最後一次修改修改時間,然後將獲取的時間作為版本號。 以php為例: <?p

gulp自動新增靜態檔案版本方案

系統發版後客戶端快取更新方案 一。解決思路: 1. 利用gulp根據靜態檔案(JS,CSS,圖片)內容生成對應的HASH值作為它的版本號,檔案內容變化則版本號跟著變(需處理生成版本號的位置,不同路徑下同名檔案HASH值覆蓋問題,JSP檔案編碼問題等,已在下面

一次專案Gulp的使用(壓縮、新增版本,自動化打包)

一次專案中Gulp的使用 Gulp的準備工作 安裝Gulp 專案中初始化gulp 編寫gulp指令碼 打包結果 拓展 Gulp的準備工作 前段時間接手一個war專案,springmvc 前端

使用gulp引用的檔案新增版本

cnpm install —-save-dev gulp cnpm install --save-dev gulp del cnpm install gulp-uglify gulp-uglify gulp-minify-css gulp-rev gulp-re

Linux 核心編譯 LOCALVERSION 配置(分析核心版本自動新增的"+")

因本人技術水平和知識面有限, 內容如有紕漏或者需要修正的地方, 歡迎大家指正, 也歡迎大家提供一些其他好的除錯工具以供收錄, 鄙人在此謝謝啦 1 問題發現 編譯主線 kernel 版本的時候發現, 的核心版本編譯成功後生成的版本號

vs .net專案自動更新版本

使用SVN的一個程式, 一般都會裝,無需再次下載和安裝了. 只需要在專案屬性-> 生成事件-> 後期生成事件命令 中加入 subwcrev.exe $(ProjectDir)Properties\ $(ProjectDir)Properties\AssemblyInfo.

vue 用webpack打包檔名新增版本

因瀏覽器快取原因導致vue 打包的檔案 導致偶爾會出現不能即使更新最新程式碼。因此在打包的檔名中新增一個版本號以便瀏覽器能區分。 解決方法:找到webpack .prod.conf.js    1.定義版本變數: const  Version

linux 程式、動態庫、靜態庫內部新增版本和編譯時間

給程式和庫新增版本號和庫,有利於維護和升級。 當然你可以在檔名上體現,比如有個程式叫 yun,檔名寫為 yun_1.0.2,但這個需要每次手動維護,而且不能100%確保當前程式就是那個版本。所以,把版本號體現在程式內部,是一個不錯的選擇。 --------------------------

Android基礎API對應的版本

Android版本號名稱 API Android 英文名稱 中文名稱 1 1.0 發條機器人 2 1.1 – – 3 1.

Gradle自動設定版本及修改apk字尾

直接上配置檔案 import java.text.SimpleDateFormat apply plugin: 'com.android.application' def verName = "1.0.0" def buildTime() {

VS之版本-獲取編譯時間-用於自動生成版本

我們寫軟體的,總希望程式有變動時可以自動生成版本號,不用手動去改,這樣多方便啊。VS編譯器就可實現這個功能。如下所示: /*  獲取程式編譯時間, 用於自動生成版本號很好   __DATE__ "Mar 25 2013"            "Mar  

Maven生成WAR包時自動更新版本version

Maven外掛之buildnumber-maven-plugin 某些情況下(這種情況一般很少見),使用maven構建專案時,需要一個不重複的序列號,比如說,打包時,包名稱以當前構建時間結尾,或者每次生成的jar包中包含唯一的序列號,等等; 這個時候,就用到了buil

VC之版本-編譯自動增加版本

[VC外掛]編譯後的版本自動更新 一個偶然的機會,在MSDN看到一種用指令碼自動增加版本號的方法: How To Increment Version Information After Each Build in Visual C++ http://support.microsoft.com/kb/23787