每次源文件发生更改时,我都会尝试连接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
的次数与文件一样多,这是不必要的。 / p>
答案 0 :(得分:26)
只需调用文件更改的正常任务,如下所示:
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
也有批处理操作的好处,因此如果您一次修改多个文件,则不会连续获得一堆构建。
答案 1 :(得分:8)
gulp-browserify已经black-listed on the 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文件。
答案 2 :(得分:1)
将@OverZealous答案改为总gulp 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
。