1

The problem

I am working on an Ember.js project which has different versions (products) for different clients. Though the functionality is more or less the same, the styling of each product differs big time. Hence we have "default" and product specific style sheets. I have been asked to modify the build code so that only the corresponding .css (.less) files are compiled into the final app.

Originally I was looking at this issue from the wrong side: I tried to exclude the folders containing the unnecessary files with little success. Only then did I realize that it makes more sense not to include the product specific files by default and add them to the tree during the build.

The solution

After changing my point of view I found out there is another way around. I changed the style sheets so that all the "default looks" went into an import-base.less and I created an import-[name_of_product].less for each of the products, with the latters containing the import statement to the default looks, so I only have one file to build. Using the outputPaths option in EmberApp and assuming that the name of the product is stored in the process environmental variable called FLAVOUR my code looks as follows.

// ember-cli-build.js

/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  // y u do dis
  const options = { outputPaths: { app: { css: { app: false } } } };

  const lessFileName = 'import-' + process.env.FLAVOUR.toLowerCase();
  options.outputPaths.app.css[lessFileName] = 'assets/application.css'

  const app = new EmberApp(defaults, options);

  return app.toTree();
};

There is always something

The only problem with that code is that it still needs an app.less and that line of code or else the build fails, couldn't (haven't had time to) figure out a solution.

I also have to mention that the above solution doesn't resolve the original problem, which was:
How to exclude specific files from the working directory before using app.toTree() so that they wouldn't increase file size unnecessarily. Lux was so kind and pointed out that probably in-repo-addons are to be used for such purposes. Yet again, haven't had time to check. :(

Community
  • 1
  • 1
Abel
  • 51
  • 5
  • Here is a [pastebin link](http://pastebin.com/hig1nkdW) to my `ember-cli-build.js` file in case you wanted to check it. I removed the lines of code that are irrelevant. – Abel Apr 01 '16 at 11:16

1 Answers1

1

I think you can just use funnel!

something like this:

return new Funnel(app.toTree(), {
  include: ['**/*']
  exclude: ['styles/*.css']
});

general you can do anything you can do in a Brocfile in your ember-cli-build.js!

Lux
  • 17,835
  • 5
  • 43
  • 73
  • Thanks for the response. I tried it out but unfortunately haven't succeeded, in the compiled dist/app.js the lines from the excluded file are still appearing, meaning that the reason I'm doing this, the problem of decreasing final file size, still persists. If I can help with any logs or such please let me know. – Abel Apr 12 '16 at 12:02
  • I thought you want to remove files from the final output. If you have a compilation step for these files you have to filter before that. May use a in-repo addon. – Lux Apr 12 '16 at 18:50
  • Okay, I rechecked this whole process and with the help of some exclude functions console.log() I realized what you were talking about. The .toTree() returns the compiled tree for processing, thus making it impossible for me to exclude the folders I'd like to. Can you provide me with some similar simple in-repo-addon or any example other than the documentation? Also I'll rewrite my question so it reflects my problem better. – Abel Apr 14 '16 at 07:38
  • Check out the `less` plugin! They use the [`treeForStyles`](https://github.com/ember-cli/ember-cli/blob/master/ADDON_HOOKS.md#treefor-cont) hook to provide the required files. You can do the same to do some custom work with an in-repo addon. – Lux Apr 15 '16 at 21:45