Skip to content

BrowserSync

Personal site refresh and BrowserSync gotcha

This sketch never made it into Sketch App…

After the experiments with branding earlier this week, it was about time I gave my ‘business card’ site at shellbryson.com a lick of paint. Didn’t want anything showy. Just a nice landing page for my main domain that leads off to various places I squirrel stuff.

It’s hand-crafted with no frameworks with SCSS, and a custom grunt job to glue it all together. While grunt has been somewhat superseded by other (“better”) task runners, it’s still dirt simple to put something together that’ll compile your SCSS on the fly and give a live-view (via BrowserSync) in a browser as you’re building. The latter I find essential when building more traditional projects.

The code for this project can be found in github.

Screenshot of shellbryson.com version 1.0
I guess I’m happy with this as a version 1.0.

Dev notes: BrowserSync failing to do anything via Grunt.

Had an interesting issue with BrowserSync and Watch tasks. BrowserSync was refusing to refresh (or even load). Turns out that the task order in Grunt matters a lot when it comes to BrowserSync. Any watch tasks must happen after BrowserSync or it can just silently fail.

Working example:

grunt.registerTask('default', [], () => {
 grunt.loadNpmTasks('grunt-browser-sync');
 grunt.loadNpmTasks('grunt-contrib-watch');
 grunt.task.run('browserSync', 'version', 'styles', 'watch');
});