在 Gulp 中避免跨浏览器操作答案

【问题标题】：Avoid cross browser action in Gulp在 Gulp 中避免跨浏览器操作
【发布时间】：2018-01-29 03:26:11
【问题描述】：

我为我的项目创建了一个 gulp 文件，它可以成功运行，但是当我在两个浏览器中打开它并在一个浏览器中滚动我的页面或键入一些内容时，它也会反映在另一个浏览器中。不知道怎么回事。

这是我的 gulp.js 文件

var gulp = require('gulp'),
plumber = require('gulp-plumber'),
rename = require('gulp-rename');
var autoprefixer = require('gulp-autoprefixer');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin'),
cache = require('gulp-cache');
var minifycss = require('gulp-minify-css');
var browserSync = require('browser-sync');

gulp.task('browser-sync', function() {
    browserSync({
       server: {
           baseDir: "./",
        }
    });
 });

 gulp.task('bs-reload', function () {
    browserSync.reload();
 });

gulp.task('images', function(){
   gulp.src('assets/images/**/*')
   .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, 
        interlaced: true })))
    .pipe(gulp.dest('build/images/'));
});

gulp.task('styles', function(){
   gulp.src(['assets/styles/**/*.css'])
   .pipe(plumber({
      errorHandler: function (error) {
      console.log(error.message);
      this.emit('end');
 }}))
//.pipe(sass())
.pipe(autoprefixer('last 2 versions'))
.pipe(gulp.dest('build/styles/'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('build/styles/'))
.pipe(browserSync.reload({stream:true}))
});

gulp.task('scripts', function(){
  return gulp.src('app/**/*.js')
    .pipe(plumber({
       errorHandler: function (error) {
       console.log(error.message);
       this.emit('end');
}}))
.pipe(concat('main.js'))
.pipe(gulp.dest('build/js/'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('build/js/'))
.pipe(browserSync.reload({stream:true}))
});

 gulp.task('default', ['browser-sync'], function(){
     gulp.watch("assets/styles/**/*.css", ['styles']);
     gulp.watch("app/**/*.js", ['scripts']);
     gulp.watch("*.html", ['bs-reload']);
 });


 gulp.task('production', ['browser-sync','bs-
 reload','images','styles','scripts','default']);

【问题讨论】：

这是使用browser-sync时的预期行为
那我应该怎么做才能避免...??
@SuriyaKumar 删除任务“bs-reload”以及对它的所有引用。删除所有 browserSync.reload() 调用。
我删除了@bata 但无法正常工作。
@SuriyaKumar 不使用浏览器同步。使用另一个 HTTP 服务器

标签： angularjs gulp browser-sync

【解决方案1】：

转到您的Browsersync 设置页面（默认为http://localhost:3001）并关闭您不需要的同步设置。

另外，如果您不想要 Browsersync 为您提供的功能，您为什么要使用它？

【讨论】：

它工作正常，但是当我再次开始 gulp 时，问题就会出现......如果你不介意你能告诉我，如何永久避免这个问题。

【解决方案2】：

我得到了我的问题的解决方案。使用“ghostMode：false”来避免跨浏览器操作。对于一个浏览器中的滚动等更改将在所有打开您页面的浏览器中滚动页面。

gulp.task('browser-sync', function() {
   browserSync({
      server: {
          baseDir: "./",
       },
       ghostMode : false
   });
});

谢谢，

苏利亚

【讨论】：