node.js - Node + Gulp - ブラウザーで変更を確認するには、ファイルを 2 回保存する必要があります

Question

この矛盾を解決するための正しい方向を教えてください。

Node、gulp、およびgulpのプラグインのリストを使用して、新しいプロジェクトに取り組んでいます。Ctrl + S を実行するたびにブラウザがリロードされますが、適用された変更が表示されないため、もう一度 Ctrl + S を実行して表示する必要があります。この 2 回目は、ブラウザが再度リロードされ、変更が表示されます。

これは、ソース ディレクトリにある html、scss、または js ファイルのいずれかで発生しています。

私は Visual Studio Code を使用して Windows 10 で作業していますが、これ以外はすべて正常に動作します。

私の 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']);

どんな助けでも大歓迎です。

どうぞよろしくお願いいたします。