我正在构建一个相对简单的项目,学习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)
欢迎大家赐教,谢谢。
注意删除了额外的圆括号-()。这会将这些返回到它们应该是的引用,而不是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));
好的,所以这很奇怪-我会发布给任何人评论和/或更新。
按照错误路径,我打开了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
问题在一天结束时(我猜)。