gulp 构建时出现奇怪的 gulp-uglify minifier 'file.isNull()' 错误

问题描述 投票：0回答：3

我正在构建一个相对简单的项目来学习 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)

欢迎任何想法 - 谢谢。

reactjs gulp minify gulp-uglify
3个回答
3
投票

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

是的，它们是引用，但是是对模块中导出的函数的引用。 

require('./lib/isNull')
返回该模块的导出；导出是一个函数，因此 
isNull
是一个函数。通过删除括号，您现在只需检查 
file.isNull
是否始终为 true。

但是，无论如何，你都看错了东西。这不是 

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()
调用的顺序：您应该将其称为 after 
buffer()
。

browserify(…)
    .bundle()
    .pipe(source(path.MINIFIED_OUT))
    .pipe(buffer())
    .pipe(uglify())
    .on('error', gutil.log)
    .pipe(gulp.dest(path.DEST_BUILD));
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
问题（我猜）。

0
投票

我在使用 rollup-stream 时遇到了这个问题。对我有用的解决方案是添加 

vinyl-buffer
和 
vinyl-source-stream
的用法。所以我的工作任务是这样的：

gulp.task('build', function() {
    return rollup({
            input: 'src/highlightjs-line-numbers.js',
            format: 'iife'
        })
        .pipe(source('highlightjs-line-numbers.js'))
        .pipe(buffer())
        .pipe(uglify())
        .pipe(rename({
            extname: '.min.js'
        }))
        .pipe(gulp.dest('dist'));
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.