[Front-end] Tự động reload browser khi đang code

Posted on Edited on In , Disqus:

Every time CSS comes up, front-end developers get all bored and worn out

Think about it: every time you change the CSS (or SCSS), you have to go back to the web browser and hit reload / F5 / Ctrl + F5

What if there were a way for the browser to reload automatically whenever the code changes?

This post shows you how to use Visual Studio Code together with NodeJs to get the page to reload automatically when the code changes

Table of contents

Step 1: Setting up the environment

There is some software you need to install. These are fairly common

You can pick the LTS build, short for Long term support. This is usually the stable version, with fewer little bugs

Pick LTS for fewer little bugs

Step 2: Installing the nodejs packages

Open Visual Studio Code

Open the Terminal Window

Open the Terminal Window in Visual Studio Code by pressing Ctrl + ` or View > Integrated Terminal

Installing the SASS/LESS compiler

npm install -g node-sass less

The -g flag installs it in the global environment

After installing the SASS/LESS compiler

Installing the gulp toolkit

Install the gulp toolkit to automate the compilation

npm install -g gulp

You can ignore the warnings when installing gulp

Initialize Node.Js

If you have never installed the NodeJs package manager before, you’ll hit this error

Type the command

npm init

to init the settings npm needs, and follow the on-screen instructions.

If you type nothing and hit enter, npm uses the default settings

Step 3: Installing in the local folder

Even though you installed gulp globally, you still need gulp “copied” into the folder that holds your project. The reason is that when the global gulp gets upgraded, or deleted, your local gulp still runs fine with a stable copy in your project folder. Installing gulp locally

npm install gulp --save-dev

Installing the gulp plugins

npm install gulp gulp-sass gulp-less

Step 4: Installing BrowserSync

BrowserSync is the thing that will reload the browser for us automatically. Also in Visual Studio’s Terminal Window, type the command

npm install browser-sync gulp --save-dev

Likewise, you can ignore the warnings and messages

Step 5: Creating the gulp task

A gulp task is a .json file holding the commands and settings needed to configure gulp

  • In Visual Studio Code, open the folder holding your HTML/CSS/JavaScript project
File > Open Folder > \[pick the folder\]
  • Create a file named “gulpfile.js” in the project’s root folder
  • Type the following content:
var gulp = require('gulp');
 
var sass = require('gulp-sass');
 
var browserSync = require('browser-sync');
 
// compile task
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 tells Visual Studio Code how to run the gulp task when told to

    • Press Ctrl + Shift + P, type “Configure Task Runner” and hit enter
    • Pick 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
      }
  ]
}

Running the tasks

  • Create an “index.html” file in the root folder. By default BrowserSync watches this file
  • In Visual Studio Code, press Ctrl + Shift + B to start running the tasks
  • Turn on the Autosave feature in Visual Studio Code
File > Autosave