livereload - 如何暂时禁用浏览器同步？

Question

如何暂时禁用browsersync，使其不注入/修改 HTML 页面？（用于测试和调试。）

Answer 1

似乎没有一个配置选项可以做到这一点，但一个 hacky 解决方法是使用snippetOptions指定一个永远不会在 HTML 中找到的字符串：

snippetOptions: {
  rule: {
    match: /qqqqqqqqq/
  }
}

如果在 HTML 中找不到此字符串，则永远不会注入该代码段，并且 browsersync 将是惰性的。

Answer 2

您可以使用 Yargs 发送参数并启用或禁用“监视”任务。

记住这个命令行来安装所需的组件：
npm i --save gulp browser-sync yargs runSequence

在 gulpfile.js 文件中：

browserSync.init({
    port: 80,
    notify: false,
    cors: true,
    browser: 'chrome',
    open: 'local'
});

gulp.task('watch', ['browserSync'], function (){
    gulp.watch('dev/*.html', browserSync.reload); 
    gulp.watch('dev/**/*.js', browserSync.reload);
    gulp.watch('dev/**/*.css', browserSync.reload); 
});

gulp.task('default', function(callback) {
    var sequence = ['browserSync'];
    if (args.sync){
        sequence.push('watch')
    }

    runSequence(sequence,callback);
});

此if (args.sync)行使用真/假搜索sync值并启用/禁用“监视”任务。

BrowserSync 与手表：
gulp --sync true

BrowserSync 不带手表：
gulp或gulp --sync false