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

Question

我试图在我保存对我的 *.scss 文件的更改后浏览器同步 window 重新加载。

当我保存 *.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']);

Answer 1

问题是我需要调用 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());
});

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

Browser-sync not reloading after SASS compiling

javascript

gulp

gulp-sass

browser-sync