le fichier pug compilé en html ne charge pas le foie

Question

Dans mon dossier de projet, j'ai des fichiers pug qui se trouvent dans src/pug/*.pug, un de ces fichiers est index.pug. Une fois compilé en html, les fichiers compilés se trouvent dans build/templates/*.html. Dans la tâche serve, dans browsersync.init(), j'ai changé lede ./ à build/templates/ parce que le index.html compilé se trouve là. Le problème est, browsersync livereload ne fonctionne pas; Je dois rafraîchir le navigateur juste pour voir les changements que je fais dans index.pug.

Gulpfile.js

const gulp = require('gulp'), 
     sass = require('gulp-sass'), 
     pug = require('gulp-pug'), 
     uglify = require('gulp-uglify'), 
     plumber = require('gulp-plumber'), 
     imagemin = require('gulp-imagemin'), 
     concat = require('gulp-concat'), 
     autoprefixer = require('gulp-autoprefixer'), 
     browserSync = require('browser-sync'); 

gulp.task('templates',() => { 
    return gulp.src('src/pug/*.pug') 
     .pipe(plumber()) 
     .pipe(pug({pretty: true})) 
     .pipe(gulp.dest('build/templates/')) 
     .pipe(browserSync.stream({stream: true})); 
}); 

gulp.task('styles',() => { 
    return gulp.src('src/sass/**/*.sass') 
    .pipe(plumber()) 
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)) 
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) 
    .pipe(gulp.dest('build/css/all/')) 
    .pipe(concat('style.css')) 
    .pipe(gulp.dest('build/css/')) 
    .pipe(browserSync.stream({stream: true})); 
}); 

gulp.task('scripts',() => { 
    return gulp.src('src/js/*.js') 
     .pipe(plumber()) 
     .pipe(concat('script.js')) 
     .pipe(gulp.dest('build/js/')) 
     .pipe(browserSync.stream({stream: true})); 
}); 

gulp.task('imagemin',() => { 
    gulp.src('assets/img/src/**/*') 
     .pipe(imagemin()) 
     .pipe(gulp.dest('assets/img/dist/')); 
}); 

gulp.task('serve', ['templates', 'styles', 'scripts'],() => { 
    browserSync.init({ 
     server: { 
      baseDir: 'build/templates/' 
     }, 
     notify: false 
    }); 

    gulp.watch('src/pug/*.pug', ['templates']); 
    gulp.watch('src/sass/**/*.sass', ['styles']); 
    gulp.watch('src/js/*.js', ['scripts']); 
    gulp.watch('build/templates/index.html').on('change', browserSync.reload); 
}); 

gulp.task('default', ['imagemin', 'serve']); 

Quelqu'un peut-il me aider à résoudre ce problème?

Answer 1

Je ne sais pas pourquoi cela ne fonctionne pas, mais j'ai comparé votre fichier de construction aux documents officiels, et je suis tombé this approach from the docs: Au lieu de regarder les fichiers HTML, il regarde la source (fichiers carg dans votre cas) et appelle browserSync.reload une fois la tâche de compilation source terminée. Dans votre cas, la ligne de carlin serait remplacé par quelque chose comme ceci:

gulp.watch('src/pug/*.pug', ['templates-watch']); 

Et vous créez une nouvelle tâche, appelée templates-watch, qui serait défini comme suit:

gulp.task('templates-watch', ['templates'], function (done) { 
    browserSync.reload(); 
    done(); 
}); 

problème