Question

我使用了gulpfile.js的许多变体和全局浏览器同步的“浏览器同步启动--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']);

大嘴豆@ 3.9.0 Browsersync @ 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']);

Browsersync未重新加载

1 个答案: