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

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还具有批处理操作的好处，因此如果您一次修改多个文件，您将不会连续获得一堆构建。

于 2014-02-17T01:36:10.020 回答
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 回答
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.

于 2014-04-28T09:49:58.920 回答