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 Комментариев