Browsersync 流不工作

Question

Browsersync 流对我不起作用。

我从官方文档中复制了示例，但它不起作用。重新加载 html 和 js 文件工作正常。只有 sass 流是行不通的。我已经阅读了 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

我会做三个快速更改，看看它们是否有帮助。首先

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

注意最后的 create()，你需要它。其次，简化一下：

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

到：

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

无论如何，您的“服务”任务首先调用“萨斯”任务，因此您不需要 renSequence 的东西。最后，改变：

pipe(browserSync.stream());

到：

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

我也会做出这样的改变：

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