javascript - SASS编译后未重新加载浏览器同步

我试图做到这一点，以便将更改保存到重新加载浏览器同步窗口的*.scss文件之后。

当我保存*.html文件时，它当前工作正常，但是我不确定如何使它适用于SASS文件。

这是我的gulp文件。

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

// config
var config = {
    sassInput: 'sass/',
    sassOutput: 'src/css/',
    publicRoot: 'src/',
}

// Compile Our Sass
gulp.task('sass', function() {
    return gulp.src(config.sassInput + '*.scss')
        .pipe(sass())
        .pipe(gulp.dest(config.sassOutput))
        .pipe(browserSync.reload);
});

// vendor prefixes
gulp.task('prefix', function () {
    return gulp.src(config.sassOutput)
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest(config.publicRoot));
});

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

// Watch Files For Changes
gulp.task('watch', function() {
    gulp.watch(config.sassInput + '*.scss', ['sass'], browserSync.reload);
    gulp.watch(config.publicRoot + '*.html', browserSync.reload);
});

// Default Task
gulp.task('default', ['sass', 'prefix', 'browser-sync', 'watch']);

最佳答案

问题是我需要调用stream（）。

这是工作功能：

gulp.task('sass', function () {
    return gulp.src(config.sassInput + '*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(config.sassOutput))
        .pipe(browserSync.stream());
});