Javascript 如何在Gulp中将CSS文件的内容注入HTML？

我需要将样式表的内容插入HTML页面的

。我怎么能一口气做呢

之前（我所拥有的）：

在（我想要的）之后：

p{颜色：粉红色；}

请注意，我不需要将CSS内联到元素中，只需将CSS的内容放入您可以轻松使用的

中，如下所示：

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(...));

var gulp=require（'gulp'），
替换=需要（'gulp-replace'），
fs=要求（'fs'）；
//在你的任务中
返回一口src（…）
.管道（替换（/]*>/，功能）{
var style=fs.readFileSync（'style.css'，'utf8'）；
返回'\n'+style+'\n'；
}))
.管道（吞咽目的地（…）；

您还可以轻松地修改替换正则表达式以处理不同的文件

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(...));

return gulp.src（…）
.pipe（替换（/]*>/g，函数，文件名）{
var style=fs.readFileSync（文件名为“utf8”）；
返回'\n'+style+'\n'；
}))
.管道（吞咽目的地（…）；

您可以使用导入来内联样式：

<style> @import "style.css"; </style>

@import“style.css”；

第二个正则表达式将只匹配一个名为css文件的符号。您应该这样更正它：

/]*>/g

对于CSS中的引用，我也会在这里提出警告。在像

/styles.css

这样的文件中，这很好。但是，如果您正在寻找诸如

/css/styles.css

之类的内容，如果您使用此方法内联媒体、字体等的任何相对路径，则可能不正确。这对我来说确实有效。。连线很难-在页面源代码和开发工具中，我只看到

@import“mystyle.css”但实际的css。另一方面，页面要有样式。。有什么想法吗？这是预期的吗？注意：不要往下看。这与使用
元素没有太大区别。浏览器仍然需要找到
style.css
文件，因此它没有完成将物理样式注入HTML页面的目标。
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(...));

<style> @import "style.css"; </style>