npm install --save-dev jingoal-insert-tool
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>
在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>