Question

我正在使用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
images / directory

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

Answer 1

我已经解决了（黑客攻击？）我的问题，所以我会在这里为其他人发布一个引用。如果有人可以对所选解决方案发表评论，我非常乐意收到意见：

我使用了与here

描述的方法类似的方法

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

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提供了捆绑包，因此您可以手动加载index.html中的CSS和JS：

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

由于CSS直接从html加载，因此对图像的相对引用工作正常，并在assets/bundles/jquery-ui-1.11.2.custom/images/...中抓取正确的文件。

这有效，但有点苛刻：它需要手动导入html文件上的资产。

有人知道只涉及Brocfile的替代方案吗？西兰花实际上可以重新分配进口，以便相对参考可以透明地工作吗？怎么样？

包含Broccoli / ember-cli的独立资产包

1 个答案: