浏览器同步 - 对 .scss 的更改未出现在浏览器中但出现在 .css 中

Question

我正在尝试在 Gulp 4 中使用浏览器同步设置一个项目。在执行我的默认任务“gulp”时，浏览器同步会在 local:3000 加载并启动一个 chrome 实例，并且在我的“ src" 文件夹到 .html 文件在保存后按预期重新加载。但是，我的“sass”文件夹中的任何内容都被正确编译为“.scss”，并在保存后作为“.css”移动到我的“dist”文件夹中，但是，保存后任何更改都不会重新加载到我的浏览器中.

我尝试重新安排 browserSync.reload 的位置，使其在任何最小化之前发生，但这并没有解决问题。我曾尝试查看 browsersync + Gulp.js 文档，但无济于事。我还是 Gulp 4 的新手并且正在学习，所以很可能我只是在代码中搞砸了一些东西，或者我正在尝试执行一系列不能很好地协同工作的命令。

/* REQUIRED PACKAGES EDITED */

var gulp = require('gulp');
    watch = require('gulp-watch');
    browserSync = require('browser-sync').create();
    concat = require('gulp-concat');
    sass = require('gulp-sass');
    uglify = require('gulp-uglify');
    imagemin = require('gulp-imagemin');
    pump = require('pump');
    cleanCSS = require('gulp-clean-css');

/* GULP TASKS */

/* Pipe .HTML to Dist Folder */

gulp.task('html', function(cb) {
  pump([
    gulp.src('src/*.html'),
    gulp.dest('dist'),
    browserSync.stream()
  ],
  cb
  );
});

/* Clean and Pipe .SCSS to Dist Folder */

gulp.task('sass', function(cb) {
  pump([
    gulp.src('src/sass/*.scss'),
    sass().on('error', sass.logError),
    cleanCSS(),
    gulp.dest('dist/css'),
    browserSync.stream()
  ],
  cb
  );
});

gulp.task('sass:watch', function(){
  gulp.watch('src/sass/*.scss', ['sass']);
});

/* Concat, Uglify & Pipe .JS to Dist Folder */

gulp.task('js', function(cb) {
  pump([
    gulp.src('src/js/*.js'),
    concat('main.js'),
    uglify(),
    gulp.dest('dist/js'),
    browserSync.stream()
  ],
  cb
  );
});

/* Minify & Pipe .IMG to Dist Folder */

gulp.task('imagemin', function(cb) {
  pump([
    gulp.src('src/img/*'),
    imagemin(),
    gulp.dest('dist/img'),
    browserSync.stream()
  ],
  cb
  );
});

/* Browser-Sync */

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

gulp.task('watch', function() {

  gulp.watch('./src/sass/*.scss', gulp.series('sass'));
  gulp.watch('./src//js/*.js', gulp.series('js'));
  gulp.watch('./src/*.html', gulp.series('html'));

});

/* RUN DEFAULT - RUN ALL TASKS */

gulp.task('default', gulp.parallel('html', 'sass', 'js', 'imagemin', 'browser-sync', 'watch')); 

我希望一切都能正常运行，但同样，对 .scss 文件进行任何更改后，它们都会发生并保存到 .css 文件中，但更改不会出现在浏览器中。非常感谢任何帮助！

Answer 1

改变这个：

gulp.watch('./src/sass/*.scss', gulp.series('sass'), browserSync.reload);

到：

gulp.watch('./src/sass/*.scss', gulp.series('sass', browserSync.reload));

还有这个：

gulp.task('sass', function(cb) {
   pump([
     gulp.src('src/sass/*.scss'),

     // don't call browserSync.stream() before sass()
     // plus you already have it in your scss watch to reload
     // so either move this to the end - after gulp.dest - and remove it from the watch
     // or remove it from here and leave in the watch

     //  browserSync.stream(),

     sass().on('error', sass.logError),
     cleanCSS(),
     gulp.dest('dist/css')
   ],

   cb;
  );
 });

---

// in your watch task:

gulp.watch("./src/*.html", { events: 'all' }, function(cb) {
    browserSync.reload();
    cb();
  });



gulp.task('html', function(cb) {
  pump([
    gulp.src('src/*.html'),
    gulp.dest('dist'),
    //  browserSync.stream()
  ],
  cb
  );
});