purify-css中文文档|purify-css js中文教程|解析

npm npmdoc 2年前 (2021-12-31) 641次浏览

purify-css中文文档|purify-css js中文教程|解析

安装命令:npm i purify-css

净化CSS

特拉维斯
新产品经理
大卫
在 https://gitter.im/purifycss/purifycss 加入聊天

一个接受内容 (HTML/JS/PHP/etc) 和 CSS 的函数,并只返回使用过的 CSS

PurifyCSS 不会修改原始 CSS 文件。
您可以写入新文件,例如缩小。


如果您的应用程序使用 CSS 框架,这尤其有用,因为许多选择器经常未使用。

潜在减少

  • 引导文件:~140k
  • 应用使用约 40% 的选择器。
  • 缩小:~117k
  • 纯化 + 缩小:~35k

用法

独立

安装

npm i -D purify-css
import purifycss from "purify-css"
const purifycss = require("purify-css")
 
let content = ""
let css = ""
let options = {
    output: "filepath/output.css"
}
purify(content, css, options)

构建时间

命令行使用

$ npm install -g purify-css
$ purifycss -h

purifycss <css> <content> [option]

Options:
  -m, --min        Minify CSS                         [boolean] [default: false]
  -o, --out        Filepath to write purified css to                    [string]
  -i, --info       Logs info on how much css was removed
                                                      [boolean] [default: false]
  -r, --rejected   Logs the CSS rules that were removed
                                                      [boolean] [default: false]
  -w, --whitelist  List of classes that should not be removed
                                                           [array] [default: []]
  -h, --help       Show help                                           [boolean]
  -v, --version    Show version number                                 [boolean]

怎么运行的

使用的选择器检测

静态分析您的代码以选择使用了哪些选择器。

但它会捕获所有案例吗?

让我们从简单的开始。

检测使用: button-active

  <!-- html -->
  <!-- class directly on element -->
  <div class="button-active">click</div>
  // javascript
  // Anytime your class name is together in your files, it will find it.
  $(button).addClass('button-active');

现在让我们疯狂吧。

检测使用: button-active

  // Can detect if class is split.
  var half = 'button-';
  $(button).addClass(half + 'active');
 
  // Can detect if class is joined.
  var dynamicClass = ['button', 'active'].join('-');
  $(button).addClass(dynamicClass);
 
  // Can detect various more ways, including all Javascript frameworks.
  // A React example.
  var classes = classNames({
    'button-active': this.state.buttonActive
  });
 
  return (
    <button className={classes}>Submit</button>;
  );

例子

源字符串示例
var content = '<button class="button-active"> Login </button>';
var css = '.button-active { color: green; }   .unused-class { display: block; }';
 
console.log(purify(content, css));

登出:

.button-active { color: green; }
使用glob文件模式 + 写入文件的示例
var content = ['**/src/js/*.js', '**/src/html/*.html'];
var css = ['**/src/css/*.css'];
 
var options = {
  // Will write purified CSS to this file.
  output: './dist/purified.css'
};
 
purify(content, css, options);
使用glob文件模式和源字符串 + 缩小 + 记录拒绝选择器的示例
var content = ['**/src/js/*.js', '**/src/html/*.html'];
var css = '.button-active { color: green; } .unused-class { display: block; }';
 
var options = {
  output: './dist/purified.css',
 
  // Will minify CSS code in addition to purify.
  minify: true,
 
  // Logs out removed selectors.
  rejected: true
};
 
purify(content, css, options);

登出:

.unused-class
回调示例
var content = ['**/src/js/*.js', '**/src/html/*.html'];
var css = ['**/src/css/*.css'];
 
purify(content, css, function (purifiedResult) {
  console.log(purifiedResult);
});
带有回调 + 选项的示例
var content = ['**/src/js/*.js', '**/src/html/*.html'];
var css = ['**/src/css/*.css'];
 
var options = {
  minify: true
};
 
purify(content, css, options, function (purifiedAndMinifiedResult) {
  console.log(purifiedAndMinifiedResult);
});

深入API

// Four possible arguments.
purify(content, css, options, callback);
content参数
类型:ArrayString

Array水珠文件模式的文件来使用的类通过搜索(HTML,JS,PHP,ERB,模板,任何使用CSS选择器)。

String 要查看使用过的类的内容。

css参数
类型:ArrayString

Array水珠文件模式的CSS文件要过滤。

String CSS 来净化。

(可选)options参数
类型: Object
选项对象的属性:
  • minify:设置true为缩小。默认值:false

  • output:将纯化的 CSS 写入的文件路径。如果 ,则返回原始字符串false默认值:false

  • info:记录有关删除了多少 CSS 的信息,如果true. 默认值:false

  • rejected:记录删除的 CSS 规则,如果true. 默认值:false

  • whitelist总是留在里面的选择器数组。例如。['button-active', '*modal*']这将留下任何包含modal在其中的选择器和匹配的选择器button-active(用 * 包裹字符串,留下包含它的所有选择器)

(可选)callback参数
类型: Function

将接收纯化的 CSS 作为参数的函数。

回调使用示例
purify(content, css, options, function(purifiedCSS){
  console.log(purifiedCSS, ' is the result of purify');
});
没有选项的回调示例
purify(content, css, function(purifiedCSS){
  console.log('callback without options and received', purifiedCSS);
});
CLI 用法示例
$ purifycss src/css/main.css src/css/bootstrap.css src/js/main.js --min --info --out src/dist/index.css

这将Concat的两个main.cssbootstrap.css以及通过查看使用了哪些CSS选择器内净化它main.js然后它将结果写入dist/index.css

--min标志minifies结果。

--info标志会将其打印到标准输出:

    ________________________________________________
    |
    |   PurifyCSS has reduced the file size by ~ 33.8%
    |
    ________________________________________________

CLI 当前不支持文件模式。

项目贡献人员列表:


极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:purify-css中文文档|purify-css js中文教程|解析
喜欢 (0)
.excerpt .focus {display:none}