Gulp. Browsersync

Home » Tutorials » Developers tools » Gulp. Browsersync
In this tutorial we’ll consider a very useful plugin browsersync. Browsersync reload browser itself after some changes in files (html/css/js etc) appears.
Browsersync’s available for Grunt and Gulp. To set browsersync in the project it needs to define config for browsersync server and specify browsersync to inject compliled files to index.html

Code lesson (gulpfile.js)

const {src, dest, series, watch, parallel} = require('gulp');
const sass = require('gulp-sass');
const minifyCss = require('gulp-clean-css');
const ts = require('gulp-typescript');
const uglify = require('gulp-uglify');
const browsersync =  require('browser-sync').create();
sass.compiler = require('node-sass');

function serve() {
        server: {
          baseDir: "./"
        port: 3000

function browserSyncReload(done) {

function compileSass() {
    return src('./scss/**/*.scss')
        .pipe(sass().on('error', sass.logError))

function compileTs() {
    return src('./ts/**/*.ts')

function watchChanges() {
    watch('scss/**/*.scss', series(compileSass, browserSyncReload));
    watch('./ts/**/*.ts', series(compileTs, browserSyncReload));
exports.default = parallel(serve, watchChanges);


Submit a Comment

Your email address will not be published. Required fields are marked *

The reCAPTCHA verification period has expired. Please reload the page.

Pin It on Pinterest

Share This