Comment injecter le contenu du fichier CSS dans le HTML dans Gulp?

J'ai besoin d'insérer le contenu d'une feuille de style dans le <head> d'une page HTML. Comment puis-je le faire dans Gulp?

Avant (ce que j'ai):

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

Après (ce que je veux):

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

Noter que je n'ai pas besoin de CSS dans les éléments, mais il suffit de mettre le contenu du CSS dans le <head>.

InformationsquelleAutor Evgenii | 2014-05-23
  1. 45

    Vous pourrez facilement l'utiliser gulp-remplacez, comme suit:

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

    Vous pouvez facilement modifier le remplacement RegEx pour travailler avec des fichiers différents, trop.

    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(...));
    • Votre deuxième expression régulière serait seulement un symbole nommé les fichiers css. Vous devez corriger comme ceci: /<link href="([^\.]+\.css)"[^>]*>/g
    InformationsquelleAutor OverZealous
  2. -1

    Vous pouvez inline les styles à l'aide d'importation:

    <style> @import "style.css"; </style>
    • qui a effectivement travaillé pour moi.. Filaire chose difficile - dans le source de la page et les outils de dev, je ne vois que @import "mystyle.css"; mais le css. Sur l'autre main page obtenir style.. des idées? est-ce prévu? PS: ne pas obtenir les votes contre
    InformationsquelleAutor Kim T