如何使用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观看多个文件，但仅处理一个文件？

回答

相关问题