Browserify - несколько точек входа

Ответ 1

Ниже приведена задача, которую я смог построить, которая, похоже, решает проблему. В основном я использую внешнюю библиотеку для сбора имен файлов в виде массива. И затем передайте этот массив в качестве точек входа

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

Ответ 2

Здесь альтернативный рецепт, который больше подходит для парадигмы gulp, используя gulp.src()

var gulp = require('gulp');
var browserify = require('browserify');
var transform = require('vinyl-transform');
var concat = require('gulp-concat');

gulp.task('browserify', function () {

  // use `vinyl-transform` to wrap around the regular ReadableStream returned by b.bundle();
  // so that we can use it down a vinyl pipeline as a vinyl file object.
  // `vinyl-transform` takes care of creating both streaming and buffered vinyl file objects.
  var browserified = transform(function(filename) {
    var b = browserify(filename, {
      debug: true,
      extensions: ['.coffee']
    });
    // you can now further configure/manipulate your bundle
    // you can perform transforms, for e.g.: 'coffeeify'
    // b.transform('coffeeify');
    // or even use browserify plugins, for e.g. 'minifyiy'
    // b.plugins('minifyify');
    // consult browserify documentation at: https://github.com/substack/node-browserify#methods for more available APIs
    return b.bundle();
  });

  return gulp.src(['./app/js/**/*Spec.coffee'])
    .pipe(browserified)/
    .pipe(concat('spec.js'))
    .pipe(gulp.dest('./specs'));
});

gulp.task('default', ['browserify']);

Подробнее о том, как эта работа, эта статья, которую я написал, более углублена: http://medium.com/@sogko/gulp-browserify-the-gulp-y-way-bb359b3f9623

Ответ 3

Для начала вы можете написать suite.js, чтобы потребовать все те тесты, которые вы хотите запустить, и прорежировать их.

Вы можете увидеть два примера из моего проекта https://github.com/mallim/sbangular.

Один пример для grunt-mocha-phantomjs

https://github.com/mallim/sbangular/blob/master/src/main/resources/js/suite.js

Один пример для транспортира

https://github.com/mallim/sbangular/blob/master/src/main/resources/js/suite.js

Это только начало, и я уверен, что есть более интересные способы.

Ответ 4

Немного более сложный пример для создания файлов по шаблону glob во многие файлы с просмотром и переделкой разделенных файлов. Не для. Coffee, для 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);
});

Полный код здесь https://github.com/BigBadAlien/browserify-multy-build