6

我想将 gulp 设置为能够做两件事：1）使用 watchify 监视文件中的更新并使用 browserify 自动重建更改，以及 2）执行一次临时构建并退出。

#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 的日志之后仍在运行，并且不会跳回终端。

4

1 回答 1

6

.bundle()不应在 watchify 包装器上调用。以下修复了一切：

'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']);
于 2015-07-30T03:26:48.527 回答