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

Question

我正在尝试使用 gulp 编译 React (.jsx)、coffeescript (.coffee) 和 vanilla javascript (.js) 文件，将所有生成的 .js 文件打包到一个文件 app.js 中，该文件会被加载进入我的index.html页面。我为每种编译类型生成一个流，并使用 merge-stream 将 3 个馈送流的内容收集到一个流中，我将其传递给 gulp-concat 以创建 app.js。

我从 gulp-concat、index.js 第 39 行收到异常，让我知道"file"不是函数。这是我的整个 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 流是一种非常特殊的流:它们是 object mode 中的 Node 流包含vinyl file objects 。如果您的流来自 gulp.src() 之外的其他地方，例如来自 browserify API，那么您必须首先将流转换为 gulp 可以处理的类型。

您需要执行两个步骤。首先，将 browserify 捆绑流转换为包含乙烯基文件对象的流 vinyl-source-stream (您需要但未使用)。

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

...

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

现在还有另一个问题。乙烯基流可以采用以下两种模式之一:streaming mode或buffer mode 。 Vinyl-source-stream 为您提供流模式下的流。许多 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 .