Using BrowserSync and Gulp for Automatic Browser Refresh in Web Development

When developing web applications, developers frequently use shortcuts like Ctrl+C, Ctrl+V, Ctrl+S, and F5 to refresh the browser; BrowserSync.io automates this process by monitoring file changes and refreshing the browser instantly, enabling a true live‑preview workflow.

Related foundational technologies

Node.js – a JavaScript runtime built on Chrome V8, featuring an event‑driven, non‑blocking I/O model.

Gulp – a front‑end automation tool used for bundling, minifying, and other build tasks.

Goal

Edit local web project files and see the results immediately in the browser without manual refresh.

Implementation idea

Use BrowserSync to watch the webapp directory of the project.

When a file changes, copy it to a local Tomcat instance.

Watch file types such as jsp , html , css , and js .

Automatically refresh the browser to display the latest changes.

Environment preparation

Install Node.js (refer to the provided link).

Create a new working directory.

Run npm init to generate package.json .

Install BrowserSync globally: npm install -g browser-sync .

Install Gulp locally: npm install gulp --save-dev .

Simple example – gulpfile.js

var gulp = require('gulp');
// Register hello task
gulp.task('hello', function(){
    console.log("hellp work");
});
// Set default task
gulp.task('default', ['hello']);

Running gulp executes the default task and displays the output in the console.

Actual usage example

// Import gulp and browser-sync
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var changed = require('gulp-changed');
var reload = browserSync.reload;

// Define source paths
var SRC_JS = 'C:/ideaworkspace/duty_sys/src/main/webapp/*/*js';
var SRC_CSS = 'C:/ideaworkspace/duty_sys/src/main/webapp/*/*css';
var SRC_HTML = 'C:/ideaworkspace/duty_sys/src/main/webapp/*/*html';
var SRC_JSP = 'C:/ideaworkspace/duty_sys/src/main/webapp/*jsp';
var DEST = 'C:/javateam/tomcat-6.0.29/webapps/ROOT';

// Watch and copy changed files
gulp.task('src_watch', function(){
    return gulp.src([SRC_JS, SRC_CSS, SRC_HTML, SRC_JSP])
        .pipe(changed(DEST))
        .pipe(gulp.dest(DEST));
});

// Reload task
gulp.task('reload', function(){
    reload();
});

// BrowserSync initialization
gulp.task('browser-sync', function(){
    browserSync.init({
        proxy: "http://xxx.yyy.com:8080",
        baseDir: "C:/ideaworkspace/duty_sys/src/main/webapp/",
        browser: ['chrome'],
        port: 8080,
        reloadOnRestart: false
    });
    gulp.watch([SRC_JS, SRC_CSS, SRC_HTML, SRC_JSP], ['src_watch','reload']);
});

// Default task starts BrowserSync
gulp.task('default', ['browser-sync']);

Running gulp starts the local web project, opens a browser automatically, and refreshes it whenever files are saved in the editor.

Principle

BrowserSync leverages Node.js’s libev library to interact with system resources; it creates a proxy URL and injects a small JavaScript snippet into the served pages that commands the browser to reload when changes are detected.

Conclusion

Using BrowserSync with Gulp streamlines front‑end development by removing the need for manual page refreshes, allowing developers to focus on coding while the tool handles live reloading.