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~完事收工！