我的 browserSync 有问题，它没有重新加载我的 sass 文件

Question

我正在尝试让我的 gulp 文件在更改 sass 文件时重新加载。目前我必须在终端中关闭 gulp cmd 并刷新它才能工作。

我在这里错过了什么？

提前致谢！

let gulp = require('gulp');
let sass = require('gulp-sass');
let browserSync = require('browser-sync').create();

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

gulp.task('serve', function () {
    browserSync.init({
        server: {
            baseDir: './app'
        }
    });

    gulp.watch('app/scss/*.scss', ['styles']);
    gulp.watch('app/**/*.html').on('change', browserSync.reload)
});

gulp.task('default', ['styles', 'serve']);

Answer 1

如果您使用 Gulp 4. 使用此代码：

let gulp = require('gulp');
let sass = require('gulp-sass');
let browserSync = require('browser-sync');

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

// watch Sass files for changes, run the Sass preprocessor with the 'sass' task and reload
gulp.task('serve', gulp.series('styles', function() {
  browserSync({
    server: {
      baseDir: './app'
    }
  });

  gulp.watch('app/scss/*.scss', gulp.series('styles'));
  gulp.watch('app/css/*.css', browserSync.reload);
  gulp.watch('app/**/*.html', browserSync.reload);
}));

如果你使用旧的 Gulp:

let gulp = require("gulp");
let sass = require("gulp-sass");
let browserSync = require("browser-sync").create();
let runSequence = require('run-sequence'); // npm install run-sequence --save-dev

gulp.task("styles", function () {
    gulp
      .src("app/scss/*.scss")
      .pipe(sass())
      .pipe(gulp.dest('app/css'))
});

// Static server
gulp.task("serve", function () {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
});


//watch for files changes
gulp.task('watch', ['styles', 'serve'], function () {
    // sass files changes
    gulp.watch('app/scss/*.scss', ['styles']);

    // CSS files changes
    gulp.watch('app/css/*.css', browserSync.reload);

    // html files changes
    ulp.watch('app/**/*.html', browserSync.reload)
});

// The default task (called when you run 'gulp' from cli)
gulp.task('default', function (callback) {
    runSequence(['styles', 'serve', 'watch'],
      callback
    )
})

我的 browserSync 有问题，它没有重新加载我的 sass 文件

There's an issue with my browserSync, it isn't reloading my sass file

javascript

gulp

browser-sync

gulp-watch

gulp-sass