[Front-end] Auto reload browser while coding

Touching CSS is painful every single time

Front-end developer usually do this: edit a single character in CSS (or SCSS), save, then head over web browser, hit reload / F5 / Ctrl + F5

What if there is a way to make the browser auto reload while you’re typing?

This blog post will guide you through how to use Visual Studio Code with NodeJs and some packages to make browser auto reload every time the code change (and you can forget about hitting save regularly too)

Table of contents

Step 1: Setup environment

There will be some software required, but they are quite popular

Choosing LTS for stability
Choosing LTS for stability

Step 2: Install NodeJs Packages

Open Visual Studio Code

Open Terminal Windows

Press Ctrl + ` or View > Integrated Terminal to open Terminal Windows in Visual Studio Code

Install SASS/LESS compiler

npm install -g node-sass less

‘-g’ parameter to install on global environment

After SASS/LESS compiler is installed

Install gulp toolkit

Gulp toolkit help you automate the compiling process (and many more)

npm install -g gulp


you can skip the warnings

Initialize Node.Js

If you haven’t installed NodeJs before, some warnings will show up

type in

npm init

and follow on screen instruction to fill in theses missing parameters. If you just press Enter, NodeJs will use default value

Step 3: Install gulp ask local folder (seriously)

Even though gulp has been installed at global, but you still need gulp to be installed (aka “copy”) to your local project folder.

The reason of doing this is when what ever happen to your global gulp, the local version still work as it should be.

Install gulp on local

npm install gulp --save-dev

Install gulp’s plug-ins

npm install gulp gulp-sass gulp-less

Step 4: Install BrowserSync

BrowserSync is the key here. This plug-in will help you reload the browser automatically

In the same Visual Studio Code’s Terminal Windows, type in

npm install browser-sync gulp --save-dev

Step 5: Create gulp task

Gulp task is a .js file contains the commands and parameter that BrowserSync need.

  • In Visual Studio Code, open your project folder
File > Open Folder > [Select folder]
  • Create a new “gulpfile.js” in root folder (aka the parent folder of your project)

  • type in that file:

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

// compile task
gulp.task('sass', function () {
    gulp.src('css/*.scss')
        .pipe(sass())
        .on('error', swallowError)
        .pipe(gulp.dest(function (f) {
            return f.base;
        }))
        .pipe(browserSync.stream());
});

// browser sync init
gulp.task('browser-sync', ['sass'], function () {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
});

// watch for changes in html, css, scss
gulp.task('default', ['browser-sync'], function () {
    gulp.watch('css/*.scss', ['sass']);
    gulp.watch('*.html')
        .on('change', browserSync.reload);
})

// skip if error occured
function swallowError(error) {
    console.log(error.toString())
    this.emit('end')
}
  • Create tasks.json

    tasks.json let VS Code how to run gulp task when it is command to do so

    • Press Ctrl + Shift + P then type “Configure Task Runner” then enter
    • Choose Others in the list
    • Type in the following code
  {
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "tasks": [
        {
            "taskName": "default",
            "isBuildCommand": true,
            "showOutput": "always",
            "isBackground": true
        }
    ]
  }

Run tasks

  • Create a new “index.html” in root folder. By default, BrowserSync only watch this file
  • In Visual Studio Code, press Ctrl + Shift + B to start running your tasks
  • Enable Autosave in Visual Studio Code

File > Autosave
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s