Question

我想设置gulp以便能够做两件事：1）使用watchify来监控文件中的更新并使用browserify在更改时自动重建，以及2）执行ad-hoc构建一次并退出。

＃1似乎工作正常，但我无法让＃2工作。我在终端中键入gulp build，所有内容都捆绑得很好，但gulp不会退出或退出;它只是坐在那里，我没有带回命令行。

我做错了什么？这是整个gulpfile：

'use strict';

var gulp = require('gulp');
var browserify = require('browserify');
var watchify = require('watchify');
var source = require('vinyl-source-stream');
var gutil = require('gulp-util');

var b = watchify(browserify({
  cache: {},
  packageCache: {},
  entries: ['./app/app.js'],
  debug: true,
  transform: ['reactify']
}));

b.on('log', gutil.log);

var bundle = function() {
  return b.bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./dist'));
};

gulp.task('watch', function() {
  b.on('update', bundle);
});

gulp.task('build', function() {
  bundle();
});

gulp.task('default', ['watch', 'build']);

这是我终端的输出：

[11:14:42] Using gulpfile ~/Web Dev/event-calendar/gulpfile.js
[11:14:42] Starting 'build'...
[11:14:42] Finished 'build' after 4.28 ms
[11:14:45] 1657755 bytes written (2.99 seconds)

Gulp在11:14:45的日志后仍在运行，并且没有跳回到终端。

Answer 1

不应该在watchify包装器上调用{p> .bundle()。以下修正了一切：

'use strict';

var gulp = require('gulp');
var browserify = require('browserify');
var watchify = require('watchify');
var source = require('vinyl-source-stream');
var gutil = require('gulp-util');

var b = function() {
  return browserify({
    cache: {},
    packageCache: {},
    entries: ['./app/app.js'],
    debug: true,
    transform: ['reactify']
  });
};

var w = watchify(b());

w.on('log', gutil.log);

var bundle = function(pkg) {
  return pkg.bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./dist'));
};

gulp.task('watch', function() {
  bundle(w);
  w.on('update', bundle.bind(null, w));
});

gulp.task('build', bundle.bind(null, b()));

gulp.task('default', ['watch']);

Gulp不会以watchify，browserify退出

1 个答案: