简易详细介绍CSS中的URL专用工具

2021-03-05 19:41 jianzhan

有很多缘故使得你必须在CSS编码中系统软件性的取代URL:将其变换为数据信息URI、将其指向1个CDN、将其文档名更换为全自动转化成的文档名,这些。这个专用工具可以帮你从给定的CSS编码中将URL分析出来,并容许你将其更换为你挑选的随意值。更换后的CSS编码与源码彻底同样,除URL早已依据你的挑选开展了更换。

这个库包括众多专用工具,可以协助你实际操作和变更CSS URL。

CSS URL重新写过器(Rewriter)

CSS URL重新写过器应用1个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汉语翻译器是1个专用工具,可以对不一样CSS文档中的有关CSS URL开展汉语翻译。有时你将会要挪动1个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