4

Here is my Gruntfile.js

watch: {
            options: { livereload: true },
            compass: {
                files: ['assets/sass/*.{scss,sass}'],
                tasks: ['compass']
            },
            // js: {
            //  files: '<%= jshint.all %>',
            //  tasks: ['jshint', 'uglify']
            // },
            livereload: {
                // files: ['*.html', '*.php', 'assets/stylesheets/**/*.{css}']
                files: ['*.html', '*.php', 'assets/stylesheets/custom.css']
            }
        },

        // compass and scss
        compass: {
            dist: {
                options: {
                config: 'config.rb',
                force: true
                }
            }
        },

and this is output from grunt watch : 

Done, without errors.
... Reload assets/sass/custom.scss ...
... Reload assets/stylesheets/custom.css ...
Completed in 11.033s at Fri Dec 06 2013 14:20:48 GMT+0100 (CET) - Waiting...
OK
>> File "assets/stylesheets/custom.css" changed.
>> File "assets/sass/custom.scss" changed.

Running "compass:dist" (compass) task
overwrite assets/stylesheets/custom.css (0.701s)
identical assets/stylesheets/app.css (3.452s)
Compilation took 4.158s

Done, without errors.
... Reload assets/sass/custom.scss ...
... Reload assets/stylesheets/custom.css ...
Completed in 10.719s at Fri Dec 06 2013 14:21:53 GMT+0100 (CET) - Waiting...
  1. ..so, why is livereload taking so much time for refreshing the page, 10secs to preview any change in my .scss file, also how it would be possible not to refresh page completely but only inject .css changes in page?
  2. ..another thing i would like to know is how to avoid that compilation lag on app.css, which took almost 4 secs, and it is not even changed?

I am using livereload browser extension with this configuration.

Thanks.

branquito
  • 3,864
  • 5
  • 35
  • 60

2 Answers2

2

1a: to speed things up in a watch task try the option spawn:false. This might make things unstable, but it's worth a try. If it seems ok go for it. It might cause you problems later though if you add a lot of different tasks to the watch task. But you can worry about that then and disable it potentially.

1b:

First of all don't enable livereload on for the compass task. (you have it globally, take in only in the css) Because of this it will trigger a livereload event for the scss file as well. But since the livereload client doesn't know this file then it will reload the whole page. Make sure the only reported file is the compiled css.

Secondly the watch task will trigger livereload for previously changed files as well. This is a known but, I believe it is fixed in master, but no published yet.

https://github.com/gruntjs/grunt-contrib-watch/issues/205

2:

Well it have to compile it to compare it, then it just reports that it is identical.

Martin Hansen
  • 5,154
  • 3
  • 32
  • 53
0

To only inject .css changes: 

    watch: {
        compass: {
            files: ['assets/sass/*.{scss,sass}'],
            tasks: ['compass']
        },
        livereload: {
            files: ['assets/stylesheets/*.css'],
            options: { livereload: true }
        }
    }

Unfortunately, I am also getting slow and similar compilation times (it must be compass).

xphong
  • 1,114
  • 2
  • 13
  • 20
  • I am using Guard - Livereload combination now, for the same task, as it is working much faster, till someone finds better solution with Grunt.. Thanks to all. – branquito Dec 20 '13 at 12:07