web-dev-qa-db-ja.com

GulpでCSSファイルのコンテンツをHTMLに挿入する方法は？

スタイルシートのコンテンツをHTMLページの<head>に挿入する必要があります。 Gulpでどうすればいいですか？

前（私が持っているもの）：

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

後（私が欲しいもの）：

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

CSSを要素にインライン化する必要はなく、CSSのコンテンツを<head>に入れるだけであることに注意してください。

javascripthtmlcssgulp
36
Evgenii

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