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

Question

我正在尝试编译反应（.jsx），coffeescript（.coffee）和vanilla javascript（.js）文件，使用gulp将所有生成的.js文件打包到一个文件app.js中，该文件加载到我的index.html页面中。 我正在为每个编译类型生成一个流，并使用合并流将 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

Gulp 流是一种非常特殊的流：它们是对象模式下包含乙烯基文件对象的节点流。如果您的流来自 gulp.src() 以外的其他地方，例如来自浏览器 API，那么您必须先将流转换为 gulp 可以处理的类型。

您需要采取两个步骤。首先，将您的浏览器捆绑流转换为包含带有乙烯基源流的乙烯基文件对象的流（您已要求但未使用）。

var source = require('vinyl-source-stream');
...
var jsxStream = b.bundle()
  .pipe(source('bundle.js'));

现在还有另一个问题。黑胶唱片流可能处于以下两种模式之一：流模式或缓冲区模式。黑胶源流为您提供流模式下的流。许多 Gulp 插件，包括 gulp-concat，只支持缓冲区模式。解决这个问题很简单：使用乙烯基缓冲区。

var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
...
var jsxStream = b.bundle()
  .pipe(source('bundle.js'))
  .pipe(buffer());

现在，您有一些东西可以与其他流合并，并管道进行吞咽连接。有关更多详细信息，请参阅此配方。