CSS中的URL工具怎么用

小編給大家分享一下CSS中的URL工具怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

有許多原因使得你需要在CSS代碼中系統性的替代URL：將其轉換為數據URI、將其指向一個CDN、將其文件名替換為自動生成的文件名，等等。這個工具能夠幫你從給定的CSS代碼中將URL解析出來，并允許你將其替換為你選擇的任意值。替換后的CSS代碼與源代碼完全相同，除了URL已經根據你的選擇進行了替換。

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

CSS URL重寫器（Rewriter）

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

使用方法
 

CSS Code復制內容到剪貼板

1. var URLRewriter = require("cssurl").URLRewriter;   

2.     

3. var rewriter = new URLRewriter(function(url) {   

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

5.     return url + "?v=" + Date.now();   

6. });   

7.     

8. 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重寫器，因此你可以很容易將代碼取出或置入。

使用方法
 

CSS Code復制內容到剪貼板

1. var URLRewriteStream = require("cssurl").URLRewriteStream;   

2.     

3. fs.createReadStream("my.css").pipe(new URLRewriteStream(function(url) {   

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

5.     return url + "?v=" + Date.now();   

6. })).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。

使用方法
 

CSS Code復制內容到剪貼板

1. var URLTranslator = require("cssurl").URLTranslator;   

2.     

3. var translator = new URLTranslator();   

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

5.     

6. console.log(result);    // "../img/foo.png"  

開發

要運行測試，請克隆以下倉庫，然后執行：
 
 

復制代碼

代碼如下:

$ npm i
$ npm test

版權和許可證為BSD3

以上是“CSS中的URL工具怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！