Gulp BrowserSync不能与SCSS一起工作

Question

我用浏览器同步的gulp设置似乎在检测SCSS文件的变化时有问题。对于重新加载和检测SLIM来说，它工作得非常好。吞没有错误。唯一的问题是浏览器同步无法检测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，而不是在整个构建过程管道它，这可以通过将服务任务轻松抽象有其自身的优势和拉入另一个项目自己的手表任务。

希望这会有所帮助。