问题标签 [broccolijs]

我正在为当前的 ember 项目使用ember-cli，我使用启动服务器，broccoli serve但是 livereload 不起作用，每次进行更改时我都需要刷新页面。将 livereload 与 ember-cli 和 broccoli 一起使用的正确方法是什么？

我正在尝试让 broccolijs 使用 broccoli-less 编译更少文件的目录。我已将“预处理”功能更改如下：

在我的项目文件夹中，我有一个名为“less”的目录，我将其包含在 Brocfile.js 中：

尝试构建此项目会产生错误：

我正在使用 ember-cli 0.0.28，它依赖于 BroccoliJS 为我的前端应用程序构建可分发源。我遇到的问题是，每当我（重新）构建时，我都需要将 index.html 文件复制（或移动）到我为应用程序提供服务的后端模板目录中。

我不知道如何在构建完成后配置 ember-cli 项目目录中的 Brocfile.js 来执行此操作。

我暂时使用了一个符号链接，它可以工作，但在前端应用程序使用ember build. 我认为可以使用grunt-broccoli将构建作为 grunt 任务运行？！我不知道这是否是前进的方向。

使用 broccoli-file-mover 很简单，但它适用于当前的树，而不是未来的树！

感谢所有帮助。

使用broccoli-compass插件时，我无法将 CSS 库添加到我的 Ember CLI 项目。

我已将此行添加到我的 brocfile 中：

但现在我被困住了。我试过了

但这不起作用，因为（我认为）我已经覆盖了app.styles.

我已经尝试importPath在我的 Compass 配置中添加一个，以便我可以@import在我的 SASS 文件中，但这也没有奏效。

我希望能够在ember-cli项目中使用 compass 将我的 SASS 预处理为 CSS。

这样做broccoli-sass是微不足道的，因为bower install broccoli-sass已经内置了对它的支持。

然而，这样做broccoli-compass是相当棘手的......如何？

细节：

之前已针对 ember-cli v0.0.23提出过这个问题；它的答案似乎已经过时 - 主要问题似乎是 ember-cli 抽象了很多东西，并使用 aBrocfile.js将其放入另一个文件中，因此解决方案与标准外观不同preprocessor.jsRegistryBrocfile.js

更新：

@saygun 已经回答了这个问题，该解决方案允许使用 broccoli-compass 编译 SCSS --> CSS。但是有几点需要注意：

• 小问题：minifyCssmeber-cli 中现有的预处理器将不起作用。您需要配置 compass 来缩小它自己的 CSS。
• 主要问题：如果 SCSS 文件引用图像，则生成的 CSS 文件包含指向图像的链接，其中路径位于 Broccoli 创建的临时树文件夹中。我不知道如何解决这个问题，并提出了一个后续问题：如何使用指南针在 ember-cli 中生成图像精灵？

更新- 20140614：

在没有得到这个问题的任何答案之后，或者在 github 上，我决定想出我自己的解决方案来解决这个问题。我在很多事情上都使用了指南针，但它的主要用途在于它能够生成图像精灵。大多数其他事情都可以使用纯 SCSS 来完成。

因此，我写了broccoli-sprite。这与 ember-cli 使用broccoli-sass对 SCSS 的内置支持结合使用，能够满足我的需求。

您可以在此处阅读有关该过程的更多信息。

因此，现在我不再有兴趣将 compass 集成到我的 ember-cli 应用程序中。由于我的解决方案没有直接回答这个问题（因为它不使用指南针），我认为这个问题是 unanswered。由于这个问题可能会使社区中希望这样做的其他人受益，因此我将保持开放状态，并且仍然会尊重赏金！

更新- 20140620：

赏金已过期。

原始问题：

在ember-cli应用程序中，使用broccoli-compass，如何配置它以使生成的 CSS 正确引用图像文件路径，包括生成的图像文件路径？

使用指南针，以下 SCSS：

... 将生成一个包含文件夹.png中所有图像的单个文件icon，以及用于显示每个图像的 CSS。

我希望能够通过 ember-cli 中的 compass 来做同样的事情，它使用broccoli 来构建它的资产管道。

• 必须在 ember-cli 中工作 - 也就是说，它必须在 ember serve 或 ember build 运行时构建
• 必须使用指南针从图像文件夹中生成图像精灵
• 生成的图像应复制到 assets 文件夹
• 生成的 CSS 应指向位于 assets 文件夹中的图像，而不是临时树文件夹

到目前为止我所做的尝试：

#1

当我这样做时，该compass命令将失败，因为它无法在树中找到图像文件。

#2

只是为了尝试一下，我将图像文件复制到样式目录中。这次 compass 命令成功了，但是生成的 CSS 引用了不存在的图像文件。生成的图像似乎没有按预期复制到资产文件夹中（或其他任何地方）：

详情：

我希望能够编译的 SCSS（用于精灵生成）：

不确定如何为 Stylus CSS 预处理器设置选项。对所有文件的搜索揭示了这一点：

node_modules/broccoli-stylus-single/node_modules/.bin/stylus [98]: node_modules/broccoli-stylus-single/node_modules/stylus/bin/stylus [98]:

有谁知道在 Ember-CLI 框架/Broccoli 构建系统中将此选项设置为“true”的正确/首选方法？

非常感谢！

我收到此错误，无法找到任何解决方法。它在尝试执行时发生broccoli build。

我刚刚安装了sudo npm install -g broccoli和sudo npm install -g broccoli-cli. broccoli可执行文件很好，obv ：

所以看起来是没有正确安装broccoli模块，虽然安装过程中没有出现错误。

有任何想法吗？

当我跑ember build时，西兰花插件正确运行，并将精灵 CSS 文件和精灵 PNG 文件输出到 assets 目录中。

当我跑步ember serve时，最初也会发生同样的事情。但是，当我保存任何文件时，导致 Broccoli 重建其树，精灵 CSS 和 PNG 文件不再合并到主应用程序树中，并且当页面从实时重新加载刷新时，页面不再显示精灵图像。

• 为什么会这样？
• 如何确保每次都合并插件的输出？

详情：

在问了这个问题之后，尽管给予了赏金，但没有得到任何回应，我决定编写自己的 broccoli 插件来生成 CSS 图像精灵： broccoli-sprite

到目前为止我所尝试的：

#1

我正在使用这个将我的插件的输出与主应用程序的输出合并Brocfile.js

我知道这可能不是要走的路，而且我对 ember-cli 和 broccoli 都很陌生，所以请原谅新手错误，如果这是一个。

#2

在Brocfile.js中，扩展EmberApp为包含 的新树sprites：

当使用 Ember-cli、broccoli、broccoli-less-single 编译时，我的编译时间非常长。我正在使用带有 bootstrap3 和所有相关文件的模板。少文件的数量确实过多，但编译时间为 20 多秒。

它在每次保存时重新编译较少的文件，这似乎过多，因为较少的文件不是我正在编辑的文件。我该如何解决这个问题？

感谢您对此的见解。这显然也是一个已知问题。https://github.com/stefanpenner/ember-cli/issues/538