亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

簡單介紹CSS中的URL工具

  發(fā)布時(shí)間：2015-05-19 16:50:46   作者：佚名   我要評(píng)論
這篇文章主要介紹了簡單介紹CSS中的URL工具,包括URL重寫器和URL翻譯器等,需要的朋友可以參考下

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

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

CSS URL重寫器（Rewriter）

CSS URL重寫器使用一個(gè)CSS分詞器來安全的找到所有的CSS URL，這使得所有的改動(dòng)都是完全安全的，因?yàn)樗灰蕾囉谡齽t表達(dá)式從CSS中提取URL。

使用方法
 

CSS Code復(fù)制內(nèi)容到剪貼板
  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);   

當(dāng)CSS URL重寫器遍歷CSS代碼時(shí)，它會(huì)調(diào)用傳入CSSURLRewriter構(gòu)造器的函數(shù)，并傳給它找到的每個(gè)URL。url變量是指CSS代碼中找到的除去了任何引號(hào)和前后空格的URL（不包含url()）。之后，你可以檢查URL，隨心所欲地修改它，以及在你需要使用的地方返回它的值。

限制

CSS URL重寫器只會(huì)替換被表示為URL標(biāo)記的URL，也就是說，它必須是以u(píng)rl(foo.css)的形式而非”foo.css”的形式存在，盡管后者在部分CSS里是允許的。

CSS URL重寫流（Rewrite Stream）

CSS URL重寫流使用流內(nèi)部的URL重寫器，因此你可以很容易將代碼取出或置入。

使用方法
 

CSS Code復(fù)制內(nèi)容到剪貼板
  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翻譯器是一個(gè)工具，能夠?qū)Σ煌珻SS文件中的相關(guān)CSS URL進(jìn)行翻譯。有時(shí)候你可能要移動(dòng)一個(gè)CSS文件，比如說從css/sprites/foo.css到css/sprites.css，當(dāng)你做這件事時(shí)，CSS文件中任何相關(guān)的URL都不再準(zhǔn)確了。CSS URL翻譯器，與CSS URL重寫器結(jié)合使用，通過自動(dòng)計(jì)算出新的路徑使得我們可以輕松地進(jìn)行修改。翻譯器也足夠聰明，不會(huì)翻譯任何不相關(guān)的URL。

使用方法
 

CSS Code復(fù)制內(nèi)容到剪貼板
  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"  

開發(fā)

要運(yùn)行測(cè)試，請(qǐng)克隆以下倉庫，然后執(zhí)行：
 

復(fù)制代碼
代碼如下:
$ npm i
$ npm test

版權(quán)和許可證為BSD3

相關(guān)文章

最新評(píng)論