编译为 html 的 pug 文件不会 livereload答案

【问题标题】：pug file compiled to html does not livereload编译为 html 的 pug 文件不会 livereload
【发布时间】：2017-01-15 03:15:36
【问题描述】：

在我的项目文件夹中，我有位于 src/pug/*.pug 的 pug 文件，其中一个文件是 index.pug。编译为 html 时，编译后的文件位于build/templates/*.html。在serve 任务中，在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']);

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

【问题讨论】：

标签： gulp pug gulp-watch browser-sync

【解决方案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();
});

【讨论】：