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>
Notez que je n'ai pas besoin d'inclure CSS dans les éléments, mais simplement de mettre le contenu de CSS dans le <head>
.
Vous pouvez facilement utiliser gulp-replace
, comme ceci:
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 également facilement modifier le RegEx de remplacement pour qu'il fonctionne également avec différents fichiers.
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(...));