gulp+browsersync+sass 实现只编译修改的scss文件，并实时刷新

Question

// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {

  browserSync.init({
    server: "./app"
  });

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

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
  return gulp.src("app/scss/*.scss")
    .pipe(sass())
    .pipe(autoprefixer({
      browsers: ['> 5%'],
      cascade: true, //是否美化属性值 默认：true 像这样：
      //-webkit-transform: rotate(45deg);
      //        transform: rotate(45deg);
      remove:true //是否去掉不必要的前缀 默认：true
    }))
    .pipe(base64())
    .pipe(gulp.dest("app/css"))
    .pipe(browserSync.reload({stream:true}));
});

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

我现在的配置如上，当修改一个scss文件后，会编译所有scss文件，
我想实现只编译修改过的scss文件，然后还能自动刷新浏览器，改如何配置？

Answer 1

看看这个插件gulp-changed

Answer 2

去看browser-sync的文档，关于和sass结合的那部分。它明确的说了如何将变化的sass文件注入网页，注入的方式刚好就不会刷新页面啦~这符合你的无刷新。不过它只会编译你变化的sass文件，通过监控你文件的变化。完全就是你想要的啦~enjoy