Grunt - livereload only uglified script.js?

Question

GruntJS newbie here. I currently have my gruntfile.js using the watch task to look for changes to any .js files in my js/components/ folder and uglify those scripts into a single script.js file.

The issue that I'm having is that these changes cause a full page reload.

Is it possible to only reload the script.js file without also reloading the HTML/CSS? The effect I'm after is the same effect I'm currently getting with SASS/CSS files like so:

watch : {
            options: { livereload: true },

            sass: {
                options: {
                    livereload: false
                },
                files: ['css/sass/*.scss'], 
                tasks: ['compass:dev']
            },

            css: {
                files: ['css/*.css']
            }

        }

This reloads only my CSS without reloading the entire page, which makes for a much smoother workflow. Is it possible to do the same for JS? If not, why not? My current JS workflow configuration looks like this:

grunt.initConfig({

        uglify: {
            my_target: {
                files: {
                    'js/script.js' : ['js/components/*.js']
                } 
            } 
        },  
        watch : {
            options: { livereload: true },
            scripts: {
                files: ['js/components/*.js'], 
                tasks: ['uglify']
            }

        } 

});

score 0 · Accepted Answer · answered Nov 13 '13 at 07:57

After reading around I finally wound up on the livereload.js Github page. Under the developer's rundown of the project's current status, "Live JS reloading" is the one remaining to-do item. So it's a planned feature, but not yet implemented. The last commit on the project was 7 months back, so I'm not sure when/if we can anticipate this update.

Grunt - livereload only uglified script.js?

1 Answers1