奇怪的 gulp-uglify 简化器 'file.isNull()' gulp 构建错误

Question

我正在构建一个相对简单的项目，学习React w/Flux。我正在使用(或尝试使用)Gulp创建一个自动构建，其中包含Browserify、Reactify、Streamify和Uglify，所有这些都是通过npm安装的。整个流程都在工作，我做了一些文件更改，重新构建，现在当我运行构建时，它正在踢出错误。即使在恢复更改并返回到原始的、先前的工作状态之后。我怀疑可能某个地方发生了权限更改，但我自己没有这样做，所以我不确定如何进一步诊断(也不确定问题是否存在)。

我应该补充说，一开始我怀疑黑胶流错误是问题所在，但我将.pipe(buffer())和vinyl-buffer添加到构建流中，然而它并没有改变错误。

杯:

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var htmlreplace = require('gulp-html-replace');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var browserify = require('browserify');
var watchify = require('watchify');
var reactify = require('reactify');
var streamify = require('gulp-streamify');
var gutil = require('gulp-util');
var path = {
    HTML: 'app/index.html',
    MINIFIED_OUT: 'build.min.js',
    OUT: 'build.js',
    DEST: 'dist',
    DEST_BUILD: 'dist/build',
    DEST_SRC: 'dist/src',
    ENTRY_POINT: './app/App.js'
};
gulp.task('build', function(){
    browserify({
        entries: [path.ENTRY_POINT],
        transform: [reactify]
    })
        .bundle()
        .pipe(uglify().on('error', gutil.log))
        .pipe(source(path.MINIFIED_OUT))
        .pipe(buffer())
        .pipe(streamify(uglify(path.MINIFIED_OUT)))
        .pipe(gulp.dest(path.DEST_BUILD));
});
gulp.task('replaceHTML', function(){
    gulp.src(path.HTML)
        .pipe(htmlreplace({
            'js': 'build/' + path.MINIFIED_OUT
        }))
        .pipe(gulp.dest(path.DEST));
});
gulp.task('production', ['replaceHTML', 'build']);

错误如下:

[09:54:33] Using gulpfile /Library/WebServer/Documents/lldb/gulpfile.js
[09:54:33] Starting 'replaceHTML'...
[09:54:33] Finished 'replaceHTML' after 8.3 ms
[09:54:33] Starting 'build'...
[09:54:33] Finished 'build' after 27 ms
[09:54:33] Starting 'production'...
[09:54:33] Finished 'production' after 7.07 μs
/Library/WebServer/Documents/lldb/node_modules/gulp-uglify/minifier.js:67
    if (file.isNull()) {
             ^
TypeError: file.isNull is not a function
    at DestroyableTransform.minify [as _transform] (/Library/WebServer    /Documents/lldb/node_modules/gulp-uglify/minifier.js:67:14)
    at DestroyableTransform.Transform._read (/Library/WebServer/Documents/lldb/node_modules/gulp-uglify/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:172:10)
    at DestroyableTransform.Transform._write (/Library/WebServer/Documents/lldb/node_modules/gulp-uglify/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:160:12)
    at doWrite (/Library/WebServer/Documents/lldb/node_modules/gulp-uglify/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:326:12)
    at writeOrBuffer (/Library/WebServer/Documents/lldb/node_modules/gulp-uglify/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:312:5)
    at DestroyableTransform.Writable.write (/Library/WebServer/Documents/lldb/node_modules/gulp-uglify/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:239:11)
    at Readable.ondata (/Library/WebServer/Documents/lldb/node_modules/browserify/node_modules/read-only-stream/node_modules/readable-stream/lib/_stream_readable.js:572:20)
    at emitOne (events.js:77:13)
    at Readable.emit (events.js:169:7)
    at readableAddChunk (/Library/WebServer/Documents/lldb/node_modules/browserify/node_modules/read-only-stream/node_modules/readable-stream/lib/_stream_readable.js:195:16)

欢迎大家赐教，谢谢。

Answer 1

注意删除了额外的圆括号-()。这会将这些返回到它们应该是的引用，而不是js试图调用的函数。在我的代码运行和停止运行之间，额外的()是如何被写入isNull和isStream的，这是任何人的猜测(并且有点担心)-我没有做这些更改。

它们是引用，是的，但是是对模块中导出的函数的引用。require('./lib/isNull')返回该模块的导出;导出是一个函数，所以isNull是一个函数。通过删除括号，您现在只检查file.isNull是否总是为真。

但是，不管怎样，你看错了东西。这不是file的来源。file作为参数传递给minify函数。因此，file是一个应该具有isNull和isStream方法的对象。

minify函数是用through2调用的，所以如果你的gulp文件失败了，那么很可能意味着你做错了什么，可能是顺序。不幸的是，大多数时候错误消息并没有真正的帮助。

查看您的gulpfile时，我注意到您有两个对uglify的调用:

.pipe(uglify().on('error', gutil.log))
…
.pipe(streamify(uglify(path.MINIFIED_OUT)))

第一个看起来很好，是gulp-uglify通常看起来的样子。但第二个似乎更像是您试图在那里使用原始uglify(而不是gulp-uglify)。这似乎不是一个好主意，因为uglify引用gulp-uglify，它无论如何都不会工作。所以最好把那行删掉

我还建议您查看有关如何使用browserify和uglify并修复uglify()调用顺序的官方建议:您应该在 buffer()之后调用。

browserify(…)
    .bundle()
    .pipe(source(path.MINIFIED_OUT))
    .pipe(buffer())
    .pipe(uglify())
    .on('error', gutil.log)
    .pipe(gulp.dest(path.DEST_BUILD));

Answer 2

好的，所以这很奇怪-我会发布给任何人评论和/或更新。

按照错误路径，我打开了gulp-uglify下的minifier.js文件。第67行(参考上面的error)显示:

if (file.isNull()) {
      return callback(null, file);
    }
    if (file.isStream()) {
      return callback(createError(file, 'Streaming not supported'));
    }

问题是isNull和isStream不是函数——它们是引用。因此代码需要更改为:

if (file.isNull) {
      return callback(null, file);
    }
    if (file.isStream) {
      return callback(createError(file, 'Streaming not supported'));
    }

注意去掉了额外的圆括号- ()。这会将这些返回到它们应该是的引用，而不是js试图调用的函数。在我的代码运行和停止运行之间，额外的()如何被写入isNull和isStream是任何人的猜测(并且有点担心)-我没有做这些更改。

对于任何感兴趣的人，完整的路径解释如下。

---

isNull和isStream的引用在index.js中:

module.exports = {
  ...
  isStream: require('./lib/isStream'),
  isBuffer: require('./lib/isBuffer'),
  isNull: require('./lib/isNull'),
  ...
};

指gulp-uglify -> node_modules -> gulp-util -> lib -> isNull.js (& isStream.js)下的这个函数，如下所示:

module.exports = function(v) {
  return v === null;
};

所以-删除函数调用方括号()在minifier.js使正确的引用和gulp构建运行没有错误。

看起来像gulp-uglify问题在一天结束时(我猜)。