E
E
embiid2020-03-09 16:08:55
gulp.js
embiid, 2020-03-09 16:08:55

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

1 answer(s)
X
xdevelx, 2020-03-09
@embiid

one.

const browserSync = require('browser-sync').create();

https://browsersync.io/docs/gulp
2. https://gulpjs.com/docs/en/getting-started/async-c... - you need to return stream in tasks return gulp.src...or call callback at the end
3. what does the html task do you? if you need to track changes in html and reload the page, then
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 question

Ask a Question

731 491 924 answers to any question