Gulp 编译为html的pug文件不支持livereload

在我的项目文件夹中，有一些pug文件位于

src/pug/*.pug

，其中一个文件是

index.pug

。编译为html时，编译的文件位于

build/templates/*.html

中。在

service

任务中，在

browsersync.init（）

中，我将

baseDir

从

/

更改为

build/templates/

，因为编译的

index.html

位于那里。问题是，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']);

---

有人能帮我解决这个问题吗？

不知道为什么这样做不起作用，但我将您的构建文件与官方文档进行了比较，我发现：它没有查看HTML文件，而是查看源代码（您的例子中的哈巴狗文件），并在源代码编译任务完成后调用

browserSync.reload

。在您的情况下，帕格线将被以下内容取代：

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

您将创建一个新任务，名为

templates watch

，其定义如下：

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