净化CSS

一个接受内容 (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参数

类型：Array或String

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

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

该css参数

类型：Array或String

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.css和bootstrap.css以及通过查看使用了哪些CSS选择器内净化它main.js。然后它将结果写入dist/index.css

该--min标志minifies结果。

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

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

CLI 当前不支持文件模式。