web-dev-qa-db-ja.com

gulp-browserifyで複数のファイルを監視し、1つだけを処理するにはどうすればよいですか？

ソースファイルが変更されるたびにバンドルを再構築するために、 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にパイプされますが、これは不要です。

javascriptbrowserifygulp
11
Nikolai Prokoschenko

次のように、ファイル変更時に通常のタスクを呼び出すだけです。

gulp.task("build-js", function() {
    return gulp.src('src/js/app.js')
        .pipe(browserify())
        .pipe(gulp.dest('dist'))
});

gulp.task("watch", function() {
    // calls "build-js" whenever anything changes
    gulp.watch("src/**/*.js", ["build-js"]);
});

gulp-watchを使用する場合（新しいファイルを検索できるため）、次のような操作を行う必要があります。

gulp.task("watch", function() {
    watch({glob: "src/**/*.js"}, function() {
        gulp.start("build-js");
    });
});

gulp-watchを使用すると、バッチ操作の利点もあるため、一度に複数のファイルを変更しても、大量のビルドが連続して取得されることはありません。

26
OverZealous

gulp-browserifyは npm-repositoryにブラックリストに載っています

推奨される方法は、browserifyをビニールソースストリームと直接組み合わせて使用​​することです。

これは、ビルドスクリプトで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を構築します。

8
Ryan Kimber

@OverZealousの答えを完全な一口の初心者に適応させると、ここにgulpfile.jsコード、インライン説明付き。 （このファイルはプロジェクトルートに配置され、その場所から実行されます。下部に詳述されているnpmインストール以外に必要なのはそれだけです）。

var gulp = require('gulp');
var watch = require('gulp-watch');
var browserify = require('gulp-browserify');

//
// task for building - invoked simply via 'gulp'
// 
gulp.task('default', function() {
  return gulp.src('public-script-source/main.js') /* source to build */
        .pipe(browserify())
        .pipe(gulp.dest('public/script'))         /* output directory */
});

//
// task for continuously building upon javascript change - 
// invoked via 'gulp watch'
// 
gulp.task("watch", function() {
    watch({glob: "public-script-source/*.js"}, function() {
        gulp.start("default");
    });
});

まだインストールされていない場合は、npmが3つの要件をインストールすることを忘れないでください。

npm install --save-dev gulp gulp-watch gulp-browserify

@OverZealousから採用されたため、この回答は受け入れないでください。上記のすべての代わりに、 https://github.com/substack/watchify （自分で試していない）を試すこともできますが、上記のようなタスクマネージャーのアプローチも拡張できます後でビルドのためにbrowserify以外の追加のものを実行する必要がある場合に役立ちます。

1
matanster