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

Question

我正在尝试在 Gulp 中设置一个带有浏览器同步的项目 4. 当执行我的默认任务时 "gulp"- 浏览器同步会加载并启动一个 chrome 在 local:3000 和我的 "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
  );
});

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

Browser-Sync - changes to .scss not appearing in browser but appearing in .css

npm

sass

gulp

browser-sync

gulp-watch