gulp如何把独立less文件编译成css后嵌入到html页面，变成嵌入式样式表？
方案1：通过 gulp-replace 替换 link
（1）首先 html 页面中应该有对应 css 文件的 link 标签
（2）通过 gulp 把 link 标签替换成 style 标签的，并添加对应的 css 内容
方案2：直接使用 gulp-inline-source
gulpfile.js
let gulp = require('gulp');
let inlinesource = require('gulp-inline-source');
gulp.task('default', function () {
return gulp.src("src/*.html") //html文件位置
.pipe(inlinesource())
.pipe(gulp.dest("dist"));//输出位置
});
test.js
function hello(){console.log("hello")}
test.css
h1{
font-size: 24px;
color: red;
}
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ceshi</title>
<link rel="stylesheet" href="css/test.css" inline/> /*文件位置，一定要加inline*/
</head>
<body>
<div>
测试
</div>
<script src="js/test.js" inline></script> /*文件位置，一定要加inline*/
</body>
</html>
输出效果
<html>
<head>
<style>h1{font-size:24px;color:red}</style>
</head>
<body>
<div>测试</div>
<script>function hello(){console.log("hello")}</script>
</body>
</html>
网友评论