2

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

我应该补充一点，起初我怀疑乙烯基流错误是问题所在，但我将.pipe(buffer())and添加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)

欢迎任何想法 - 谢谢。

4

2 回答 2

3

请注意删除了多余的括号 - ()。这会将这些返回到它们应该是的引用，而不是 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通常的样子。但是第二个似乎更像是您尝试在那里使用 raw uglify(not 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));
于 2015-10-19T06:57:25.190 回答
0

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

按照错误路径，我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问题（我猜）。

于 2015-10-18T18:51:26.017 回答