jingoal-insert-tool 使用方法
安装
npm install --save-dev jingoal-insert-tool
使用
1. 单页面应用
eg:
a.css
body {
......
}
b.html
<!DOCTYPE html>
<html>
<head>
<title>a.html</title>
</head>
<body>
.....
</body>
</html>
package.json 中scripts配置:
"build-colombo": "Insert insert --entry ./a.css --out ./b.html --position body"
注意:
--entry 与--out 都是与package.json的相对路径
执行npm run build-columbu 会将a.css中css 插入到 b.html中
<!DOCTYPE html>
<html>
<head>
<title>a.html</title>
</head>
<body>
.....
<style type="text/css">
body {......}
</style>
</body>
</html>
2. 多页面应用
在package.json 同级目录新建一个配置文件
eg：
build-columbu.json
{
"entry": "../static/dest/css/calendar-columbu.css",
"out": ["../web/index.html", "../web/error.html"],
"position": "body"
}
entry: 需要插入的css文件
out： 需要引入样式文件的html文件
position： 插入位置head | body 默认body
package.json 中scripts配置:
"build-colombo": "Insert --config ./build-colombo.json"
注意:
entry 与 out 都是与package.json的相对路径
../static/dest/css/calendar-columbu.css
.columbu {
...
}
../web/index.html
<!DOCTYPE html>
<html>
<head>
<title>index.html</title>
</head>
<body>
.....
</body>
</html>
../web/error.html
<!DOCTYPE html>
<html>
<head>
<title>error.html</title>
</head>
<body>
.....
</body>
</html>
执行npm run build-columbu 会将calendar-columbu.css中css 插入到index.html 与 error.html中
../web/index.html
<!DOCTYPE html>
<html>
<head>
<title>index.html</title>
</head>
<body>
.....
<style type="text/css">
.colombo {...}
</style>
</body>
</html>
../web/error.html
<!DOCTYPE html>
<html>
<head>
<title>error.html</title>
</head>
<body>
.....
<style type="text/css">
.colombo {...}
</style>
</body>
</html>