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
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