Livereload with Ember-CLI; only reload changed assets

Question

I'm used to building a asset compilation system with Grunt or Gulp. Using Gulp's livereload and the Chrome livereload plugin, I have a pretty sweet system where it watches for changes of certain file types and reloads only the file that were changed. With ember-cli, when I change a CSS file, it just reloads the entire page, rather than just reloading the CSS file. This gets to be a pain when I'm trying to style a deeply nested process. Any ideas/thoughts on how to get this working with Ember CLI correctly?

Answer 1

I believe this is still a work in progress with Ember CLI and is planned for a future release, or is depending on a fix in Broccoli. See https://github.com/stefanpenner/ember-cli/issues/2371

What I've done to get around this probably isn't ideal, but I end up using grunt, and use a shell command to run ember build, copy the output to a different directory that is being served by another server (in my case IIS express), and then just manually watch my files.

Here are the snippets from my grunt file. I'm sure you can accomplish the same using Gulp.

    shell: {
        prod: {
            command: 'ember build --environment production'
        },

        dev: {
            command: 'ember build'
        }
    },
    copy: {
        dev: {
            files: [{
                src: '**',
                dest: '../Server/Content/js',
                cwd: 'dist/content/js',
                expand: true
            }, {
                src: '**',
                dest: '../Server/content/css',
                cwd: 'dist/content/css',
                expand: true
            }, {
                src: 'dist/index.html',
                dest: '../Server/Views/Home/Root.cshtml'

            }]
        }
    },

    watch: {
        dev: {
            files: [
                'app/**/*.js', 'app/**/*.hbs'
            ],
            tasks: ['_buildDev'],
            options: {
                livereload: true
            }
        },

        less: {
            files: [
                'app/**/*.less'
            ],
            tasks: ['shell:dev', 'copy:dev']
        },

        css: {
            files: [
                '../Server/Content/css/**/*'
            ],
            options: {
                livereload: true
            }
        }
    }

Answer 2

Official support is in the works, meanwhile try this ember-addon https://www.npmjs.com/package/ember-cli-styles-reloader