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.