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() {
    browsersync.init({
        server: {
          baseDir: "./"
        },
        port: 3000
      });
}

function browserSyncReload(done) {
    browsersync.reload();
    done();
  }

function compileSass() {
    return src('./scss/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(minifyCss())
        .pipe(dest('./css'))
        .pipe(browsersync.stream());
}

function compileTs() {
    return src('./ts/**/*.ts')
    .pipe(ts())
    .pipe(uglify())
    .pipe(dest('./js'))
    .pipe(browsersync.stream());
}

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

0 Comments

Submit a Comment

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

Подписаться на рассылку

Будьте в курсе - получайте последние статьи на свой email

Ваша подписка успешно оформлена

Pin It on Pinterest

Share This