browserSync

Browsersync is an automation tool that can watch files for changes and inject them into a web page without reload.

Usage:

  • Install Node.js
  • Install Browsersync
    npm install -g browser-sync
  • Start Browsersync
    browser-sync start --proxy "myproject.dev" --files "css/*.css"

Browsersync will create a proxy that will wrap your vhost myproject.dev with a proxy URL.

It can also be used with gulp:

var browserSyncWatchFiles = [
'./style.css',
'./js/*.min.js',
'./*.php'
];
var browserSync = require('browser-sync').create();
var browserSyncOptions = {
proxy: "myproject.dev",
notify: false
};
gulp.task('browser-sync', function () {
browserSync.init(browserSyncWatchFiles, browserSyncOptions);
});

Technology:

Speed up webpage testing time

Testing web pages can be really time consuming. Every CSS, HTML or image change needs a browser refresh. It would be way better if the reloads could be avoided.
Subscribe to browserSync