Skip to content

Instantly share code, notes, and snippets.

Last active Oct 3, 2018
What would you like to do?
Gruntfile for Pattern Lab + Compass + Live Reload via grunt-browser-sync
Gruntfile for Pattern Lab + Compass + Live Reload via grunt-browser-sync
Set up to use browser-sync because for the life of me I can't get
the grunt-contrib-watch livereload to *inject* the compiled CSS changes
to the browser (as opposed to livereload doing a full page refresh)...
(To be clear, the CSS injection I'm talking about is where changes to
the CSS file are slipped in to the browser very quickly with no
full page reload, and without losing your place if you've scrolled
down the page, have a modal popup window open, etc. In my experience,
this takes the update time from roughly 1 second down to maybe 1/10th
of a second, making CSS editing and previewing very snappy!)
You can use the 'proxy' option for the browserSync task, but it seems
to be significantly faster if you add the browser-sync <script> tags to
your PatternLab _foot.mustache file (when you run grunt you'll be given
the appropriate tags to include).
I'm still using grunt-contrib-watch's Livereload to reload the browser
display when a Pattern Lab pattern changes.
Theoretically this setup should allow you to sync browser testing for
your patterns between multiple devices, too.
Inspiration from this blog post by Joseph Fitzsimmons:
- grunt-contrib-watch
- grunt-browser-sync
- grunt-contrib-compass
- grunt-shell
module.exports = function(grunt) {
pkg: grunt.file.readJSON('package.json'),
watch: {
// Watch our Sass files for changes...
sass: {
files: [ 'source/css/**/*.{scss,sass}' ],
tasks: [ 'compass' ],
options: {
spawn: false
// Keep an eye on the Pattern Lab pattern templates...
html: {
files: [
tasks: [ 'shell:patternlab' ],
options: {
spawn: false,
livereload: true
compass: {
dist: {
options: {
sassDir: 'source/css/',
cssDir: 'public/css/'
shell: {
patternlab: {
command: "php core/builder.php -pg"
browserSync: {
bsFiles: {
src: 'public/css/style.css'
options: {
watchTask: true
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment