How to inject content of CSS file into HTML in Gulp?

css, gulp, html, javascript

Solution

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

Problem

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>`.

Original source