問題描述

我需要將樣式表的內容插入到 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="http://([.].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 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。