将 javascript 库添加到 angular-brunch-seed答案

【问题标题】：Add a javascript library to angular-brunch-seed将 javascript 库添加到 angular-brunch-seed
【发布时间】：2013-04-04 18:27:56
【问题描述】：

我在我的电脑上克隆了 angular-bunch-seed https://github.com/scotch/angular-brunch-seed

并且我想将微风js添加到我的项目中 http://learn.breezejs.com/

我将微风库复制到我的供应商文件夹 /vendor/breeze/

然后我将 config.coffee 文件更改如下：

exports.config =
  # See docs at http://brunch.readthedocs.org/en/latest/config.html.
  conventions:
    ignored: /(^vendor\/.*\.less$)|(^|\/)node_modules\/|(^|\/)_/
    assets: /^app\/assets\//
  modules:
    definition: false
    wrapper: false
  paths:
    public: '_public'
  files:
    javascripts:
      joinTo:
        'js/app.js': /^app/
        'js/vendor.js': /^vendor/
        'test/scenarios.js': /^test(\/|\\)e2e/
      order:
        before: [
          'vendor/console-polyfill/index.js'
          'vendor/jquery/jquery.js'
          'vendor/breeze/breeze.debug.js'
          'vendor/breeze/q.js'
          'vendor/angular/angular.js'
          'vendor/angular-resource/angular-resource.js'
          'vendor/angular-cookies/angular-cookies.js'
          'vendor/angular-sanitize/angular-sanitize.js'
          'vendor/bootstrap/docs/assets/js/bootstrap.js'
        ]

    stylesheets:
      joinTo:
        'css/app.css': /^(app|vendor)/
      order:
        before: [
          'app/styles/app.less'
        ]

    templates:
      joinTo: 
        'js/dontUseMe' : /^app/ # dirty hack for Jade compiling.

  plugins:
    jade:
      pretty: yes # Adds pretty-indentation whitespaces to output (false by default)
    jade_angular:
      modules_folder: 'partials'
      locals: {}

    bower:
      extend:
        "bootstrap" : 'vendor/bootstrap/docs/assets/js/bootstrap.js'
        "angular-mocks": []
        "styles": []
      asserts:
        "img" : /bootstrap(\\|\/)img/
        "font": /font-awesome(\\|\/)font/


  # Enable or disable minifying of result js / css files.
  # minify: true

当我执行早午餐构建时，检查 vendor.js 文件.. 不包括微风库！我错过了什么？

PS：当我从构建文件中删除 angular.js 时，它已被正确删除。

【问题讨论】：

标签： javascript build breeze brunch

【解决方案1】：

嗯，答案有简单和复杂的子部分。

简单的部分：为什么它不起作用。 angular-brunch-seed 使用 bower-brunch 包，它在内部检查供应商库中的 component.json 文件。这意味着如果您没有使用bower 下载库，或者将所需的component.json 放在库的根目录（并在根目录中提及 component.json），它不会被识别为适当的供应商库，并在 config.coffee 的 joinTo 正则表达式中被忽略。

config.coffee 文件的 order 部分仅管理您的库在生成的 vendor.js 文件中的放置顺序；如果该库事先被忽略，则订单行没有影响。

棘手的部分：轻松进入您的供应商库。干净的方法应该是使用 bower 下载它。问题是，正如您可能已经猜到的那样，到目前为止，还没有凉亭包供您使用。

[victor@M]<~> bower search breeze
No results
[victor@M]<~> bower search | \grep breeze
No results

这意味着您必须自己创建它。正如bower docs 中所解释的那样，您必须以某个名称（例如, bower-breeze) 并使用 bower register 将其注册到 bower。看看angular guys did 的内容，以获得灵感。您还必须在该存储库中包含 semver 标记以匹配基本库的版本。或者，您可以在微风的 github 上打开一个问题，并要求将 component.json 包含在他们的存储库中（或者更好的是，编写它并提交一个拉取请求）。

最后，您可以尝试在您的供应商目录中编写 component.json 并检查它是否仍然被忽略，但我没有测试。可以工作（但这是一个 hack）也许你必须至少在 angular-brunch-seed 的根 component.json 中添加提及它（带有版本信息）

总而言之，angular-brunch-seed 是一头棘手的野兽......

【讨论】：

【解决方案2】：

我遵循了您的建议并向 Breeze 团队发送了拉取请求。拉取请求被接受后，如果他们还没有完成，我将把回购交给凉亭。

现在我在 ./vendor/breeze 文件夹中创建了一个 component.json 文件

{
  "name": "breeze",
  "version": "1.2.9",
  "main": "./breeze.debug.js",
  "dependencies": {},
  "gitHead": "0b0891a13d0023bbfdf91785bd99ac5a416bf9c7",
  "_id": "BreezeS@1.2.9",
  "readme": "ERROR: No README.md file found!",
  "description": "ERROR: No README.md file found!",
  "repository": {
    "type": "git",
    "url": "git://github.com/IdeaBlade/Breeze.git"
  }
}

gitHead 是随机的.. 但无论如何，当我运行 brunch build 时，我终于可以看到 vendor.js 中包含微风！非常感谢

【讨论】：