web-dev-qa-db-fra.com

Existe-t-il un moyen de réécrire le HTML pour utiliser CSS CSS gulp-minified

Je me bats avec ce qui suit:

Mon gulpfile.js compile tous les .less, les réduit et concatène tous les CSS dans ./dist/all.min.css

Existe-t-il un moyen de réécrire le fichier HTML, de supprimer toutes les balises de style et de ne mettre qu'une seule balise de style dedans en chargeant le CSS minifié?

concatenationminifygulpgulp-less
31
dlaxar

La meilleure façon de gérer cela est d'utiliser l'un des injecteurs HTML dès le départ. J'utilise gulp-inject jusqu'à présent un certain succès.

Ajoutez gulp-inject à votre projet:

npm i --save-dev gulp-inject

En supposant que vous avez une disposition de dossier similaire à celle-ci:

  • construire/
  • src /
    • index.html
    • moins/
      • main.less
    • js /
      • app.js

Votre code HTML doit inclure ceci là où vous souhaitez que les fichiers CSS ou JS soient injectés, soit la tête pour les deux, soit la tête pour le CSS et juste avant le corps de vos fichiers JS:

<!-- inject:css -->
<!-- any *.css files among your sources will go here as: <link rel="stylesheet" href="FILE"> -->
<!-- endinject -->

<!-- inject:js -->
<!-- any *.js files among your sources will go here as: <script src="FILE"></script> -->
<!-- endinject -->

Ensuite, votre gulpfile ressemble à ceci:

gulp.task('build-styles', function() {
    // the return is important!
    return gulp.src('src/less/main.less')
            .pipe(less())
            .pipe(gulp.dest('build'));
});


gulp.task('build-js', function() {
    // the return is important if you want proper dependencies!
    return gulp.src('src/js/**/*.js')
            // lint, process, whatever
            .pipe(gulp.dest('build'));
});

gulp.task('build-html', function() {
    // We src all files under build
    return gulp.src('build/**/*.*')
            // and inject them into the HTML
            .pipe(inject('src/index.html', {
                        addRootSlash: false,  // ensures proper relative paths
                        ignorePath: '/build/' // ensures proper relative paths
                    }))
            .pipe(gulp.dest('build'));
});

gulp.task('build', ['build-styles', 'build-js'], function(cb) {
    gulp.run('build-html', cb);
});

gulp.task('default', ['build'], function() {
    gulp.watch('src/**/*.less', function() {
        gulp.run('build-styles');
    });
    gulp.watch(['build/**/*.*','!build/index.html', 'src/index.html'], function() {
        gulp.run('build-html');
    });
});

Ce n'est qu'une idée approximative, et vous pouvez faire beaucoup plus en utilisant gulp-watch pour les versions incrémentielles, mais la clé ici est que nous regardons le répertoire build pour choisir quand reconstruire le fichier HTML et regarder le répertoire src pour tout le reste.

REMARQUE:

Comme cela reçoit beaucoup de votes positifs, il existe quelques autres plugins qui font référence au remplacement à côté de gulp-inject. Vous voudrez peut-être les regarder et voir si l'un d'eux vous convient mieux, surtout si vous n'utilisez pas gulp-rev:

Il existe également deux bibliothèques CDN qui font la même chose, mais pour les ressources CDN

49
OverZealous

Vous souhaitez le réécrire lors d'une build? Pourquoi ne pas remplacer tous les liens CSS par un seul lien vers all.min.css dans votre code source? Quoi qu'il en soit, vous pouvez utiliser le plug-in gulp-replace pour rechercher et remplacer une chaîne dans vos fichiers pendant une génération. Voici un autre exemple de projet à examiner:

Web App Boilerplate - Modèle d'application Web frontal HTML5 Boilerplate étendu avec MOINS feuilles de style et Gulp.js système de construction.

4
Konstantin Tarkus

Voir aussi gulp-smoosher . Exemple:

index.html 

<html>
    <head>
        <!-- smoosh -->
        <link rel='stylesheet' href='styles.css'>
        <!-- endsmoosh -->
    </head>

styles.css 

body {
    background: red;
}

Gulpfile.js 

gulp.task('default', function () {
    gulp.src('index.html')
        .pipe(smoosher())
        .pipe(gulp.dest('dist'));
});

dist/index.html 

<html>
    <head>
        <style>body {
            background: red;
        }</style>
    </head>
0
Gabriel Florit