11

ソースファイルが変更されるたびに、バンドルを接続して再構築しようとしてgulp-browserifyいます。gulp-watchただし、gulp-browserifyコンパイルには単一のエントリ ポイントが必要であり (例: src/js/app.js)、すべての依存関係自体をフェッチします。

gulp.src('src/js/app.js')
    .pipe(browserify())
    .pipe(gulp.dest('dist'))

ただし、gulp-watchエントリ ポイント ファイルのみが監視されているため、変更のたびに再構築に失敗します。私が実際に必要としているのは、複数のファイルを監視し、エントリ ポイント ファイルのみを処理する可能性です (を探しますreplaceEverythingWithEntryPointFile)。

gulp.src("src/**/*.js")
    .pipe(watch())
    .pipe(replaceEverythingWithEntryPointFile()) // <- This is what I need
    .pipe(browserify())
    .pipe(gulp.dest("dist"));

問題はgulp-browserify、エントリ ポイント ファイルを指定して、ソース ファイルの変更時に再構築をトリガーするにはどうすればよいかということです。ソリューションにスロットリングが含まれているとよいでしょう。起動時に、すべてのソース ファイルが監視用に設定されているため、エントリ ポイント ファイルがファイルgulp-browserifyの数だけパイプされますが、これは不要です。

4

3 に答える 3

8

gulp-browserify はnpm-repository でブラックリストに登録されています

推奨される方法は、browserify を直接 vinyl-source-stream と組み合わせて使用​​することです。

これは、ビルド スクリプトで browserify と vinyl-source-stream を宣言することを意味します。

var browserify = require('browserify'),
    source = require('vinyl-source-stream');

そして、それらを関数で利用して、結合された JS ファイルを作成します。

function buildVendorJs()
{ 
    return browserify('./js/vendor.js')
        .bundle()
        .pipe(source('./js/vendor.js'))
        .pipe(debug({verbose: true}))
        .pipe(gulp.dest(outputDir));
}

これが完了すると、browserify は vendor.js の requires('...') 呼び出しを使用して依存関係ツリーを作成し、すべての依存関係がモジュール化されて単一の vendor.js ファイルに取り込まれる新しい vendor.js を構築します。

于 2014-04-16T19:20:36.710 に答える