javascript - Browsersync 不重新加载

Question

我使用了 gulpfile.js 的许多变体和全局浏览器同步的“browser-sync start --server --files "*.html”命令，但自动重新加载不起作用。我只收到了

[Browsersync] Access URLs:

   Local: http://localhost:3000
External: http://192.168.56.1:3000

      UI: http://localhost:3001
UI External: http://192.168.56.1:3001

[Browsersync] Serving files from: ./
[Browsersync] Watching files...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...

那是我的 gulpfile.js。请帮助我修复自动重载

var gulp        = require('gulp');
var sass        = require('gulp-sass');
var pug         = require('gulp-pug');
var browserSync = require('browser-sync');
var sequence    = require('run-sequence');
var server      = browserSync.create();
var reload      = server.reload;

gulp.task('sass', function() {
    return gulp.src("./app/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("./app/css"))
        .pipe(server.stream())
});

gulp.task('pug', function() {
    return gulp.src(['./app/pug/*.pug', '!./node_modules/**'])
        .pipe(pug({
            basedir: __dirname,
            doctype: 'html',
        }))
        .pipe(gulp.dest("./app"))
        .pipe(server.stream())
});

gulp.task('browser-sync', function() {
    server.init({
        server: 'app',
        port: 3010
    });
  });
  

gulp.task('watch', ['build'], function() {
    gulp.watch("./app/pug/*.pug", ['pug']);
    gulp.watch("./app/scss/*.scss", ['sass']);
});

gulp.task('build', function(done) {
    sequence(
      ['pug', 'sass'],
      'browser-sync',
      done);
  });

gulp.task('default', ['watch']);

Gulp @ 3.9.0浏览器同步 @ 2.24.6

Answer 1

在每次监视调用后追加重新加载。您已启动浏览器同步，但您需要让它知道何时重新加载。它应该在任何文件更改时重新加载。所以在 watch()

之后添加

 gulp.watch("./app/pug/*.pug", ['pug']).on('change', browserSync.reload);
 gulp.watch("./app/scss/*.scss", ['sass']).on('change', browserSync.reload);

var gulp        = require('gulp');
var sass        = require('gulp-sass');
var pug         = require('gulp-pug');
var browserSync = require('browser-sync');
var sequence    = require('run-sequence');
var server      = browserSync.create();
var reload      = server.reload;

gulp.task('sass', function() {
    return gulp.src("./app/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("./app/css"))
        .pipe(server.stream())
});

gulp.task('pug', function() {
    return gulp.src(['./app/pug/*.pug', '!./node_modules/**'])
        .pipe(pug({
            basedir: __dirname,
            doctype: 'html',
        }))
        .pipe(gulp.dest("./app"))
        .pipe(server.stream())
});

gulp.task('browser-sync', function() {
    server.init({
        server: 'app',
        port: 3010
    });
  });
  

gulp.task('watch', ['build'], function() {
    gulp.watch("./app/pug/*.pug", ['pug']).on('change', browserSync.reload);
    gulp.watch("./app/scss/*.scss", ['sass']).on('change', browserSync.reload);
});

gulp.task('build', function(done) {
    sequence(
      ['pug', 'sass'],
      'browser-sync',
      done);
  });

gulp.task('default', ['watch']);