SASS編譯後無法重新加載瀏覽器同步

Question

我試圖在保存對我的*.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']); 

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()); 
});