# Ember best way to manage css and js

**URL:** <https://discuss.emberjs.com/t/ember-best-way-to-manage-css-and-js/6204>\
**Category:** Uncategorized\
**Created:** [September 4, 2014, 2:03pm UTC](https://discuss.emberjs.com/t/ember-best-way-to-manage-css-and-js/6204 "2014-09-04T14:03:49Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![hasan](https://avatars.discourse-cdn.com/v4/letter/h/df705f/32.png) [@hasan](https://discuss.emberjs.com/u/hasan)\
**Post date:** [September 4, 2014, 2:03pm UTC](https://discuss.emberjs.com/t/ember-best-way-to-manage-css-and-js/6204/1 "2014-09-04T14:03:49Z")

</div>

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](http://madhatted.com/2013/6/29/lazy-loading-with-ember) 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.

---

<div class="post-metadata">

**Author:** ![jthoburn](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jthoburn/32/12401_2.png) [@jthoburn](https://discuss.emberjs.com/u/jthoburn)\
**Post date:** [September 4, 2014, 5:50pm UTC](https://discuss.emberjs.com/t/ember-best-way-to-manage-css-and-js/6204/2 "2014-09-04T17:50:25Z")

</div>

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`.

---

<div class="post-metadata">

**Author:** ![hasan](https://avatars.discourse-cdn.com/v4/letter/h/df705f/32.png) [@hasan](https://discuss.emberjs.com/u/hasan)\
**Post date:** [September 4, 2014, 6:15pm UTC](https://discuss.emberjs.com/t/ember-best-way-to-manage-css-and-js/6204/3 "2014-09-04T18:15:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jthoburn](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jthoburn/32/12401_2.png) [@jthoburn](https://discuss.emberjs.com/u/jthoburn)\
**Post date:** [September 4, 2014, 6:38pm UTC](https://discuss.emberjs.com/t/ember-best-way-to-manage-css-and-js/6204/4 "2014-09-04T18:38:12Z")

</div>

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.

```nohighlight
{
  "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"
  }
}

```