-
-
Save joemcgill/9236cb10f271035414e6 to your computer and use it in GitHub Desktop.
| watch: { | |
| options: { | |
| livereload: { | |
| options: {livereload: '<%= connect.options.livereload %>'}, | |
| files: [ | |
| 'public/**/*' | |
| ] | |
| } | |
| }, | |
| html: { | |
| files: [ | |
| 'source/_patterns/**/*.mustache', | |
| 'source/_patterns/**/*.json', | |
| 'source/_data/*.json', | |
| ], | |
| tasks: [ 'shell:patternlabPatterns' ], | |
| }, | |
| sass: { | |
| files: [ | |
| 'source/css/*.scss', | |
| 'source/css/**/*.scss', | |
| 'public/styleguide/css/**/*.scss' | |
| ], | |
| tasks: ['sass'], | |
| }, | |
| } |
Aha! Thanks for posting this follow-up! I've been using grunt-browser-sync, which I think in this case offers similar functionality to grunt-contrib-connect in that it acts like a live reload-friendly server.
My reading of the grunt-contrib-watch documentation was leading me to think that CSS injection should be doable without the use of an additional module like this, but in any case your post prompted me to do some more tinkering and I've made a discovery that makes a big difference for me at least: the Chrome Live Reload browser extension itself seems to be the problem!
When I disable that Live Reload browser extension and manually add the livereload.js snippet provided by grunt-contrib-watch, the whole process works as expected, without the need for an additional module, and surprisingly seems even faster than CSS injection! (as far as I can tell it's still reloading the page and all assets but it only takes a few milliseconds and I don't lose my position on the page, which was my desired goal with all of this...or maybe it's doing the injection and I'm just not reading my Chrome Network panel info correctly :)
I've posted a new version of my Gruntfile here in case you want to check it out: https://gist.github.com/adamnorwood/bdaf72bd711feafc2343
Another note: The LiveReload browser plugin may still cause a full page refresh. I'm using grunt-contrib-connect here to serve patternlab and to inject the livereload script into my pages, so I had to turn the browser plugin off to get the CSS injection to work properly.