Browsersync流不起作用

Question

Browsersync流不適用於我。

我複製了官方文檔的例子，它不會工作。重新加載html和js文件工作正常。只有sass streaming不起作用。我已閱讀了github上的所有問題，無法找到我的問題的答案。

var gulp = require('gulp'); 
var sass = require('gulp-sass'); 
var browserSync = require('browser-sync'); 
var useref = require('gulp-useref'); 
var uglify = require('gulp-uglify'); 
var gulpIf = require('gulp-if'); 
var cssnano = require('gulp-cssnano'); 
var imagemin = require('gulp-imagemin'); 
var cache = require('gulp-cache'); 
var del = require('del'); 
var runSequence = require('run-sequence'); 

// Development Tasks 
// ----------------- 

gulp.task('serve', ['sass'], function() { 

    browserSync.init({ 
     server: { 
      baseDir: "./app", 
      index: 'index.html' 
     } 
    }); 

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

// Compile sass into CSS & auto-inject into browsers 
gulp.task('sass', function() { 
    return gulp.src('app/styles/*.scss'). // Gets all files ending with .scss in app/scss and children dirs 
    pipe(sass().on('error', sass.logError)). // Passes it through a gulp-sass, log errors to console 
    pipe(gulp.dest('app/css')). // Outputs it in the css folder 
    pipe(browserSync.stream()); 
}) 

// Build Sequences 
// --------------- 

gulp.task('default', function(callback) { 
    runSequence([ 
     'sass', 'serve' 
    ], callback) 
}) 

gulp.task('build', function(callback) { 
    runSequence('clean:dist', 'sass', [ 
     'useref', 'images', 'fonts' 
    ], callback) 
}) 

Answer 1

我會做三個快速更改，看看他們是否有所幫助。第一個

var browserSync = require("browser-sync").create(); 

請注意create（）在最後，你需要。二，簡化這個：

gulp.task('default', function(callback) { 
    runSequence([ 
    'sass', 'serve' 
    ], callback) 
}) 

到：

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

你的 '服務' 的任務調用「Sass的任務首先無論如何，所以你不需要renSequence東西。最後，更改：

pipe(browserSync.stream()); 

到：

pipe(browserSync.relaod({stream:true})); 

我也將使這一變化：（ '應用程序/ JS/**/* JS'）

gulp.watch('app/js/**/*.js').on('change', browserSync.reload(stream:true}));