How to inject content of CSS file into HTML in Gul

2020-05-15 13:34发布

站内文章 / JavaScript

23 0

叼着烟拽天下

女 | 书童

私信

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

Want to improve this question? Update the question so it's on-topic for Stack Overflow.

Closed 3 years ago.

I need to insert the content of a stylesheet into the <head> of an HTML page. How can I do it in Gulp?

Before (what I have):

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

After (what I want):

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

Note that I do not need to inline CSS into the elements, but just put the contents of CSS in the <head>.

回答1:

You could easily use gulp-replace, like so:

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

You can also easily modify the replacement RegEx to work with different files, too.

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