0

我正在使用jquery-ui，自编译：不是通过 bower，而是直接从 jquery-ui 网站生成和下载。我已经把它放进myapp/vendor/bundles/jquery-ui-1.11.2.custom

在我的Brocfile我正在加载 CSS 和 JS 资源：

app.import('vendor/bundles/jquery-ui-1.11.2.custom/jquery-ui.css');
app.import('vendor/bundles/jquery-ui-1.11.2.custom/jquery-ui.theme.css');
app.import('vendor/bundles/jquery-ui-1.11.2.custom/jquery-ui.js');

CSS然后包含在vendor.css资源中，js包含在vendor.js资源中。

但这并没有提供完整的 jquery-ui 组件。特别是，该文件jquery-ui.css使用此规则：

.ui-widget-content {
    border: 1px solid #72b42d;
    background: #285c00 url("images/ui-bg_inset-soft_10_285c00_1x100.png") 50% bottom repeat-x;
    color: #ffffff;
}

这是解决中的图像vendor/bundles/jquery-ui-1.11.2.custom/images/ui-bg_inset-soft_10_285c00_1x100.png。该文件在文件夹中不可用dist。

url("images/...")是相对于 CSS 本身的路径的。这是jquery-ui组件的结构：

vendor/bundles/jquery-ui-1.11.2.custom/
├── external
│   └── jquery
│       └── jquery.js
├── images
│   ├── ui-bg_diagonals-small_0_aaaaaa_40x40.png
│   ├── ui-bg_diagonals-thick_15_444444_40x40.png
│   ├── ui-bg_diagonals-thick_95_ffdc2e_40x40.png
│   ├── ui-bg_glass_55_fbf5d0_1x400.png
│   ├── ui-bg_highlight-hard_30_285c00_1x100.png
│   ├── ui-bg_highlight-soft_33_3a8104_1x100.png
│   ├── ui-bg_highlight-soft_50_4eb305_1x100.png
│   ├── ui-bg_highlight-soft_60_4ca20b_1x100.png
│   ├── ui-bg_inset-soft_10_285c00_1x100.png
│   ├── ui-icons_4eb305_256x240.png
│   ├── ui-icons_72b42d_256x240.png
│   ├── ui-icons_cd0a0a_256x240.png
│   └── ui-icons_ffffff_256x240.png
├── index.html
├── jquery-ui.css
├── jquery-ui.js
├── jquery-ui.min.css
├── jquery-ui.min.js
├── jquery-ui.structure.css
├── jquery-ui.structure.min.css
├── jquery-ui.theme.css
└── jquery-ui.theme.min.css

我想为我的应用程序提供的是：

  • jquery-ui.css
  • jquery-ui.js
  • jquery-ui.theme.css
  • 图片/目录

西兰花如何解决这个问题？

4

1 回答 1

0

我已经解决了（被黑了？）我的问题，所以我会在这里为其他人发布参考。如果有人可以对所选解决方案发表评论，我很高兴收到评论：

我使用了与此处描述的方法类似的方法

首先，安装一些西兰花工具：

npm install --save-dev broccoli-static-compiler
npm install --save-dev broccoli-merge-trees

现在修改你的Brocfile.js：

var mergeTrees = require('broccoli-merge-trees');
var pickFiles  = require('broccoli-static-compiler');

var EmberApp = require('ember-cli/lib/broccoli/ember-app');

...

// We provide bundles tree as-is
var bundlesTree = pickFiles('vendor/bundles', {
   srcDir: '/',
   files: ['*'],
   destDir: '/assets/bundles',
});

module.exports = mergeTrees([app.toTree(), bundlesTree]);

（不再app.import捆绑）

现在捆绑包在 上可用，因此您可以手动dist/assets/bundles加载 CSS 和 JS ：index.html

<link rel="stylesheet" href="assets/bundles/jquery-ui-1.11.2.custom/jquery-ui.css">
<link rel="stylesheet" href="assets/bundles/jquery-ui-1.11.2.custom/jquery-ui.theme.css">

...

<script src="assets/bundles/jquery-ui-1.11.2.custom/jquery-ui.js"></script>

html由于CSS是直接从assets/bundles/jquery-ui-1.11.2.custom/images/....

这可行，但有点hacky：它需要手动导入html文件上的资产。

有谁知道只涉及的替代方案Brocfile？西兰花实际上可以重新分配进口，以便相对引用透明地工作吗？如何？

于 2015-02-05T15:39:59.947 回答