web-dev-qa-db-ja.com

Browserify-複数のエントリポイント

Gulp内でBrowserifyを使用しています。テストを1つのファイルにコンパイルしようとしています。しかし、正常に動作しているメインアプリとは異なり、テストをコンパイルできません。主な違いは、テストに複数のエントリポイントがあり、そのアプリのような単一のエントリポイントがないことです。しかし、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/')
automated-testsgulpbrowserify
30
Matt

以下は、問題を解決するように思われる、私が構築できたタスクです。基本的に、外部ライブラリを使用して、ファイル名を配列として収集します。そして、その配列をエントリポイントとして渡します

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

これはgulp.src（）を使用してgulpパラダイムにさらに適合する代替レシピです

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-bb359b3f962

19
Hafiz Ismail

まず、suite.jsを記述して、実行するすべてのテストを要求し、それらをブラウザ化することができます。

私のプロジェクト https://github.com/mallim/sbangular から2つの例を見ることができます。

Grunt-mocha-phantomjsの1つの例

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

これはほんの始まりに過ぎません。他にもさまざまな方法があります。

1
Ian Lim

分離されたファイルを監視および再構築しながら、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

0
BigBadAlien