如何将CSS文件的内容注入Gulp的HTML？ [英] How to inject content of CSS file into HTML in Gulp?
本文介绍了如何将CSS文件的内容注入Gulp的HTML？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要将样式表的内容插入到HTML页面的< head> 中。有没有一个gulp插件？
I need to insert the content of a stylesheet into the <head> of an HTML page. Is there a gulp plugin for that?
之前（我有）：
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
之后（我想要的）：
<head>
<style>
p { color: pink; }
</style>
</head>
注意，我不需要在元素中嵌入CSS， < head> 。
Note that I do not need to inline CSS into the elements, but just put the contents of CSS in the <head>.
推荐答案
href =https://www.npmjs.org/package/gulp-replace> gulp-replace ，例如：
You could easily use gulp-replace, like so:
var gulp = require('gulp'),
replace = require('gulp-replace'),
fs = require('fs');
// in your task
return gulp.src(...)
.pipe(replace(/<link href="style.css"[^>]*>/, function(s) {
var style = fs.readFileSync('style.css', 'utf8');
return '<style>\n' + style + '\n</style>';
}))
.pipe(gulp.dest(...));
您也可以轻松地修改替换RegEx以使用不同的文件。
You can also easily modify the replacement RegEx to work with different files, too.
return gulp.src(...)
.pipe(replace(/<link href="([^\.]\.css)"[^>]*>/g, function(s, filename) {
var style = fs.readFileSync(filename, 'utf8');
return '<style>\n' + style + '\n</style>';
}))
.pipe(gulp.dest(...));
这篇关于如何将CSS文件的内容注入Gulp的HTML？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
