0

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?

blueFast
  • 41,341
  • 63
  • 198
  • 344

1 Answers1

0

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?

Community
  • 1
  • 1
blueFast
  • 41,341
  • 63
  • 198
  • 344
  • Hi @jeckyll2hide, thank you for sharing the idea. I am running into the same thing and looking for answer to best migrate to ember cli. I have one quick question about reference from ```jquery-ui.min.css```. After using the brocolli-static-compiler, do you need to correct all the jquery-ui css reference from ```images/...``` to ```assets/bundles/images/...``` in order to make the reference work? I am afraid then it will make jquery-ui less portable because every time if I start from scratch I need to manually change the reference and it also be hard to upgrade jquery-ui in the future? – yeelan Jun 01 '15 at 17:36
  • But I also see other people using the same technic as in including [polymer into ember cli project](http://www.programwitherik.com/how-to-add-polymer-to-your-ember-project/). So I guess that's the only way to migrate the problem for the moment? Thank! – yeelan Jun 01 '15 at 17:37