"build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js"
node build/bin/iconInit.js
// build/bin/iconInit.js
'use strict';
var postcss = require('postcss');
var fs = require('fs');
var path = require('path');
var fontFile = fs.readFileSync(path.resolve(__dirname, '../../packages/theme-chalk/src/icon.scss'), 'utf8'); // 異步讀取文件
var nodes = postcss.parse(fontFile).nodes;
var classList = [];
nodes.forEach((node) => {
var selector = node.selector || ''; // 選擇器
var reg = new RegExp(/\.el-icon-([^:]+):before/);
var arr = selector.match(reg);
if (arr && arr[1]) {
classList.push(arr[1]);
}
});
classList.reverse(); // => ["platform-eleme","eleme","delete-solid","delete","s-tools","setting", ...]
fs.writeFile(path.resolve(__dirname, '../../examples/icon.json'), JSON.stringify(classList), () => {});
以上方法通過解析 icon.scss 最終導出 icon.json 文件，該文件保存了各種圖標。
一、看看postcss.parse()方法是啥
- 先搭建環境
$ npm init -y && npm i -D webpack webpack-cli postcss && touch index.scss index.js
- index.scss 文件內容：
div {
background: red;
.a {
color: green;
}
}
.wrap .b {
font-size: 19px;
}
- index.js 文件內容：
let postcss = require('postcss');
let fs = require('fs');
let path = require('path');
let fileCont = fs.readFileSync(path.resolve(__dirname, './index.scss'), 'utf-8');
let parseCss = postcss.parse(fileCont);
let nodes = parseCss.nodes;
console.log('-----------------------------------------------------');
console.log('文件內容：');
console.log(fileCont);
console.log('-----------------------------------------------------');
console.log('postcss 解析 css：');
console.log(parseCss);
console.log('-----------------------------------------------------');
console.log('postcss 解析 css 返回對象的 nodes 屬性：');
console.log(nodes);
console.log('-----------------------------------------------------');
- 執行
node index.js
輸出：
-----------------------------------------------------
文件內容：
div {
background: red;
.a {
color: green;
}
}
.wrap .b {
font-size: 19px;
}
-----------------------------------------------------
postcss 解析 css：
Root {
raws: { semicolon: false, after: '' },
type: 'root',
nodes:
[ Rule {
raws: [Object],
type: 'rule',
nodes: [Array],
parent: [Circular],
source: [Object],
selector: 'div' },
Rule {
raws: [Object],
type: 'rule',
nodes: [Array],
parent: [Circular],
source: [Object],
selector: '.wrap .b' } ],
source:
{ input:
Input {
css: 'div {\n background: red;\n .a {\n color: green;\n }\n}\n.wrap .b {\n font-size: 19px;\n}',
hasBOM: false,
id: '<input css 1>' },
start: { line: 1, column: 1 } } }
-----------------------------------------------------
postcss 解析 css 返回對象的 nodes 屬性：
[ Rule {
raws: { before: '', between: ' ', semicolon: false, after: '\n' },
type: 'rule',
nodes: [ [Object], [Object] ],
parent:
Root {
raws: [Object],
type: 'root',
nodes: [Circular],
source: [Object] },
source: { start: [Object], input: [Object], end: [Object] },
selector: 'div' },
Rule {
raws: { before: '\n', between: ' ', semicolon: true, after: '\n' },
type: 'rule',
nodes: [ [Object] ],
parent:
Root {
raws: [Object],
type: 'root',
nodes: [Circular],
source: [Object] },
source: { start: [Object], input: [Object], end: [Object] },
selector: '.wrap .b' } ]
-----------------------------------------------------
