文章/答案/技术大牛

发布

社区首页 >问答首页 >gulp concat抛出异常' file.isNull ()，index.js:39 TypeError: file.isNull不是函数

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

Stack Overflow用户

提问于 2016-02-12 15:44:10

回答 1查看 1.1K关注 0票数 1

我正在尝试编译react (.jsx)、coffeescript (.coffee)和香草javascript ( .js )文件，使用gulp将所有的结果.js文件打包到一个文件app.js中，该文件被加载到我的index.html页面中。我正在为每种编译类型生成一个流，并使用合并流将3个馈线流的内容收集到一个单独的流中，然后将其传递给gulp来创建app.js。

我得到了一个异常的getting，index.js，第39行，让我知道'file‘不是一个函数。这是我的整个gulpfile.js，对gulp的引用接近本节的底部。

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']);

我以前用过吞咽剂，但以前从来没有碰到过这个问题。

node.js

gulp

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-02-12 15:57:56

Gulp是一种非常特殊的流:它们是对象模式中包含乙烯基文件对象的节点流。如果您的流来自gulp.src()以外的其他地方，比如browserify，那么您必须首先将该流转换为gulp可以处理的流。

你需要采取两个步骤。首先，用乙烯基源流将您的浏览器化包流转换为包含乙烯基文件对象的流(这是您所需要的，但没有使用)。

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

...

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

现在还有另一个陷阱。乙烯基流可能有两种模式之一：流模式或缓冲模式。乙烯基源流给你流模式下的流.许多Gulp插件，包括一元化插件，只支持缓冲模式.解决这个问题的方法很简单:使用乙烯基缓冲器。

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

...

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