файл мопса, скомпилированный в html, не работает в

Question

В моей папке проекта у меня есть файлы-мопеды, которые находятся в src/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']); 

Может кто-то помочь мне исправить это?

Answer 1

Не уверен, почему это не работает, но я сравнил файл сборки с официальными документами, и я наткнулся на this approach from the docs: вместо просмотра файлов HTML он отслеживает источник (файлы мопса в вашем случае) и вызывает browserSync.reload после того, как задача компиляции источника завершена. В вашем случае, мопс линия будет заменена чем-то вроде этого:

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

И вы можете создать новую задачу, называемую templates-watch, который будет определен следующим образом:

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