Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Grunt watch task example for Pattern Lab
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'],
},
}
@joemcgill
Copy link
Author

joemcgill commented May 14, 2014

In order to get Live Reload to inject CSS into the pages instead of reloading the whole page, you have to pass specific files (wildcards are acceptable) into the files: option. See this section of the Live Reload docs for more details: https://github.com/gruntjs/grunt-contrib-watch#live-reload-with-preprocessors

@joemcgill
Copy link
Author

joemcgill commented May 14, 2014

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.

@adamnorwood
Copy link

adamnorwood commented May 14, 2014

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment