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