I have the following structure:
app/
pods/
components/
user-login/
component.js
style.scss
template.hbs
Template files and component files livereload correctly, however, when I save changes to my style files in Atom the changes are not applied on the webpage- they are only applied when I kill and rerun:
ember server
and reload the webpage. I have installed the following:
ember-cli-styles-reloader
and I have tried adding:
"liveReload": true,
"watcher": "polling"
to:
.ember-cli
and I also tried adding these options to:
ember-cli-build.js
inside the app variable.
What am I missing?
There is a better option I believe, and I recommend to do this way:
First install ember-cli-sass-pods addon that uses ember-cli-sass (will install automatically) and then generate your style scss files into your pods directories.
to install
ember install ember-cli-sass-pods
then add
var app = new EmberApp(defaults, {
// you must add Watched folder to your Ember-Cli-Build.js
sassOptions: {
includePaths: ['app']
}
});
For example:
app/components/user-login
app/components/user-login/component.js
app/components/user-login/template.hbs
app/components/user-login/style.scss
just simply run this command:
ember g style [path] -p //your path now is components/user-login
there are more options that you can read their documents
You are ,after installing and setting up that, able to use ember-cli-styles-reloader which probably will work smoothly. make sure you have followed all the rules that they mentioned in their documents to set up ember-cli-styles-reloader.
Related
I'm working on an Ember.js project and would like to leverage the Slick Carousel library. I've installed the library via Bower in my project folder, and am having difficulty with importing it into my project.
In my ember-cli-build.js, I've added import statements as follows:
app.import('bower_components/slick-carousel/slick/slick.css');
app.import('bower_components/slick-carousel/slick/slick-theme.css');
app.import('bower_components/slick-carousel/slick/slick.js');
The issue I am running into is that the rest of the required assets do not get built and included in the dist folder when I do a build (fonts, assets, etc.), leading to errors with missing fonts and assets that are present in the "bower_components/slick-carousel" folder, but not in the build of my actual Ember application.
Edit: It looks like Broccoli-Funnel was what I needed. The issue was resolved by specifying the source files from the 'bower_components' folder and pointing the relative path to the 'dist' folder in the ember-cli-build.js file.
As a note: The 'broccoli-static-compiler' plugin commonly referenced elsewhere as the solution is deprecated, with the use of 'broccoli-funnel' as the recommended plugin.
Broccoli-funnel ended up being what I was looking for. By placing the following inside of ember-cli-build.js, the needed files would be placed in the correct directory during build:
var Funnel = require('broccoli-funnel');
var requiredAssets = new Funnel('bower_components/slick-carousel/slick/fonts', {
srcDir: '/',
include: ['**/*.*'],
destDir: '/assets/fonts'
});
return app.toTree([requiredAssets]);
Does anyone have a working example of a (simple) ember-app project built using Ember-CLI that uses LoDash? (e.g.: I want to use lodash, _.someLodashFunc, in my Routes and Controllers).
I haven't seen any thread / article on the web that gives clear, step-by-step explanation on how to do that.
If possible with lodash v3.0.0 (and I'm using the latest ember-cli, v0.1.9).
Thanks,
Raka
I found out how, you need to generate a custom build of lodash (the "lodash modern"). Use lodash-cli: https://lodash.com/custom-builds
On the command console type: lodash modern ..., and you'll get a javascript file generated: lodash.custom.js
Put that file under "vendor" dir of your ember-cli project.
Modify the Brocfile, add this:
app.import('vendor/lodash.custom.js', {
'lodash': [
'default'
]
});
And that's it.... you don't have to do "import _ from 'lodash'" in any of your js files. In fact, don't do that (you'll get an error). The _ var is readily available.
For example, I have a Route object like this:
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
console.log('hohoho: ' + _.chunk(['a', 'b', 'c', 'd'], 2));
return Ember.Object.create({name: 'Raka'});
}
});
And I could see hohoho:,b,c,d got printed in javascript console when I visited that route.
CORRECTION
You don't really need that lodash-cli.
I've tried this way (I guess more proper):
bower install lodash --save
In Brocfile.js, have this line: app.import('bower_components/lodash/lodash.js');
That's it. _ is automatically available in your Routers / Controllers.
I did the same with d3:
bower install d3 --save
In Brocfile.js, have this line: app.import('bower_components/d3/d3.js');
And variable named 'd3' is automatically available.
Added related link:
Import custom library in ember-cli
http://tiku.io/questions/2866484/how-to-include-a-local-javascript-im-ember-cli-application (quote: If you don't need them to minified in your vendor.js file you can put them in the public/js and then include it as a normal script file in app/index.html. I use this method for some libraries like moment.js. The public folder gets directly copied to your site root during the build.)
Proper way to access third party libs such as D3 in Ember CLI?
You can use something ready:
https://github.com/levanto-financial/ember-lodash
or do it manually.
I don't have any example but it should be as easy as modifying these 3 files:
bower.json
Just add the line
"lodash": "4.16.4",
to your dependencies and run bower install in your command line.
Alternatively, you can install it via bower:
$ bower install lodash --save
Brocfile.js
In order to be included to sources by Broccoli:
app.import('bower_components/lodash/lodash.js');
add this somewhere after var app = new EmberApp();
.jshint.rc
Add the line:
"_": true,
somewhere in the predef section (if you don't want to see the warnings like _ is undefined).
I haven't tested that but I hope it helps :)
You can install the latest stable version using Bower. In your project's root directory, run:
bower install lodash --save
Then import it using Brocolli by adding this line in your Brocfile.json somewhere after var app = new EmberApp( ...:
app.import('bower_components/lodash/lodash.js');
ember-lodash addon would be best pet.(https://www.npmjs.com/package/ember-lodash)
install addon : ember install ember-lodash
To include string functions alone
import _string from 'lodash/string';
let truncatedString = _string.trunc(rawString);
To include entire lodash library,
import _ from 'lodash/lodash';
let truncatedString = _.trunc(rawString);
i'm using ember-cli 0.1.5,
I'd like to build a css file for each 'skin-*.less' file in the app/styles folder. This works with plain CSS using the following config in my Brocfile.js:
var app = new EmberApp({
outputPaths: {
app: {
css: {
'skin-light': '/assets/skin-light.css',
'skin-dark': '/assets/skin-dark.css'
}
}
}
});
After installing a LESS precompiler with 'ember install:addon ember-cli-less' this config is not respected and instead 'ember build' looks for app/styles/app.less.
Is there a way to make the broccoli less compiler respect the multiple outputPaths config for CSS files?
It would appear not; that’s a pull request for that very functionality, but it’s reportedly buggy.
This functionality is now available in ember-cli-less v1.1.0
I am using ember-cli for a new project and cannot get app.css rebuilt automatically when my app.less changes.
My environment includes:
node: v0.10.32
npm: 2.1.5
bower: 1.3.12
ember-cli: 0.1.2
ember-cli-less: 1.0.4
Brocfile.js includes:
var app = new EmberApp({
lessOptions: {
inputFile: 'godeeptest.less',
outputFile: 'godeeptest.css'
}
});
I have a godeeptest.less file in my styles directory.
Whenever I change godeeptest.less, the output file godeeptest.css is not built automatically. BUT, when I restart the ember server on my terminal, the output file is built and the browser window updates with the new styles, as expected.
Does anyone have any suggestions on how to get this to work as expected, where expected behavior is "change file, browser reloads"
thanks,
Mark
update #1
head of godeeptest.less:
#import "bower_components/bootstrap/less/bootstrap.less"; // include bootstrap
.navbar-inverse {
.navbar-textalt {
color: green;
.navbar-text;
}
}
Ok. I fixed the problem, which is not a problem with ember-cli or ember-cli-less. it's a problem with Dropbox. or more specifically, don't store ember-cli projects in a Dropbox folder if you want ember-cli to work properly.
I moved my project out of the Dropbox folder into another folder on my Mac, and the problem went away. so there is some conflict between the watcher and Dropbox, SPECIFICALLY with less files, but no other file types. (weird).
don't despair, "It could be that the purpose of your life is only to serve as a warning to others."
I have packages SASS and SCSS installed. SCSS provides the syntax highlight while SASS provides the build system i need for scss. My problem is, if build is set to automatic, it wont build the scss files if i press ctrl+b, so i have to always go back and reselect that option. Is there a way to make that build system to be the automatic one for scss?
Set it up using a build system and fire off with F7:
http://readthedocs.org/docs/sublime-text-unofficial-documentation/en/latest/file_processing/build_systems.html?highlight=build for more information about setting that up.
UPDATED ANSWER
Copy the following:
{
"cmd": ["sass", "--update", "$file:${file_path}/${file_base_name}.css", "--stop-on-error", "--no-cache"],
"selector": "source.sass, source.scss",
"line_regex": "Line ([0-9]+):",
"osx":
{
"path": "/usr/local/bin:$PATH"
},
"windows":
{
"shell": "true"
}
}
In Sublime Text, go Tools > Build System > New Build System > Paste
Give it a name. Bingo.
Simpler Way
SASS Support in Sublime
Adding Support for near everything.
Simplest Way
Why DIY when you do not need to.
Want to have the site update in an open browser every time you save?
Generally a good must to have Ruby Git and Python installed.
Install Nodejs.
(win) the .msi download from main site works well and includes npm
Now you have access to the 'gem' and 'npm' package managers.
Things get easy now, although I may as well write it out longwinded.
Compass:
gem update --system
gem install compass
// can now use this command to build a sass-based project
compass create myFirstWebsite
// ..installs in "/myFirstWebsite"..
Install the Grunt client (global flag)
npm install grunt-cli -g
now have access to the wealth of Grunt automation packages ie:
npm grunt-contrib-jshint --save-dev
"dev" flagged - applies to your local project only (current and sub folders)
also, listed as a "devDependency" in package.json, which means it'll not be
packed with your project on a distro/prod build
Time for some simple awesome... Yeoman
npm install yo -g
installs yeoman (yo commands) a heap of other essentials
and Bower - twitter's response to Node / Gem etc
Bower looks after package dependencies.
AND THE AWESOME?
// make a new folder. cd into it, and type:
yo webapp
// There are multiple 'generators' you can install with yo.
// webapp is the one most suitable for front-end dev / web app building
// other things you might want before you start.. maybe underscore:
bower install underscore
// adds '_' to the set-up as a dependency
// These commands will brighten your day:
grunt test
// comprehensive testing of app
grunt server
// This part you'll love! Starts server and launches app in browser
// - includes live-refreshing... save a file, and all required builds etc
// are preformed (damn fast) and automatically refreshes browser.
// Yup, 'grunt server' = project-wide equiv to 'compass watch'
grunt
// Build application for deploy. Not only do you get minification and concatenation;
// also optimize all your image files, HTML, compile your CoffeeScript and Compass files,
// if you're using AMD, will pass those modules through r.js so you don't have to.