Automated tests Browserify-多个入口点

我正在大口大口地使用Browserify。我也试图将我的测试编译成一个文件。但与我的主应用程序不同，我的主应用程序运行得很好，我在编译测试时遇到了麻烦。主要区别在于测试有多个入口点，没有一个入口点像那个应用程序。但是我在浏览时遇到了错误，因为它找不到入口点

browserify   = require 'browserify'
gulp         = require 'gulp'
source       = require 'vinyl-source-stream'

gulp.task 'tests', ->
    browserify
        entries: ['./app/js/**/*Spec.coffee']
        extensions: ['.coffee']
    .bundle 
        debug: true
    .pipe source('specs.js') 
    .pipe gulp.dest('./specs/')

---

对于start，您可以编写一个suite.js来要求所有要运行的测试，并对它们进行浏览

你可以从我的项目中看到两个例子

grunt mocha phantomjs的一个例子

量角器一例

---

这仅仅是一个开始，我相信还有更多更奇特的方法可用。

下面是我能够构建的一个任务，它似乎解决了这个问题。基本上，我使用外部库将文件名收集为数组。然后将该数组作为入口点传递

'use strict;'

var config = require('../config');
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var glob = require('glob');
var browserify  = require('browserify');
var source = require('vinyl-source-stream');

gulp.task('tests', function(){
  var testFiles = glob.sync('./spec/**/*.js');
  return browserify({
      entries: testFiles,
      extensions: ['.jsx']
    })
    .bundle({debug: true})
    .pipe(source('app.js'))
    .pipe(plumber())
    .pipe(gulp.dest(config.dest.development));
});

---

这里有一个替代配方，它更适合使用gulp.src（）的gulp范式

---

关于如何工作的更多细节，我写的这篇文章更深入：

一个更复杂的示例，通过观察和重建分离的文件，按glob模式将文件构建到多个文件中。不适用于。咖啡，适用于es2015，但差别不大：

var gulp = require("gulp");
var babelify = require("babelify");
var sourcemaps = require("gulp-sourcemaps");
var gutil = require("gulp-util");
var handleErrors = require("../utils/handleErrors.js");
var browserify = require("browserify");
var eventStream = require("event-stream");
var glob = require("glob");
var source = require("vinyl-source-stream");
var buffer = require("vinyl-buffer");
var watchify = require("watchify");

var SRC_PATH = "./src";
var BUILD_PATH = "./build";

var bundle = function (bundler, entryFilepath) {
  console.log(`Build: ${entryFilepath}`);

  return bundler.bundle()
    .on("error", handleErrors)
    .pipe(source(entryFilepath.replace(SRC_PATH, BUILD_PATH)))
    .pipe(buffer())
    .on("error", handleErrors)
    .pipe(
      process.env.TYPE === "development" ?
        sourcemaps.init({loadMaps: true}) :
        gutil.noop()
    )
    .on("error", handleErrors)
    .pipe(
      process.env.TYPE === "development" ?
        sourcemaps.write() :
        gutil.noop()
    )
    .on("error", handleErrors)
    .pipe(gulp.dest("."))
    .on("error", handleErrors);
};

var buildScripts = function (done, watch) {
  glob(`${SRC_PATH}/**/[A-Z]*.js`, function (err, files) {
    if (err) {
      done(err);
    }

    var tasks = files.map(function (entryFilepath) {
      var bundler = browserify({
        entries: [entryFilepath],
        debug: process.env.TYPE === "development",
        plugin: watch ? [watchify] : undefined
      })
        .transform(
          babelify,
          {
            presets: ["es2015"]
          });

      var build = bundle.bind(this, bundler, entryFilepath);

      if (watch) {
        bundler.on("update", build);
      }

      return build();
    });

    return eventStream
      .merge(tasks)
      .on("end", done);
  });
};

gulp.task("scripts-build", function (done) {
  buildScripts(done);
});

gulp.task("scripts-watch", function (done) {
  buildScripts(done, true);
});

---

这里有完整的代码

我知道我可以使用套件，但我尽量避免这样做。为了避免必须记住添加新文件的问题。请注意，这种方法的缺点是您无法在watchify中交换。根据我的经验，随着构建时间越来越长，gulp的本机watch不太适合大编译browserify表单。我同意，对于具有更大构建的项目，您需要一种不同的方法：-一种方法是使用watchify执行小增量构建（但正如你所提到的，BurSeriTe+ActhPixy需要改变配方；我可能会考虑编写一个）。我个人更喜欢的方法是把你的代码库分成包。大多数项目都有应用程序代码和供应商代码（反应、角度等）。我已经警告（写作仍然是原始的）。还请注意，这种方法可能与某些browserify插件不兼容，例如。在这种情况下，您几乎不得不采用Matt的方法。@superEb：嗯，这不完全正确。这种方法直接使用browserify原始库，因此您仍然可以执行转换，并按原计划使用browserify插件。更新的t他回答了更多关于如何使用插件的信息，比如

minifyify

Yes，显然你可以调用

b.plugin（“minifyify”，opts）

在转换中，但当我尝试此操作时，它导致了一个流错误，如

TypeError:Object#没有方法“write”

。转换在没有插件的情况下工作，因此我假设minify和乙烯基转换之间不兼容。

var testFiles=glob.sync（'./spec/***.js'）；

为我做了这件事，而不是使用

glob（path.js+'/**.js'，函数（err，widgetFiles）{…

+1，如果您有一个模式数组，请使用

globs

而不是

glob

：

var gulp = require("gulp");
var babelify = require("babelify");
var sourcemaps = require("gulp-sourcemaps");
var gutil = require("gulp-util");
var handleErrors = require("../utils/handleErrors.js");
var browserify = require("browserify");
var eventStream = require("event-stream");
var glob = require("glob");
var source = require("vinyl-source-stream");
var buffer = require("vinyl-buffer");
var watchify = require("watchify");

var SRC_PATH = "./src";
var BUILD_PATH = "./build";

var bundle = function (bundler, entryFilepath) {
  console.log(`Build: ${entryFilepath}`);

  return bundler.bundle()
    .on("error", handleErrors)
    .pipe(source(entryFilepath.replace(SRC_PATH, BUILD_PATH)))
    .pipe(buffer())
    .on("error", handleErrors)
    .pipe(
      process.env.TYPE === "development" ?
        sourcemaps.init({loadMaps: true}) :
        gutil.noop()
    )
    .on("error", handleErrors)
    .pipe(
      process.env.TYPE === "development" ?
        sourcemaps.write() :
        gutil.noop()
    )
    .on("error", handleErrors)
    .pipe(gulp.dest("."))
    .on("error", handleErrors);
};

var buildScripts = function (done, watch) {
  glob(`${SRC_PATH}/**/[A-Z]*.js`, function (err, files) {
    if (err) {
      done(err);
    }

    var tasks = files.map(function (entryFilepath) {
      var bundler = browserify({
        entries: [entryFilepath],
        debug: process.env.TYPE === "development",
        plugin: watch ? [watchify] : undefined
      })
        .transform(
          babelify,
          {
            presets: ["es2015"]
          });

      var build = bundle.bind(this, bundler, entryFilepath);

      if (watch) {
        bundler.on("update", build);
      }

      return build();
    });

    return eventStream
      .merge(tasks)
      .on("end", done);
  });
};

gulp.task("scripts-build", function (done) {
  buildScripts(done);
});

gulp.task("scripts-watch", function (done) {
  buildScripts(done, true);
});