gulp-sass 只编译变动文件（增量编译）

项目使用gulp来处理日常构建，但是当样式文件越来越多后如果每次都是全量编译会导致效率及其差，那么就来解决一下吧~

问题：

gulp-sass每次都会全量编译路径下所有*.scss

解决方案：

每次只将变动的文件进行编译，不再全量编译。

---

解决这个问题主要使用gulp-watch插件，github地址、npm地址
我比较喜欢使用gulp-debug查看当前管道输出，很方便，npm地址
接下在就直接贴出代码了，首先看下引入的依赖

const gulp = require('gulp');
const sass = require('gulp-sass');
const watch = require('gulp-watch');
const debug = require('gulp-debug');
const path = require('path');
const join = src => path.join('app', src);

没啥毛病，继续。

gulp.task('watch:different-scss', () => {

  const baseDir = '/public/css_route';
  const scssPath = join(`${baseDir}/*.scss`);

  // ignoreInitial 首次启动不触发文件变动callback
  watch(scssPath, { ignoreInitial: true }, file => {
	// 要注意的是 file 参数类型为 Vinyl file object
	// 获取当前变动文件的文件名
    const basePath = path.basename(file.path);
    const filePath = join(`${baseDir}/${basePath}`);

    gulp.src(filePath)
      .pipe(debug({ title: 'Find Different: ' }))
      .pipe(sass().on('error', sass.logError))
      .pipe(debug({ title: 'Output Different: ' }))
      .pipe(gulp.dest(join('/public/styles')));

  })
  
});

补充说一下，在watch的 callback中返回的参数类型是Vinyl，并不是普通的文件流(stream)。
Vinyl github

# 接下在run task就好啦~
$ gulp watch:different-scss

贴图看下效果：

Ok~完事收工！