Gulp browsersync注入不工作时吞咽sass

如何使上述代码工作？脚本和html部分工作，但scss部分不工作。当scss文件更改时，样式任务已开始并完成，没有错误，html文件有body标记，但浏览器不会插入新的css文件。

检查此示例，它可能会帮助您对路径进行一些调整：

// variable
// -----------------------------------------------------------------------------

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

// task
// -----------------------------------------------------------------------------


gulp.task('styles', function() {
  return gulp.src([
    './src/assets/styles/*.scss'
  ], {
    base: './src/assets/styles/'
  })
  .pipe(sass().on('error', sass.logError))
  .pipe(gulp.dest('./dist/assets/styles/'))
  .pipe(browserSync.stream());
});

gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: './dist/'
    }
  });

  gulp.watch('./dist/*.html').on('change', browserSync.reload);
  gulp.watch('./src/assets/styles/**/*.scss', ['styles']);
  gulp.watch('./dist/assets/scripts/*.js').on('change', browserSync.reload);
});

---

因此，这可能是从@Syden的答案中获得的重要信息：.pipe（reload（{stream:true}））；或者在您的情况下更改.pipe（browserSync.stream（））；to.pipe（browserSync.reload（{stream:true}））；让我们知道这是否解决了您的问题。

/**
 * This example:
 *  Uses the built-in BrowserSync server for HTML files
 *  Watches & compiles SASS files
 *  Watches & injects CSS files
 */
var browserSync = require('browser-sync');
var reload      = browserSync.reload;
var gulp        = require('gulp');
var sass        = require('gulp-sass');
var filter      = require('gulp-filter');

// Browser-sync task, only cares about compiled CSS
gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./"
        }
    });
});

// Sass task, will run when any SCSS files change.
gulp.task('sass', function () {
    return gulp.src('scss/styles.scss')
        .pipe(sass({includePaths: ['scss']})) // compile sass
        .pipe(gulp.dest('css')) // write to css dir
        .pipe(filter('**/*.css')) // filter the stream to ensure only CSS files passed.
        .pipe(reload({stream:true})); // inject into browsers
});

// Default task to be run with `gulp`
gulp.task('default', ['sass', 'browser-sync'], function () {
    gulp.watch("scss/*.scss", ['sass']);
});