Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。












想改善这个问题吗?更新问题,以便将其作为on-topic用于堆栈溢出。

4年前关闭。



Improve this 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>中。

最佳答案

您可以轻松地使用 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(...));

10-06 05:43