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: | |
http://josephfitzsimmons.com/home/pattern-lab-with-grunt-and-live-reload/ | |
Dependencies: | |
- grunt-contrib-watch | |
- grunt-browser-sync | |
- grunt-contrib-compass | |
- grunt-shell | |
*/ | |
module.exports = function(grunt) { | |
grunt.initConfig({ | |
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: [ | |
'source/_patterns/**/*.mustache', | |
'source/_patterns/**/*.json', | |
'source/_data/*.json' | |
], | |
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 | |
} | |
} | |
}); | |
grunt.loadNpmTasks('grunt-shell'); | |
grunt.loadNpmTasks('grunt-contrib-compass'); | |
grunt.loadNpmTasks('grunt-contrib-watch'); | |
grunt.loadNpmTasks('grunt-browser-sync'); | |
grunt.registerTask('default',["browserSync","watch"]); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment