PurifyCSS 项目教程

PurifyCSS 项目教程

purifycssRemove unused CSS. Also works with single-page apps.项目地址:https://gitcode.com/gh_mirrors/pu/purifycss

1. 项目的目录结构及介绍

PurifyCSS 项目的目录结构相对简单，主要包含以下几个部分：

purifycss/
├── bin/
│   └── purifycss
├── dist/
│   └── purifycss.js
├── lib/
│   ├── purifycss.js
│   └── utils.js
├── test/
│   ├── fixtures/
│   ├── index.js
│   └── test.js
├── .gitignore
├── .npmignore
├── .travis.yml
├── LICENSE
├── README.md
├── package.json
└── webpack.config.js

• bin/: 包含可执行文件 purifycss，用于命令行操作。
• dist/: 包含编译后的 purifycss.js 文件，用于发布到 npm。
• lib/: 包含核心的 purifycss.js 和辅助工具 utils.js。
• test/: 包含测试文件和测试用例。
• .gitignore: 指定 Git 忽略的文件和目录。
• .npmignore: 指定 npm 发布时忽略的文件和目录。
• .travis.yml: Travis CI 配置文件。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• package.json: 项目依赖和脚本配置。
• webpack.config.js: Webpack 配置文件。

2. 项目的启动文件介绍

PurifyCSS 的启动文件位于 bin/ 目录下，名为 purifycss。这个文件是一个可执行脚本，用于在命令行中运行 PurifyCSS。

#!/usr/bin/env node

'use strict';

var path = require('path');
var fs = require('fs');
var purify = require('../dist/purifycss.js');
var glob = require('glob');

var args = process.argv.slice(2);
var options = {};

// 解析命令行参数
args.forEach(function(arg) {
  if (arg.indexOf('--') === 0) {
    var parts = arg.split('=');
    var key = parts[0].replace('--', '');
    var value = parts[1];
    options[key] = value;
  }
});

// 处理输入文件
var files = args.filter(function(arg) {
  return arg.indexOf('--') !== 0;
});

purify(files, options, function(output) {
  console.log(output);
});

这个脚本主要负责解析命令行参数，调用 purifycss 核心功能，并输出结果。

3. 项目的配置文件介绍

PurifyCSS 的配置文件主要是 package.json 和 webpack.config.js。

package.json

package.json 文件包含了项目的元数据和依赖信息，以及一些脚本命令。

{
  "name": "purifycss",
  "version": "1.2.6",
  "description": "Remove unused CSS",
  "main": "dist/purifycss.js",
  "bin": {
    "purifycss": "bin/purifycss"
  },
  "scripts": {
    "test": "mocha test/index.js",
    "build": "webpack",
    "prepublish": "npm run build"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/purifycss/purifycss.git"
  },
  "keywords": [
    "optimize",
    "css"
  ],
  "author": "Kenny Tran, Matthew Rourke, Phoebe Li",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/purifycss/purifycss/issues"
  },
  "homepage": "https://github.com/purifycss/purifycss#readme",
  "dependencies": {
    "glob": "^7.1.2",
    "commander": "^2.9.0"
  },
  "devDependencies": {
    "chai": "^4.1.2",
    "mocha": "^5.0.

purifycssRemove unused CSS. Also works with single-page apps.项目地址:https://gitcode.com/gh_mirrors/pu/purifycss