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

1 个答案: