gulp-concat抛出异常'file.isNull（），index.js：39 TypeError：file.isNull不是函数

Question

我试图编译react（.jsx），coffeescript（.coffee）和vanilla javascript（ .js）文件使用gulp将所有生成的.js文件打包到一个文件app.js中，该文件被加载到我的index.html页面中。我正在为每种编译类型生成一个流，并使用merge-stream将3个馈线流的内容收集到一个流中，我将它传递给gulp-concat来创建app.js.

我从gulp-concat，index.js，第39行得到一个异常，让我知道'文件'不是函数。这里是我的整个gulpfile.js，对gulp-concat的引用接近本节的底部。

var browserify = require('browserify'); 
var coffee = require('gulp-coffee'); 
var concat = require('gulp-concat'); 
var gulp = require('gulp'); 
var gutil = require('gulp-util'); 
var mergeStream = require('merge-stream'); 
var reactify = require('reactify'); 
var sass = require('gulp-sass'); 
var source = require('vinyl-source-stream'); 

gulp.task('javascript', function(){ 
    // convert .jsx files to .js, collecting them in a stream 
    var b = browserify(); 
    b.transform(reactify); // use the reactify transform 
    b.add('./jsx-transforms.js'); 
    jsxStream = b.bundle(); 
    if (gutil.isStream(jsxStream)) { 
    gutil.log("jsxStream is a stream"); 
    } else {gulp-concatgulp 
    gutil.log("jsxStream is not a stream"); 
    } 

    merged = mergeStream(jsxStream); 
    if (gutil.isStream(merged)) { 
    gutil.log("merged is a stream"); 
    } else { 
    gutil.log("merged is not a stream"); 
    } 

    // collect all .js files in a stream 
    jsStream = gulp.src(['./client/**/*.js','./common/**/*.js']); 
    if (gutil.isStream(jsStream)) { 
    gutil.log("jsStream is a stream"); 
    } else { 
    gutil.log("jsStream is not a stream"); 
    } 
    merged.add(jsStream); 

    // compile all .coffee file to .js, collect in a stream 
    coffeeStream = gulp.src(['./client/**/*.coffee','./common/**/*.coffee']) 
    .pipe(coffee({bare: true}).on('error', gutil.log)); 
    if (gutil.isStream(coffeeStream)) { 
    gutil.log("coffeeStream is a stream"); 
    } else { 
    gutil.log("coffeeStream is not a stream"); 
    } 
    merged.add(coffeeStream); 

    // concatenate all of the .js files into ./build/app.js 
    merged 
    .pipe(concat('app.js')) 
    .pipe(gulp.dest('./build')); 
}); 

gulp.task('styles', function() { 
    gulp.src('./client/assets/stylesheets/**/*.scss') 
    .pipe(sass().on('error', sass.logError)) 
    .pipe(concat('app.css')) 
    .pipe(gulp.dest('./build')); 
}); 

gulp.task('default', ['javascript', 'styles']); 

我之前使用过gulp-concat，但之前从未遇到过这个问题。

Answer 1

咕嘟咕嘟流是流的非常特定的排序：它们在object mode含有vinyl file objects节点流。如果您的信息流来自gulp.src()以外的其他地方，例如来自browserify API，那么您必须首先将该信息流转换为吞噬能够处理的排序。

您需要采取两个步骤。首先，将您的browserify包流转换为包含vinyl-source-stream（您需要但未使用）的乙烯基文件对象的流。

var source = require('vinyl-source-stream'); 

... 

var jsxStream = b.bundle() 
    .pipe(source('bundle.js')); 

现在还有一个问题。乙烯基流可能处于两种模式之一：streaming mode或buffer mode。乙烯基源码流为您提供流媒体模式下的流媒体。许多Gulp插件（包括gulp-concat）仅支持缓冲模式。解决这个问题很简单：使用vinyl-buffer。

var source = require('vinyl-source-stream'); 
var buffer = require('vinyl-buffer'); 

... 

var jsxStream = b.bundle() 
    .pipe(source('bundle.js')) 
    .pipe(buffer()); 

现在你有东西可以与你的其他流和管道合并到gulp-concat。欲了解更多详情，请致电see this recipe。