问题描述

我需要将样式表的内容插入到 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(...));

次佳解决方法

现在有一个 gulp 模块：https://github.com/fmal/gulp-inline-source

第三种解决方法

您也可以考虑选择 https://www.npmjs.com/package/gulp-inline-css 。

你可以这样做：

1. 安装 gulp-inline-css 。

npm i -S gulp-inline-css

写一个小的 gulp 任务。

var gulp = require('gulp'),
    inlineCss = require('gulp-inline-css');

gulp.task('default', function() {
    return gulp.src('./*.html')
        .pipe(inlineCss())
        .pipe(gulp.dest('build/'));
});

inline-css 的所有选项都可以通过此任务传递。它对桌面样式或 HTML 电子邮件 pre-processing 是好的。

参考文献

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。