Answer the question
In order to leave comments, you need to log in
How to update browser-sync every time files change?
At the first edits and after I save the file - browser-sync updates the server, but then I have to stop and restart gulp, which slows down the work. I would be grateful for your help, thanks
const gulp = require('gulp')
const sass = require('gulp-sass')
const browserSync = require('browser-sync')
gulp.task('sass', () => {
gulp.src('app/styles/sass/**/*.sass')
.pipe(sass({ outputStyle: 'expanded'}))
.pipe(gulp.dest('app/styles/css'))
.pipe(browserSync.reload({stream: true}))
})
gulp.task('html', () => {
gulp.src('app/*.html')
.pipe(browserSync.reload({stream: true}))
})
gulp.task('browser-sync', () => {
browserSync.init({
server: {
baseDir: 'app/'
}
})
})
gulp.task('watch', () => {
gulp.watch('app/styles/sass/**/*.sass', gulp.parallel('sass'))
gulp.watch('app/*.html', gulp.parallel('html'))
})
gulp.task('default', gulp.parallel('browser-sync', 'watch'))
Answer the question
In order to leave comments, you need to log in
one.
const browserSync = require('browser-sync').create();
return gulp.src...
or call callback at the end gulp.watch("app/*.html").on("change", browserSync.reload);
in watch instead of html task.const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();
gulp.task('sass', () => {
return gulp.src('app/styles/sass/**/*.sass')
.pipe(sass({ outputStyle: 'expanded'}))
.pipe(gulp.dest('app/styles/css'))
.pipe(browserSync.stream());
});
gulp.task('browser-sync', (cb) => {
browserSync.init({
server: {
baseDir: 'app/'
}
});
cb();
});
gulp.task('watch', (cb) => {
gulp.watch('app/styles/sass/**/*.sass', gulp.parallel('sass'));
gulp.watch('app/*.html').on('change', browserSync.reload);
cb();
});
gulp.task('default', gulp.parallel('browser-sync', 'watch'));
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question