沃梦达 / 编程问答 / 前端问题 / 正文

如何在 Gulp 中将 CSS 文件的内容注入 HTML?

沃梦达教程前端问题

2022-01-01

How to inject content of CSS file into HTML in Gulp?(如何在 Gulp 中将 CSS 文件的内容注入 HTML?)

本文介绍了如何在 Gulp 中将 CSS 文件的内容注入 HTML?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要将样式表的内容插入到 HTML 页面的 <head> 中.我如何在 Gulp 中做到这一点?

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

之前(我所拥有的):

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

之后(我想要的):

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

请注意，我不需要将 CSS 内联到元素中，只需将 CSS 的内容放在 <head> 中即可.

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

推荐答案

你可以轻松使用 gulp-replace，像这样:

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>
' + style + '
</style>';
  }))
  .pipe(gulp.dest(...));

您还可以轻松修改替换 RegEx 以处理不同的文件.

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>
' + style + '
</style>';
  }))
  .pipe(gulp.dest(...));

这篇关于如何在 Gulp 中将 CSS 文件的内容注入 HTML?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

沃梦达教程

本文标题为：如何在 Gulp 中将 CSS 文件的内容注入 HTML?