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行得到一个例外，让我知道＆＃39; file＆＃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流是一种非常特殊的流：它们是object mode中包含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。乙烯基源流为您提供流式传输模式。许多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。

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

1 个答案: