あるファイルに依存するファイルを返すgulpプラグインgulp-resolve-dependentsを作った

与えられたファイルを参照しているファイル群をパイプラインに流してくれるプラグインgulp-resolve-dependentsを作った。 サンプルはこんな感じ。

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    path = require('path'),
    resolveDependents = require('gulp-resolve-dependents');

 gulp.src('./src/lib/example.scss')
.pipe(resolveDependents({
      files: './src/**/*.scss',
      resolver: sassImportResolver,
      basePath: './src'
}))
.pipe(sass())
.pipe(gulp.dest('./dest/css'));

function sassImportResolver(filePath, fileContents){
  var match, result = [],
      pattern = /import "(.+?)";/mg;
  while((match = pattern.exec(fileContents)) !== null){
    result.push(path.resolve(path.dirname(filePath), match[1]));
  }
  return result;
}

gulp-resolve-dependeciesというプラグインを参考にしたのだが、これはあるファイルが依存しているファイルをパイプラインに流してくれる。

一方gulp-resolve-dependentsは逆方向に依存性を解決する。

例えば以下のような依存関係になっているとする。

sourceがパイプラインから流れてくると、対象となるファイル(dependent)は下の図のようになる。

依存の解決方法自体はこのプラグインを使う人が外から渡すようになっているので、TypeScriptやsassなど任意のプロジェクトに対して使うことができる。

自分はこのプラグインをTypeScriptのコンパイル用に使っていて、gulp-filterと組み合わせて実際にhtmlから読み込まれるTypeScriptファイルのうち、今編集したファイルが影響するものだけをコンパイルするようにしている。