Gulp BrowserSync 不适用于 SCSS

Question

我使用 browsersync 的 gulp 设置在检测 SCSS 文件的更改时似乎存在问题。它非常适合带有重新加载和检测的 SLIM。吞咽没有错误。唯一的问题是 browsersync 无法检测 SCSS 文件中的更改并重新加载或注入更改。

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    slim = require('gulp-slim'),
    autoprefix = require('gulp-autoprefixer'),
    notify = require('gulp-notify'),
    bower = require('gulp-bower'),
    image = require('gulp-image'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    browserSync = require('browser-sync').create();

var config = {
    sassPath: './source/sass',
    slimPath: './source/slim',
    bowerDir: './bower_components',
    jsPath: './source/js'
}

gulp.task('bower', function() {
    return bower()
      .pipe(gulp.dest(config.bowerDir))
});

gulp.task('js', function() {
    return gulp.src('./source/js/**/*.js')
      .pipe(concat('script.js'))
      .pipe(gulp.dest('./dist/js'));
});

gulp.task('icons', function() {
    return gulp.src(config.bowerDir + '/font-awesome/fonts/**.*')
      .pipe(gulp.dest('./dist/fonts'));
});

gulp.task('image', function () {
    gulp.src('./source/images/*')
      .pipe(image())
      .pipe(gulp.dest('./dist/images'));
} );

gulp.task('css', function() {
    return sass('./source/scss/**/*.scss', {
            style: 'compressed',
            loadPath: [
              './source/scss',
              config.bowerDir + '/bootstrap/scss',
              config.bowerDir + '/font-awesome/scss',
            ]
    }).on("error", notify.onError(function (error) {
            return "Error: " + error.message;
          }))
      .pipe(gulp.dest('./dist/css'))
      .pipe(browserSync.stream());
});

gulp.task('html', function() {
    gulp.src('./source/slim/**/*.slim')
      .pipe(slim({
        pretty: true
      }))
      .pipe(gulp.dest('./dist/'));
});

gulp.task('serve', ['css', 'html', 'js'], function() {
  browserSync.init({
    injectChanges: true,
    server: "./dist"
  });
  gulp.watch(config.sassPath + '/**/*.scss', ['css']);
  gulp.watch(config.slimPath + '/**/*.slim', ['html']).on('change', browserSync.reload);;
});



gulp.task('default', ['bower','js', 'icons', 'css', 'html', 'image', 'serve']);
gulp.task('build',['bower', 'js', 'icons', 'css', 'html', 'image'] );

Answer 1

这可能不是您正在寻找的答案，但它是我一直在使用的解决方法，因为我使用browserSync.stream() 遇到了类似的问题，但没有持续触发。

'use strict';

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

gulp.task('serve',function(){
    browserSync.init({
        server: {
            baseDir: './dev/'
        },
        files: ['./dev/**/*.html',
                './dev/css/**/*.css',
                './dev/js/**/*.js',
                './dev/img/**/*.*'],
        notify: false
    });
});

如您所见，这使用 browserSyncs 自己的 watch 任务，而不是在整个构建过程中通过管道传输它，这可以通过将服务任务轻松抽象并拉入另一个项目而具有自己的优势。

希望这会有所帮助。