Include a self-contained asset bundle with Broccoli / ember-cli

Question

I am using jquery-ui , self-compiled: not via bower, but directly generated and downloaded from the jquery-ui website. I have put it into myapp/vendor/bundles/jquery-ui-1.11.2.custom

In my Brocfile I am loading the CSS and JS resources:

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');

The CSS is then included in the vendor.css resource, and the js in the vendor.js resource.

But this is not providing the full jquery-ui component. In particular, the file jquery-ui.css is using this rule:

.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;
}

Which is addressing the image in vendor/bundles/jquery-ui-1.11.2.custom/images/ui-bg_inset-soft_10_285c00_1x100.png . That file is not available in the dist folder.

The url("images/...") is relative to the path of the CSS itself. This is the structure of the jquery-ui component:

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

What I would like to make available for my application is:

• jquery-ui.css
• jquery-ui.js
• jquery-ui.theme.css
• images/ directory

How can this be solved in Broccoli?

Answer 1

I have solved (hacked?) my problem, so I will post a reference here for others. If somebody can comment on the chosen solution, I am more than happy to receive comments:

I have used a similar method to the one described here

First, install some broccoli tools:

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

Now modify your 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]);

(Do not app.import the bundles anymore)

Now the bundles are available at dist/assets/bundles , so you can load CSS and JS in the index.html manually:

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

Since the CSS is loaded directly from the html , relative references to the images are working fine, and grabbing the correct files in assets/bundles/jquery-ui-1.11.2.custom/images/... .

This works but is a bit hacky: it requires to manually import assets on the html file.

Does anybody know of an alternative which only involves the Brocfile ? Can broccoli actually re-allocate imports so that relative references work transparently? How?