如何使用gulp-browserify觀看多個文件，但僅處理一個文件？

我試圖連接gulp-browserify和gulp-watch來重建我的包，每次源文件更改。然而，gulp-browserify需要編譯（例如，src/js/app.js）的單一入口點，並獲取每個依賴自身：如何使用gulp-browserify觀看多個文件，但僅處理一個文件？

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，因爲文件是多餘的，這是不必要的。

來源

2014-02-16 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也有批處理操作的好處，所以如果你一次修改幾個文件，你將不會得到一連串的構建。

來源

2014-02-17 01:36:10 OverZealous

只要確保您返回該流！ 'return gulp.src（'src/js/app.js'）...' – rhodesjason

哦，廢話，我怎麼錯過了。謝謝，更新！ – OverZealous

使用更新版本的gulp-watch，您需要使用回撥。（「glob-src/**/*。js」}，函數（files，cb）{gulp.start（「build-js」）{gulp.task（「watch」，function 「，cb）; }）; }）;' – Tony

吞-browserify一直black-listed on the npm-repository

的優選方法是直接在組合使用browserify與乙烯基 - 源極流。

這意味着在構建腳本聲明browserify和乙烯基源流：

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並建立一個新的vendor.js所有依賴的是模塊化和拉成單個vendor.js文件。

來源

2014-04-16 19:20:36

我認爲你的意思是gulpify，而不是gulp-browserify？ – matanster

調整@OverZealous答案的總吞吐newb，這裏是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安裝三個要求，如果尚未安裝：

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

請不要接受這個答案，因爲它是從@OverZealous調整。作爲上述所有方法的替代方法，您可以嘗試https://github.com/substack/watchify（並未親自嘗試），但上述的任務管理器方法也可以爲您調整比例，當您稍後需要額外的內容運行超出browserify時。

來源

2014-04-28 09:49:58 matanster

如何使用gulp-browserify觀看多個文件，但僅處理一個文件？

回答

相關問題