I got situation like, I included morris.js file from vendor folder, and configured in ember-cli-build.js file but then my specific modified feature is working in development but not in the production build.
I am using ember-cli-babili for minification. either I should fix which minification part causing the issue or I should remove this file alone from minification.
Is this possible? any guidance is appreciated.
Yes, it is possible!
// ember-cli-build.js
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
minifyJS: {
options: {
exclude: ["**/morris.js"]
}
}
});
//...
return app.toTree();
};
Related
I'm trying to use ember cli with sass, so i installed the ember-cli-sass, and i'm trying to configure like this:
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var emberCLIBuild = function(defaults) {
var app = new EmberApp(defaults, {
sassOptions: {
includePaths: [
'app/styles/admin/main.scss',
'app/styles/site/main.scss'
]
}
});
return app.toTree();
};
module.exports = emberCLIBuild;
but, when i try to run ember serve, the terminal will throw an error:
ENOTDIR: not a directory, scandir '/Users/xxxx/DEV/PubCrawl/Site/tmp/sass_compiler-input_base_path-55sPHD0L.tmp/1/'
How could i fix this? I don't see the problem.
Thanks.
According the demo on the github page, it looks like it takes paths, not file names (which makes sense since it's called includePaths). I think you want:
includePaths: [
'app/styles/admin',
'app/styles/site'
]
I have an ember-cli based app which needs to be integrated into an existing java/JSP app. For this to happen I need to generate a JSP file with js/css fingerprinted URLs which are generated by ember-cli/broccoli-asset-rev.
This is working fine for a html file and I can set it use a JSP file by changing my Brocfile.js to include:
var app = new EmberApp({
outputPaths: {
app : {
html: 'index.jsp'
}
}
});
but this prevents ember serve working as it uses the index.jsp as the html file. Is it possible to have both generated?
After trying many things I have come up with two solutions, both have drawbacks. The first is to use make a new broccoli tree and merge it with he app tree then explicity run broccoli-asset-rev on the resulting tree. The downside of this is that the mustache does not get hydrated, this is useful for outputting config. This would look something like:
//Brocfile.js
var mergeTrees = require('broccoli-merge-trees');
var funnel = require('broccoli-funnel');
var assetRev = require('broccoli-asset-rev');
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var jspTree;
var app = new EmberApp({
fingerprint: {
enabled: false
},
storeConfigInMeta: false
});
jspTree = funnel('app', {
files: ['index.jsp']
});
module.exports = assetRev(mergeTrees([appTree = app.toTree(), jspTree]), {
extensions: ['js', 'css'],
replaceExtensions: ['jsp', 'html']
});
The other solution is the override a private api method in ember-cli which builds the tree for the index. This solution does let the mustache get hydrated but relies on a private method. You can find details here and here
How about adding symbolic link?
ln -s index.jsp index.html
Depending on what build tool you're using in your project, I'd probably recommend something like the following:
Put some placeholder sections in your index.html.
Copy index.jsp to index.jsp.tmp.
Copy in code from index.jsp into your placeholder sections.
Move index.jsp.tmp back to index.jsp and clean up.
You might consider something like gulp-replace to do the work.
In my app I'm adding EmberJS to a page where jQuery is already loaded. So I don't need the ember-cli to include jQuery.
The ember-cli build step has the addition of jQuery hardcoded, but you can override it via configuration. I'm not sure if this is documented, but you can check node_modules/ember-cli/lib/broccoli/ember-app.js
this.vendorFiles = merge(options.vendorFiles, {
'loader.js': this.bowerDirectory + '/loader/loader.js',
'jquery.js': this.bowerDirectory + '/jquery/dist/jquery.js',
'handlebars.js': {
development: this.bowerDirectory + '/handlebars/handlebars.js',
production: this.bowerDirectory + '/handlebars/handlebars.runtime.js'
} /* etc, etc, */
}
options is the hash that is passed to a new instance of EmberApp in your Brocfile.js
Instead of,
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var app = new EmberApp({});
Pass the location of a stub file (use the vendor/ dir for this),
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var app = new EmberApp({
vendorFiles : {
'jquery.js': 'vendor/stub.js'
}
});
This stub will take priority over the hard-coded jQuery path. Just make sure you load in jQuery before your ember app is loaded.
I'm having trouble adding CSS libraries to my Ember CLI project when using the broccoli-compass plugin.
I've added this line to my brocfile:
app.styles = function() {
return compileCompass(this.appAndDependencies(), this.name + '/styles/app.scss', {
outputStyle: 'expanded',
sassDir: this.name + '/styles',
imagesDir: 'public/images',
cssDir: '/assets',
importPath: 'vendor'
});
};
but now I'm stuck. I've tried
app.import('vendor/bootstrap/docs/assets/css/bootstrap.css');
but this doesn't work, because (I think) I've overwritten app.styles.
I've tried adding an importPath to my Compass config, so that I can #import in my SASS files, but that hasn't worked either.
It seems the app.styles = ... line above overwrites some Ember CLI code, so the app.import suggestion from Ember CLI guides doesn't work.
After spending some time with Broccoli I figured out how to serve the vendor folder:
var pickFiles = require('broccoli-static-compiler');
var vendor = pickFiles('vendor', {srcDir: '/', destDir: '/vendor'});
Now broccoli serve serves everything in my vendor folder, and
#import 'vendor/bootstrap/docs/assets/css/bootstrap.css';
works in my app.scss file.
Of course, I will need to do more work so that only the distribution versions of the vendor assets are included in the final build.
Version 0.0.5 fixes the issue, here's what worked for me:
var compileCompass = require('broccoli-compass');
app.styles = function() {
return compileCompass(this.appAndDependencies(), this.name + '/styles/app.scss', {
outputStyle: 'expanded',
sassDir: this.name + '/styles',
imagesDir: 'public/images',
cssDir: '/assets',
importPath: [
process.cwd() + '/vendor/foundation/scss'
],
});
};
Now I'm able to do #import foundation in my scss file.
You can add a vendor file in addon.scss adding a treeForAddon hook in index.js of the addon, merging the vendor directory with a Funnel before the compilation.
treeForAddon: function(tree) {
this._requireBuildPackages();
if (!tree) {
return tree;
}
var addonTree = this.compileAddon(tree);
var vendorCss = new Funnel(this._treeFor('vendor'), {
srcDir: '/css'
});
var mergedStylesTree = new MergeTrees([this._treeFor('addon-styles'), vendorCss]);
var stylesTree = this.compileStyles(mergedStylesTree);
return MergeTrees([addonTree, stylesTree].filter(Boolean));
}
In an Ember-CLI project, if I add a directory containing webfonts and their CSS stylesheets to the public/assets directory, I can use them with something like #import 'assets/font/regular/stylesheet.css. This works fine.
Ideally though, I'd like to keep these assets out my git repository, and instead bower install them as client-side dependencies, but how can these assets be used in the Ember-CLI build?
The documentation mentions app.import(FILE) in Brocfile.js, which works for CSS stylesheets, but not for a WOFF font file:
$ ember build
version: 0.0.28
Build failed.
Error: Path or pattern "nicefont.woff" did not match any files
at Object.multiGlob (/(PATH)/node_modules/ember-cli/node_modules/broccoli-static-compiler/node_modules/broccoli-kitchen-sink-helpers/index.js:216:13)
at /(PATH)/demo/node_modules/ember-cli/node_modules/broccoli-static-compiler/index.js:25:27
at invokeCallback (/(PATH)/node_modules/ember-cli/node_modules/rsvp/dist/commonjs/rsvp/promise.js:228:21)
at publish (/(PATH)/node_modules/ember-cli/node_modules/rsvp/dist/commonjs/rsvp/promise.js:176:9)
at publishFulfillment (/(PATH)/node_modules/ember-cli/node_modules/rsvp/dist/commonjs/rsvp/promise.js:312:5)
at flush (/(PATH)/node_modules/ember-cli/node_modules/rsvp/dist/commonjs/rsvp/asap.js:41:9)
Also, I would like to specify a directory, which is app.import() refuses.
Is there an Ember-CLI / Brocolli way of doing this?
I thought I was stuck on this issue, but apparently a cup of tea and explicitly phrasing the question on StackOverflow pushed me in the right direction…
If you install a client-side dependency with bower, then in an Ember-CLI project these will end up in vendor/. To use (parts of) them without changing them, we can use Broccoli's slightly awkwardly named broccoli-static-compiler. First, install two build-time dependencies:
npm install --save-dev broccoli-static-compiler
npm install --save-dev broccoli-merge-trees
In Brocfile.js add at the top below the EmberApp import:
var mergeTrees = require('broccoli-merge-trees');
var pickFiles = require('broccoli-static-compiler');
And at the bottom of Brocfile.js:
// Remove this line:
// module.exports = app.toTree()
// Copy only the relevant files:
var fontOpenSans = pickFiles('vendor/font-opensans', {
srcDir: '/',
files: ['**/*.woff', '**/stylesheet.css'],
destDir: '/assets/fonts'
});
// Merge the app tree and our new font assets.
module.exports = mergeTrees([app.toTree(), fontOpenSans]);
Here our client-side dependency is a font-opensans, which refers to a local git repository containing a copy of the Open Sans webfont.
That is all! To use the web-font, link to assets/ from index.html:
<link rel="stylesheet" href="assets/fonts/opensans_regular/stylesheet.css">
This was tested with ember-cli 0.0.40 and a few earlier versions.
The supported answers are a bit out of date. At the time of this writing Ember CLI 0.2.2, there is support for directly copying/fingerprinting vendor folders you want in your assets directory.
// Brocfile.js
var app = new EmberApp();
...
var extraAssets = new Funnel('bower_components/a-lovely-webfont', {
srcDir: '/',
include: ['**/*.woff', '**/stylesheet.css'],
destDir: '/assets/fonts'
});
module.exports = app.toTree(extraAssets);
Documentation here
Similar to answer from JeroenHoek, in ember-cli, version 0.0.40, I ended up doing it right under the app.import before module.exports. I use the augmentation pattern to encapsulate what I'm trying to do so that when/if it's no longer necessary, or there is a more preferred way to do it, I can clean it up easily, and remove modules that aren't used anymore.
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var app = new EmberApp();
// Use `app.import` to add additional libraries to the generated
// output files.
//
// ... [comments omitted]
app.import('vendor/moment/moment.js');
var tree = app.toTree();
tree = (function mergeFontAwesomeTree(tree) {
var mergeTrees = require('broccoli-merge-trees');
var pickFiles = require('broccoli-static-compiler');
var fontawesome = pickFiles('vendor/fontawesome/fonts', {
srcDir: '/',
destDir: '/fonts'
});
return mergeTrees([tree, fontawesome]);
})(tree);
module.exports = tree;