使用 gulp-coffeeify + watch，如何在文件修改时重新遍历 coffeeify 所有依赖？

Question

我在项目中使用了 CoffeeScript 以及 Gulp，最近采用了 Browserify 这个模块化方案，对应的 gulp 插件有 gulp-browserify，而 gulp-coffeeify 是 for CoffeeScript 的，但是我在项目中使用 watch 的时候，却发现它监测到文件改动的时候，仅仅是改动该文件，而不是所有与它有依赖关系的文件。举个例子：

gulpfile.js

var MODULARIZE_LIST = [
    'js/www/main.coffee',
    'js/shared/modules/*'
];

var config = {
    assetsDir: 'resource/assets/',
    publicAssetsDir: 'resource/public/assets/'
};
function getModularizedList() {
    var src = [];

    for (i = 0; i < MODULARIZE_LIST.length; i++)
        src.push(config.assetsDir + MODULARIZE_COFFEE_IGONRE_LIST[i]);

    return src;
}

gulp.task('watch:coffeeify', function(){
    var src = getModularizedList();

    return gulp.src(src, {base: config.assetsDir + 'js'})
               .pipe(watch(src, {base: config.assetsDir + 'js'}))
               .pipe(coffeeify().on('error', gutil.log))
               .pipe(gulp.dest(config.publicAssetsDir));
});

main.coffee:

sayHi = require '../shared/modules/sayHi'

sayHi 'Jack'

sayHi.coffee:

module.exports = (name) ->
    console.log "Hi, #{name}"

当我将 sayHi.coffee 中的 Hi 改为 Hello 并保存后，它仅仅会 coffeeify sayHi.coffee，而并不会把依赖它的 main.coffee 也重新打包，所以这个 watch 基本是没有什么作用的，现在每次都需要手动去 coffeeify，很麻烦，不知道有什么办法？

Answer 1

既然被 @JasinYip 点名了就来答一下 2333。

我们现在的方案是直接使用 browserify, coffeeify 和 gulp，而不是 gulp-browserify 这个插件。为了将 browserify 中的文本流转换成 gulp 使用的 vinyl-fs 流，我们需要使用 vinyl-source-stream 插件。

如果想使用 gulp-concat, gulp-uglify 这样的 gulp 插件，则要使用 vinyl-buffer 来对流进行处理。同时如果希望直接对 gulp 使用的 vinyl 流使用纯文本的 transform 函数/插件（比如 map-stream 等）处理的话，则可以引入 vinyl-transform。

至于 watch 模式，我们现在的方案是，使用 gulp-watch（当然在 gulp 4.x 里这个插件已经不必要了），来观察指定目录下文件的增删改，有增加的文件，将其初始化打包(browserify)一次，并添加到 watchify 的观察列表watchers 里。对于删除的文件，将其从 watchers 中移除。

关于这些插件的原理，以及 node.js 的 stream，我最近打算写一篇博客详细写一下，欢迎大家关注大忽悠=_=。

Answer 2

我之前为了增量构建而写了一个反向依赖收集。原理也比较简单，遍历所有模块文件，用正则提取依赖。目前速度还不错，两秒内可以完成 250 多个模块的收集，你可以用缓存提升速度，我为了构建的正确性并没有使用缓存。