The Command Line for Web Design: Live Reload & BrowserSync

In the last lesson you learned how to get your whole project compiled or built with short commands like grunt, grunt watch, gulp and gulp watch.

In this lesson you'll learn how to create commands that add an extra layer of awesome to your projects, enabling live reload and browser synchronization.

If you haven't yet completed the other tutorials in this series, please go back and complete those before you start here.

Live Reload

Note: To prevent confusion, there is a desktop app and Chrome plugin combination named LiveReload which is often used in conjunction with many npm packages to handle automated reloading. With the way we’ll be setting up however, the desktop apps and browser plugin won’t be required.

Live Reload via Grunt

In order to allow live reloading to work there needs to be a localhost which can be refreshed, i.e. a way to view your site locally simulating a web host with an http:// protocol instead of file://. 

With your Grunt project we’ll take care of enabling a localhost to serve up your project's static files, and live reloading that localhost, using the grunt-express plugin.

Install grunt-express into your project with:

npm install grunt-express --save-dev

Then enable the plugin in your Gruntfile by adding this below your existing grunt.loadNpmTasks lines:

grunt.loadNpmTasks('grunt-express');

Configure the express task by adding this code:

    express: {
      all: {
        options: {
          bases: 'build',
          livereload: true,
          open: 'http://localhost:3000'
        }
      }
    },

You’ll notice that in our express task configuration we have the livereload option set to true, so after our local preview is launched it will automatically reload whenever changes are detected.

Now we’ll add a new task named start. We'll use this task to trigger both the express task and the watch task at once.

Add this below your existing grunt.registerTask line:

grunt.registerTask('start', ['express', 'watch']);

Now run the command: 

grunt start

...and you should see your default browser open up with your project preview displayed inside.

The watch task is now running and will compile your Stylus and Jade changes into the “build” folder.

Express is in turn monitoring the “build” folder for any changes, so if your HTML, CSS or JS files are recompiled it will automatically reload your preview.

LiveReload via Gulp

Next up we’ll go ahead and achieve the same type of localhost preview in your Gulp project. This time we’re going to use the gulp-connect plugin instead.

Install gulp-connect into your project with this command:

npm install --save-dev gulp-connect

Make it accessible in your Gulpfile by adding this line below the other lines where you’ve used the require() function:

var connect = require('gulp-connect');

Setup a new task named connect by adding this code under your other task code:

gulp.task('connect', function() {
  connect.server({
    root: 'build',
    livereload: true,
    open: true
  });
});

As we did with Grunt, we’re now going to create a custom task named start which will both launch our localhost preview and initiate our watch task.

Add this line to the bottom of your Gulpfile:

gulp.task('start', ['connect', 'watch']);

To enable reloading of our localhost preview, we’re going to connect another “pipe” to the end of both the css and html tasks.

Add this reload trigger to the end of each:

.pipe(connect.reload())

Making the tasks become:

gulp.task('css', function () {
    gulp.src('source/stylus/main.styl')
		.pipe(stylus({compress: false, paths: ['source/stylus']}))
		.pipe(autoprefixer())
		.pipe(minifyCSS())
		.pipe(rename('style.css'))
		.pipe(gulp.dest('build'))
		.pipe(connect.reload())
});

....and:

gulp.task('html', function() {
  gulp.src('source/jade/*.jade')
    .pipe(jade())
    .pipe(gulp.dest('build'))
    .pipe(connect.reload())
});

Now run the command: 

gulp start

...then go to http://localhost:8080 and you’ll see your local site preview. 

Save a change to any of your Jade or Stylus files and watch the lightning quick recompile and reload!

BrowserSync

Now that you have your localhost preview automatically reloading, you could leave it at that and still have a top-notch development process setup for your project. However, when it comes to being able to do cross browser and cross device testing, also having BrowserSync in the picture is really worth your while.

With BrowserSync you’re provided with a preview URL you can plug into any browser on your machine, as well as browsers on any other device on the same internet connection.

All of the previews you have running will then be reloaded as you make changes so you can see the results across the board, and all your interactions will be mirrored on every instance. If you scroll or open a menu on one browser you’ll see how every other browser and device responds at the same time.

BrowserSync via Grunt

To install the grunt-browser-sync plugin into your Grunt project run the following command:

npm install grunt-browser-sync --save-dev

Comment out or delete the line you used to enable grunt-express:

// grunt.loadNpmTasks('grunt-express');

Then add this line to enable grunt-browser-sync instead:

grunt.loadNpmTasks('grunt-browser-sync');

Comment out or delete the express task you created earlier, and add this config code for the task browserSync instead:

    browserSync: {
      bsFiles: {
        src : ['build/*.css', 'build/*.html']
      },
      options: {
        watchTask: true,
        server: {
          baseDir: "build"
        }
      }
    },

Locate your start task and change it so it runs the browserSync task instead of the express task, from:

grunt.registerTask('start', ['express', 'watch']);

...to:

grunt.registerTask('start', ['browserSync', 'watch']);

Now when you run the command:

grunt start

...you’ll still see a localhost preview open, and it will still reload when you save changes, but the difference now is that browser synchronization is active as is the ability to view your preview on other devices. 

In the terminal after starting your BrowserSync server you’ll see this:

———————————— 
 Local: http://localhost:3000
 External: http://192.168.1.3:3000
 ————————————
 UI: http://localhost:3001
 UI External: http://192.168.1.3:3001
 ————————————

Grab the address labeled Local, punch it into some of the other browsers on your machine, and enter the address labeled External into any other devices you have sharing the same connection. Then watch the synchronized responses you get across all instances as you interact with any one of them.

For more info on BrowserSync via Grunt go to: http://www.browsersync.io/docs/grunt/

BrowserSync via Gulp

Now we’ll setup the same process, this time using the browser-sync plugin for Gulp.

Install the plugin into your Gulp project with:

npm install browser-sync gulp --save-dev

Comment out or delete the this line:

// var connect = require('gulp-connect');

...and replace it with:

var browserSync = require('browser-sync');

Comment out or delete the existing connect task and add in this new browser-sync task instead:

gulp.task('browser-sync', function() {
  browserSync({
    server: {
      baseDir: "build"
    }
  });
});

At the end of the css and html tasks locate the two places you added the line:

.pipe(connect.reload())

...and replace each of those two lines with:

.pipe(browserSync.reload({stream:true}))

And finally locate your existing start task and edit it to run the browser-sync task instead of the connect task, replacing this:

gulp.task('start', ['connect', 'watch']);

...with this:

gulp.task('start', ['browser-sync', 'watch']);

Now when you run the command:

gulp start

...a browser window will pop open with your preview in it. Just like when you used BrowserSync via Grunt, the preview's URLs will now synchronize across any browser on any device running off your internet connection.

For more info on BrowserSync via Gulp visit: http://www.browsersync.io/docs/gulp/

In the Next Tutorial

You’ve now gone through all the essentials of setting up your own projects from scratch to leverage command line during development. But what about when you don't want to start from scratch. What about when you want to use existing third party frameworks, or you just want to get off to a head start?

In the next tutorial you’ll learn how to use command line to scaffold out completely new projects in just a matter of moments, complete with all the third party code they need, as well as Grunt or Gulp task management all setup and ready to go.

I'll see you in the next tutorial!