Question

我需要将样式表的内容插入到HTML页面的<head>中。我怎么能在Gulp做到这一点？

之前（我拥有）：

<head>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

之后（我想要的）：

<head>
  <style>
     p { color: pink; }
  </style>
</head>

请注意，我不需要将CSS内联到元素中，只需将CSS的内容放在<head>中。

Answer 1

您可以轻松使用gulp-replace，如下所示：

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以使用不同的文件。

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

Answer 2

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

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

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

2 个答案: