Y a-t-il un moyen de réécrire le HTML pour utiliser gulfill-minified CSS

la meilleure façon de gérer cela est d'utiliser L'un des injecteurs HTML du get-go. Je suis à l'aide de gulp-inject pour un certain succès jusqu'à présent.

Ajouter gulp-injecter pour votre projet:

npm i --save-dev gulp-inject

en supposant que vous avez une disposition de dossier similaire à ceci:

• build/
• src/
  • index.html
  • moins/
    • main.moins
  • js/
    • app.js

votre HTML doit inclure ceci où vous voulez 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 pour 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 -->

alors votre gulffile regarde quelque chose comme 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');
    });
});

C'est juste une idée, et vous pouvez faire beaucoup plus en utilisant gulp-watch pour les des versions, mais la clé ici est que nous montre l' construire répertoire de choisir le moment de reconstruire le fichier HTML, et de regarder les src répertoire pour tout le reste.

NOTE:

Puisqu'il y a beaucoup d'upvotes, il y a quelques autres plugins qui font le remplacement de référence à côté de gulp-inject. Vous pouvez vouloir les regarder et voir si l'un d'eux est mieux adapté pour vous, surtout si vous n'utilisez pas gulp-rev:

• gulp-usemin
• gulp-useref

il y a aussi deux bibliothèques CDN qui font la même chose, mais pour les ressources CDN

• gulp-google-ca
• gulp-cdnizer (divulgation complète: j'ai écrit ce un)