Node.js 节点+；Gulp-必须保存文件两次才能在浏览器中查看更改

你能告诉我解决这个矛盾的正确方向吗

我正在一个新项目中工作，使用节点、gulp和gulp的插件列表。 每次我按Ctrl+S组合键时，浏览器都会重新加载，但我看不到应用的更改，因此我需要再次按Ctrl+S组合键才能看到它们。这是浏览器第二次重新加载，显示更改

这发生在我的源目录下的任何html、scss或js文件中

我正在使用VisualStudio代码在Windows10上工作，除此之外，一切正常

我的gulpfile.js内容如下：

    var gulp = require('gulp');
    var sass = require('gulp-sass');
    var inject = require('gulp-inject');
    var wiredep = require('wiredep').stream;
    var plumber = require('gulp-plumber');
    var imagemin = require('gulp-imagemin');
    var browserSync = require('browser-sync');
    var uglify = require('gulp-uglify');

    gulp.task('styles', function(){
      var injectFiles = gulp.src(['!src/styles/main.scss', 'src/styles/*.scss'], {read: false});
      var injectGlobalFiles = gulp.src('src/global/*.scss', {read: false});

     function transformFilepath(filepath) {
        return '@import "' + filepath + '";';
      }

      var injectFilesOptions = {
        transform: transformFilepath,
        starttag: '// inject:app',
        endtag: '// endinject',
        addRootSlash: false
      };

      var injectGlobalOptions = {
        transform: transformFilepath,
        starttag: '// inject:global',
        endtag: '// endinject',
        addRootSlash: false
      };

      return gulp.src('src/styles/main.scss')
        .pipe(plumber())
        .pipe(wiredep())
        .pipe(inject(injectGlobalFiles, injectGlobalOptions))
        .pipe(inject(injectFiles, injectFilesOptions))
        .pipe(sass())
        .pipe(gulp.dest('dist/styles'));
    });

    gulp.task('browser-sync', function() {  
      browserSync.init(["styles/*.css", "js/*.js","index.html"], {
          server: {
              baseDir: "dist"
          }
      });
    });

    gulp.task('html', ['styles'], function(){
      var injectFiles = gulp.src('src/styles/*.scss', {read: false});
      var injectOptions = {
        addRootSlash: false,
        ignorePath: ['src', 'dist']
      };

      return gulp.src('src/index.html')
        .pipe(plumber())
        .pipe(inject(injectFiles, injectOptions))
        .pipe(gulp.dest('dist'));
    });

    gulp.task('imagemin', function() {
      gulp.src('src/assets/*.{jpg,jpeg,png,gif,svg}')
      .pipe(plumber())
      .pipe(imagemin())
      .pipe(gulp.dest('dist/assets'));
    });

    gulp.task('uglify', function() {
      gulp.src('src/js/*.js')
          .pipe(uglify())
          .pipe(gulp.dest('dist/js'));
    });

    gulp.task('sass', function() {
      gulp.src('src/styles/*.scss')
          .pipe(plumber())
          .pipe(sass())
          .pipe(gulp.dest('dist/styles/'));
    });

    gulp.task('watch', function() {
      gulp.watch('src/js/*.js', ['uglify']).on('change', browserSync.reload);
      gulp.watch('src/styles/*.scss', ['sass']).on('change', browserSync.reload);
      gulp.watch('src/assets/*.{jpg,jpeg,png,gif,svg}', ['imagemin']).on('change', browserSync.reload);
      gulp.watch('src/index.html', ['html']).on('change', browserSync.reload);
    });



gulp.task('default', ['html', 'sass','imagemin', 'uglify', 'browser-sync', 'watch']);

任何帮助都将不胜感激

谢谢您，祝您过得愉快。尝试以下更改：

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

 gulp.task('watch', function() {
  gulp.watch('src/js/*.js', ['uglify']).on('change', browserSync.reload({ stream:true }));
  gulp.watch('src/styles/*.scss', ['sass']).on('change', browserSync.reload({ stream:true }));
  gulp.watch('src/assets/*.{jpg,jpeg,png,gif,svg}', ['imagemin']).on('change', browserSync.reload);
  gulp.watch('src/index.html', ['html']).on('change', browserSync.reload());
});

如果这没有帮助，我会将重载调用移动到每个任务的末尾，如下所示：

.pipe(browserSync.reload({ stream:true }));

希望这有帮助

[编辑]

更改为：

gulp.task('watch', function() {
  gulp.watch('src/js/*.js', ['uglify']);
  gulp.watch('src/styles/*.scss', ['sass']);
  gulp.watch('src/assets/*.{jpg,jpeg,png,gif,svg}', ['imagemin']);
  gulp.watch('src/index.html', ['html']).on('change', browserSync.reload);
});

gulp.task('imagemin', function() {
  return gulp.src('src/assets/*.{jpg,jpeg,png,gif,svg}')
    .pipe(plumber())
    .pipe(imagemin())
    .pipe(gulp.dest('dist/assets'));
    .pipe(browserSync.reload({ stream:true }));
});

gulp.task('uglify', function() {
  return gulp.src('src/js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'));
    .pipe(browserSync.reload({ stream:true }));
});

gulp.task('sass', function() {
  return gulp.src('src/styles/*.scss')
    .pipe(plumber())
    .pipe(sass())
    .pipe(gulp.dest('dist/styles/'));
    .pipe(browserSync.reload({ stream:true }));
});

你肚子里的其他部分不会改变。除此之外，请进行之前建议的更改：

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

---

你好@Mark，谢谢你的回答。恐怕你的第一个选择不起作用。我收到以下消息：TypeError：“listener”参数必须是Gulp的函数。（C:\Users\full_path\gulpfile.js:92:41）第92行显示：gulp.watch（'src/js/*.js'，['uglify']）。on（'change'，browserSync.reload（{stream:true}））；这是第一个与您建议的代码。现在，你能解释一下你的第二个选择吗？我想我没弄好。什么意思？非常感谢。嘿，马克，谢谢你的回复。它现在在某种程度上起作用了。现在，该过程在第一次保存时保存更改，但不会重新加载浏览器。我不得不手工做。你能看出问题出在哪里吗？此外，错误消息仍然存在->“listener”参数必须是函数。谢谢你的知识和耐心。我对html watch call做了一个小改动。看看这有什么不同。那个错误消息指的是哪一行？嘿，马克，你的解决方案运行得很好。很抱歉，回复延迟，非常感谢！没问题。如果您认为这是有帮助的，请接受正确的答案，这样其他人就可以知道，而不必阅读所有的评论。非常感谢。