12

モジュールを browserify にバンドルするための gulp タスクを作成し、watchify を使用して変更を監視しています。これがwatchifyの私のgulpタスクです：

gulp.task('watch:browserify', function () {
    var opts = assign({}, watchify.args, {
        entries: ['./js/app.js'],
        debug: true,
        basedir: './app/',
        paths: ['./lib']
    });

    var b = watchify(browserify(opts));

    b.on('update', function () {
        bundle();
    });

    function bundle() {
        gutil.log(gutil.colors.blue("Starting Browserify..."));
        var time = Date.now();
        return b.bundle()
            .on('error', gutil.log.bind(gutil, gutil.colors.red('Browserify Error')))
            .pipe(source('bundle.js'))
            .pipe(buffer())
            .pipe(sourcemaps.init({loadMaps: true}))
            .pipe(sourcemaps.write('.'))
            .pipe(gulp.dest('app'))
            .on('end', function () {
                var duration = Date.now() - time;
                gutil.log(gutil.colors.blue('Finished Browserify') + " (%dms)", duration);
            })
    }

    bundle();
});

メインの js ファイル (./js/app.js) を編集すると、変更が常に検出されます。しかし、メインファイルに必要な他のファイルを編集すると、ほぼ毎回 (常にではありませんが) 変更が検出されます。ここで何か間違ったことをしていますか？

ここに完全な Github リポジトリがあります。

4

2 に答える 2

1

コード サンプルには 2 つの問題があります。

まず、ここでwatch:browserify説明するように、コールバックを取得するか、ストリームを返す必要があります。そうしないと、競合状態が発生する可能性があります。したがって、たとえば、タスクの最後の行は.return bundle();

第 2 に、watchify を使用する場合、以下に示すように、およびここcacheで指定されているように、packageCacheオプションを に渡す必要があります。browserify()

    var b = browserify({ cache: {}, packageCache: {} });

最後に、app.js実際に依存関係チェーンのどこかで、編集中の他のファイルに依存していることを確認します。

于 2015-10-15T00:19:45.393 に答える