Ember best way to manage css and js

1

I have a large php application that I am converting to ember.js. In my php application I used to have separate css and js files which was loaded when the specific routes get called. what the best way to accomplish this in ember.js or is there any other best practice for that. Right now I am loading all the js and css files in my index.html file.

<link type="text/css" rel="stylesheet" href="assets/css/gumby.css" media="all" />
<link type="text/css" rel="stylesheet" href="assets/css/pages/global.css" media="all" />
<link type="text/css" rel="stylesheet" href=assets/css/tooltipster.css" media="screen" />
<link type="text/css" rel="stylesheet" href="assets/css/jquery.fancybox.css" media="screen" />
<link type="text/css" rel="stylesheet" href="assets/css/pages/about.css" media="screen" />
<link type="text/css" rel="stylesheet" href="assets/css/pages/admin.css" media="screen" />
<link type="text/css" rel="stylesheet" href="assets/css/pages/global_print.css" media="print" />

js files:

<script src="assets/js/libs/jquery-1.9.0.min.js"></script>
<script src="js/libs/handlebars-1.1.2.js"></script>
<script src="js/libs/ember-1.6.1.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/app.js"></script>
<script src="js/router.js"></script>
<script src="js/account.js"></script>
<script src="js/message.js"></script>
<script src="js/user.js"></script>
<script src="js/inquiry.js"></script>

I saw this tutorial lazy-loading-with-ember :: madhatted.com and also looked ember-cli. It will be really helpful for me if people share what they are doing for their application. Thanks in advance.

2

For a larger project you will want to learn to use package managers, build tools and task runners.

The best practice for Ember would definitely be to start with ember-cli, use bower to install your dependencies, learn about and use es6 modules, and build/concat/compile/minify your various resources with broccoli.

3

I saw ember-cli. I think it is hard to use in an existing application. what about using grunt ?

4

I’m in the process of converting a fairly developed application that uses a grunt workflow to es6 and ember-cli from grunt, having realized the long term maintainability improvements that this will give me as well as the ease with which I can add modules such as hammerjs socket.io and liquid-fire.

I’d definitely recommend the ember-cli route if you can manage it, but if you can’t then yes, there’s a ton you can do really well with grunt, and there’s a lot of optimizations you can use to make grunt work quickly and do what you want.

My package.json from that application contains all the grunt plugins I use to create a nice environment.

{
  "name": "Ethereal",
  "version": "0.4.0",
  "devDependencies": {
    "bower": "^1.3.9",
    "ember-template-compiler": "^1.6.1",
    "grunt": "^0.4.5",
    "grunt-bower-concat": "^0.3.0",
    "grunt-bump": "0.0.14",
    "grunt-concurrent": "~0.5.0",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-contrib-concat": "^0.5.0",
    "grunt-contrib-connect": "^0.8.0",
    "grunt-contrib-copy": "^0.5.0",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-rename": "0.0.3",
    "grunt-contrib-stylus": "^0.18.0",
    "grunt-contrib-uglify": "^0.5.0",
    "grunt-contrib-watch": "~0.6.1",
    "grunt-dev-update": "^0.5.10",
    "grunt-ember-templates": "^0.4.21",
    "grunt-neuter": "~0.6.0",
    "grunt-newer": "^0.7.0",
    "grunt-open": "~0.2.3",
    "grunt-phantom-svg2png": "^1.0.2",
    "grunt-replace": "^0.7.8",
    "grunt-requirejs": "^0.4.2",
    "grunt-usemin": "^2.3.0",
    "handlebars": "~1.3.0",
    "jit-grunt": "^0.7.0",
    "qunitjs": "^1.14.0",
    "stylus": "^0.47.3",
    "time-grunt": "~0.4.0"
  },
  "engines": {
    "node": ">=0.11.13"
  }
}
1 Like