Question

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

我应该补充一点，起初我怀疑乙烯基流错误是问题所在，但我将.pipe(buffer())和vinyl-buffer添加到构建流程中，但它没有改变错误。

这是gulp：

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试图调用的函数。在我的代码运行和停止运行之间，extra（）被写入isNull和isStream的方式是任何人的猜测（并且有点担心） - 我没有做出这些改变。

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

但是，无论如何，你正在看错误的事情。这不是file来自的地方。 file作为参数传递给minify函数。所以file是一个应该有isNull和isStream方法的对象。

使用through2调用minify函数，因此如果您的gulp文件失败，那么这可能意味着您做错了，可能是订单。不幸的是，错误信息在大多数情况下都没有用处。

在查看你的gulp文件时，我注意到你有两次拨打uglify：

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

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

我还建议您查看有关如何将浏览器化与uglify一起使用的official recommendation并修正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

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

按照错误路径，我在minifier.js下打开了gulp-uglify文件。第67行（上面的参考错误）显示了这一点：

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问题（我猜）。

gulp build上的gulp-uglify minifier'file.isNull（）'错误

2 个答案: