htmlにコンパイルされたpugファイルはライブリロードされません

Question

私のプロジェクトフォルダには、src/pug/*.pugにあるpugファイルがあり、そのうちの1つはindex.pugです。 htmlにコンパイルすると、コンパイルされたファイルはbuild/templates/*.htmlに配置されます。 serveタスクのbrowsersync.init()には、index.htmlがあるのでbaseDirを./からbuild/templates/に変更しました。問題は、browsersync livereloadが機能しないことです。 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']); 

は、誰かが私はこの問題を解決する手助けすることはできますか？

Answer 1

私はあなたのビルドファイルを公式ドキュメントと比較しました。this approach from the docs：HTMLファイルを見る代わりに、ソース（あなたのケースのpugファイル）とそのソースコンパイルタスクが完了した後にbrowserSync.reloadを呼び出します。あなたのケースでは、パグラインは次のようなものに置き換えられます：

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

そして、あなたは新しいタスクを作成し、以下のように定義されることを、templates-watch呼ば：

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