Browsersync 在完成前使用 gulp 刷新答案

【问题标题】：Browsersync with gulp refreshing before finishedBrowsersync 在完成前使用 gulp 刷新
【发布时间】：2016-07-08 08:59:26
【问题描述】：

我在 gulp 中使用 browsersync，设置如下。问题是当代码更改时，browsersync 会识别到这一点并刷新页面。但是它不会等到脚本文件在gulp.dest所以一般它会自动刷新，找不到脚本文件，然后再次刷新，它就在那里。

有没有办法确保它会等待任务完全完成？

var browserSync = require('browser-sync').create();

gulp.task('cleanScripts', function () {
  return gulp.src('./assets/js', {read: false})
             .pipe(clean());
});

gulp.task('scripts', ['cleanScripts'], function() {
    return browserify('./client/js/main.js')
      .bundle()
      .on('error', function (e) {
          gutil.log(e);
      })
      .pipe(source('main-' + packageJson.version + '.js'))
      .pipe(buffer())
      .pipe(uglify())
      .pipe(gulp.dest('./assets/js'));
});

//Watch our changes
gulp.task('watch', function () {
   browserSync.init({
     proxy: "localhost:3000"
  });
  gulp.watch(['./client/js/**/*.js', ['scripts']).on('change', browserSync.reload);
});

【问题讨论】：

标签： node.js gulp browser-sync

【解决方案1】：

这是一个简单的基于任务的 Gulp 4 解决方案。它将重新加载变成一个连续完成的任务，而不是在更改事件时触发它。

const gulp = require("gulp");
const browserSync = require("browser-sync");

// create a reload task
gulp.task("reload", (cb) => {
    browserSync.reload()
    cb()
})

gulp.task('watch', () => {
  // when the js changes, process the scripts, then reload
  gulp.watch('./client/js/**/*.js', gulp.series('scripts', "reload"));
});

// run the watch task before setting up browserSync
gulp.task("browser-sync", gulp.series("watch", () => browserSync({proxy:"localhost:3000"})));

【讨论】：

【解决方案2】：

我正在使用 Gulp 4

这就是解决方案

gulp.task('watch', gulp.series('some-task-name', function () {
    browserSync.init({
        server: {
            baseDir: config.distFolder + ''
        }
    });

    var watcher = gulp.watch([
                    './src/views/*.html', 
                    './src/index.html', 
                    './src/assets/css/*.css', 
                    './src/**/*.js'],
                    gulp.series('some-task-name'));
    watcher.on('change', async function (path, stats) {
        console.log('you changed the code');
        browserSync.notify("Compiling, please wait!");
        browserSync.reload();
    })
}));

现在，只要我的代码发生变化，我的“某些任务名称”就会被执行，然后浏览器页面会重新加载。我根本不需要延迟我的浏览器同步。

这是我在 package.json 文件中的开发依赖项

"devDependencies": {
    "browser-sync": "^2.26.7",
    "connect-modrewrite": "^0.10.2",
    "del": "^2.2.0",
    "gulp": "^4.0.2",
    "gulp-clean-css": "^4.2.0",
    "gulp-concat": "^2.6.0",
    "gulp-rev": "^7.0.0",
    "gulp-rev-replace": "^0.4.4"
  }

【讨论】：

【解决方案3】：

BrowserSync 有选项 reloadDelay 可以在 gulpfile.js 中设置

在文件更改事件后指示浏览器重新加载/注入之前等待的时间（以毫秒为单位）

gulp.task('browserSync', function() {
    browserSync.init({
        server: {
            baseDir: 'app'
        },
        reloadDelay: 100
    });
});

【讨论】：

【解决方案4】：

你可以尝试简单的方法，否则你可能需要超时：

gulp.task('watch', function () {
 watch(['./client/js/**/*.js'], function () {
  gulp.start('scripts');
 });
});

并将 browserSync.reload 放在脚本管道的末尾：

.pipe(browserSync.reload);

如果不行，可以试试 timeout 和 time 玩，但如果你真的需要快速开发和编译，这不是一个合适的解决方案：

gulp.task('watch', function () {
 watch(['./client/js/**/*.js'], function () {
  gulp.start('scripts');
  setTimeout(function(){
   browserSync.reload;
  }, 1000); //1 second
 });
});

在这种情况下，您不需要在脚本管道结束时重新加载。

【讨论】：