browserify 可以要求在 gulp 中生成乙烯基文件吗？

Question

我刚开始使用 gulp 和 browserify，我需要一些帮助来解决这个问题：

我正在使用一个名为 ng-autobootstrap 的库来生成一个 browserify 兼容文件，稍后在主脚本中需要该文件。这是我的 autobootstrap 任务：

gulp.task "autobootstrap", ->
  gulp.src("source/**/*.{coffee,js}",
    read: false
    base: "source"
  )
  .pipe(ngAutoBootstrap(
    moduleTypes:
      animation:
        path: "**/animations/*.{coffee,js}",
      constant:
        path: "**/constants/*.{coffee,js}",
      controller:
        path: "**/controllers/*.{coffee,js}",
      directive:
        path: "**/directives/*.{coffee,js}",
      factory:
        path: "**/factories/*.{coffee,js}",
      filter:
        path: "**/filters/*.{coffee,js}",
      provider:
        path: "**/providers/*.{coffee,js}",
      service:
        path: "**/services/*.{coffee,js}",
      value:
        path: "**/values/*.{coffee,js}",
      # config modules are pulled in like this:
      # app.config(require("./path/to-config"))
      config:
        path: "**/*-config.{coffee,js}"
  ))

如果我添加 .pipe(gulp.dest("./source/"))，它将在 source 目录中创建一个 bootstrap.js 文件，但这并不是我想要的，我宁愿保持该目录干净。据我了解，目前我的内存中有一个黑胶文件，内容如下：

'use strict';

module.exports = function(app) {
    // Controllers
    app.controller('AppController', require('./controllers/app-controller'));
    app.controller('UsersController', require('./controllers/users-controller'));
    // ... and so on
};

假设 source/js/main.js 文件如下所示：

app = angular.module("app");
require("./bootstrap")(app); // this is the file generated by ng-autobootstrap

还有一个创建 build/bundle.js 文件的简单 browserify 任务：

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

gulp.task 'browserify', ->
  browserify('./source/main.js')
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./build/'))

现在，如果我修改autobootstrap先将文件写入光盘，然后运行browserify，这样就可以了，./bootstrap文件将是那里。但是有没有办法避免写入光盘呢？像在 browserify 的搜索树中添加乙烯基文件之类的东西？

Answer 1

使用 b.require to make a file available from outside of the bundle. And in order to use the vinyl streams, that Gulp uses/emits, with Browserify; we make a small inline transform using through2.obj 仅发出内容。

关于使用 b.require 的注意事项是您需要 b.exclude so that module-deps doesn't try to resolve it in the node_modules directories, etc. See issues #908 and #1106 了解更多信息。

var gulp = require('gulp');
var through = require('through2');
var source = require('vinyl-source-stream');
var browserify = require('browserify');

gulp.task('browserify-bundle', function() {
    return browserify('./test/main.js')
        // We need to exclude the required module so `module-deps` doesn't try to resolve it in the `node_modules` directories, etc
        // Suggested here: https://github.com/substack/node-browserify/issues/908#issuecomment-74909062
        //      See also: https://github.com/substack/node-browserify/issues/1106
        .exclude('some-func')
        // Then add in the module to the bundle
        .require(
            gulp.src('./test/hidden-some-func.js')
                // Any plugins here....
                // .pipe(ngAutoBootstrap(..)
                //
                // Then convert it to a object stream with only the `contents` for browserify to consume
                .pipe(through.obj(function(chunk, env, cb) {
                    if (chunk.isStream()) {
                        self.emit('error', new gutil.PluginError(PLUGIN_NAME, 'Cannot operate on stream'));
                    }
                    else if (chunk.isBuffer()) {
                        this.push(chunk.contents);
                    }

                    // "call callback when the transform operation is complete."
                    cb();
                })),
            {
                // Dependency name to inject
                expose: 'some-func',
                // So that relative requires will be resolvable
                basedir: './test/'
            }
        )
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('dest'));
});

browserify 可以要求在 gulp 中生成乙烯基文件吗？

Can browserify require a vinyl file generated in gulp?

javascript

commonjs

angularjs

browserify

gulp