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。