Gulp. Browsersync

В этом видео мы рассмотрим очень полезный плагин browsersync. Browsersync самостоятельно перезагружает браузер при изменении файлов в проекте (html/css/js и др).
Browsersync доступен для Grunt и Gulp. Для настройки browsersync в проекте требуется определить конфиг для  browsersync сервера и указать необходимость borwsersync инжектировать скомпилированные файлы в html.
Код урока (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 Комментариев

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

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

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

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

Pin It on Pinterest

Share This