Как добавить содержимое CSS файла в HTML в Gulp?

Мне нужно вставить содержимое таблицы стилей в <head> страницы HTML. Как это сделать в Gulp?

До (что у меня есть):

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

После (что я хочу):

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

Обратите внимание, что мне не нужно встроить CSS в элементы, но просто поместите содержимое CSS в <head>.

Ответы

Ответ 1

Вы можете легко использовать 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(...));

Ответ 3

Вы также можете посмотреть в https://www.npmjs.com/package/gulp-inline-css в качестве альтернативы.

Вот как вы это сделаете:

1. Установите gulp -inline-css.

npm i -S gulp-inline-css

2. Напишите небольшую задачу 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.

Ответ 4

Вы можете встроить стили с помощью импорта:

<style> @import "style.css"; </style>