歡迎光臨
每天分享高質量文章

CSS URL 工具

有許多原因使得你需要在CSS程式碼中系統性的替代URL:將其轉換為資料URI、將其指向一個CDN、將其檔案名替換為自動生成的檔案名,等等。這個工具能夠幫你從給定的CSS程式碼中將URL解析出來,並允許你將其替換為你選擇的任意值。替換後的CSS程式碼與原始碼完全相同,除了URL已經根據你的選擇進行了替換。

這個庫包含諸多工具,能夠幫助你操作和更改CSS URL。

CSS URL重寫器(Rewriter)

CSS URL重寫器使用一個CSS分詞器來安全的找到所有的CSS URL,這使得所有的改動都是完全安全的,因為它不依賴於正則運算式從CSS中提取URL。

使用方法

var URLRewriter = require(“cssurl”).URLRewriter;

var rewriter = new URLRewriter(function(url) {

// automatically append a query string with a unique value to bust caches

return url + “?v=” + Date.now();

});

var result = rewriter.rewrite(cssCode);

當CSS URL重寫器遍歷CSS程式碼時,它會喚起傳入CSSURLRewriter建構式的函式,並傳給它找到的每個URL。url變數是指CSS程式碼中找到的除去了任何引號和前後空格的URL(不包含url())。之後,你可以檢查URL,隨心所欲地修改它,以及在你需要使用的地方傳回它的值。

限制

CSS URL重寫器只會替換被表示為URL標記的URL,也就是說,它必須是以url(foo.css)的形式而非”foo.css”的形式存在,儘管後者在部分CSS裡是允許的。

CSS URL重寫流(Rewrite Stream)

CSS URL重寫流使用流內部的URL重寫器,因此你可以很容易將程式碼取出或置入。

使用方法

var URLRewriteStream = require(“cssurl”).URLRewriteStream;

fs.createReadStream(“my.css”).pipe(new URLRewriteStream(function(url) {

// automatically append a query string with a unique value to bust caches

return url + “?v=” + Date.now();

})).pipe(fs.createWriteStream(“my-new.css”));

CSS URL翻譯器(Translator)

CSS URL翻譯器是一個工具,能夠對不同CSS檔案中的相關CSS URL進行翻譯。有時候你可能要移動一個CSS檔案,比如說從css/sprites/foo.css到css/sprites.css,當你做這件事時,CSS檔案中任何相關的URL都不再準確了。CSS URL翻譯器,與CSS URL重寫器結合使用,透過自動計算出新的路徑使得我們可以輕鬆地進行修改。翻譯器也足夠聰明,不會翻譯任何不相關的URL。

使用方法

var URLTranslator = require(“cssurl”).URLTranslator;

var translator = new URLTranslator();

var result = translator.translate(“../../img/foo.png”, “css/sprites/foo.css”, “css/sprites.css”);

console.log(result); // “../img/foo.png”

開發

要執行測試,請克隆以下倉庫,然後執行:

$ npm i

$ npm test

版權和許可證為BSD3


原文出處:github.com

譯文出處:伯樂線上 – Justin Wu

贊(0)

分享創造快樂