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

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="https://stackoverflow.com/questions/23820703/style.css"[^>]*>/, function(s) {
      var style = fs.readFileSync("https://stackoverflow.com/questions/23820703/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="https://stackoverflow.com/questions/23820703/([^\.]\.css)"[^>]*>/g, function(s, filename) {
      var style = fs.readFileSync(filename, 'utf8');
      return '<style>\n' + style + '\n</style>';
  }))
  .pipe(gulp.dest(...));

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)