CODEWITHSUNDEEP
javascriptgulpbrowser-sync
Rahul Dagli
Rahul Dagli

Reputation: 4502

Gulp browser sync is not reloading when file is updated

When I make changes in html, css and js file and save it, browser-sync is not reloading the page. I've also included browser-sync in watch. I've installed the plugins which I've imported. I'm not able to identify the root cause.

'use strict';

/*** Import Plugins ***/
var fileinclude = require('gulp-file-include'),
    gulp = require('gulp'),
    watch = require('gulp-watch'),
    sass = require('gulp-sass'),
    cleanCSS = require('gulp-clean-css'),
    concat = require('gulp-concat'),
    concatCss = require('gulp-concat-css'),
    uglify = require('gulp-uglify'),
    pump = require('pump'),
    runSequence = require('run-sequence'),
    htmlmin = require('gulp-htmlmin'),
    imageOptim = require('gulp-imageoptim'),
    inject = require('gulp-inject'),
    browserSync = require('browser-sync').create();

const del = require('del');


/*** Define task ***/

/** Stylesheet **/
gulp.task('sass', function () {
    return gulp.src('./src/scss/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./build/css/compiled'));
});

gulp.task('concat-css', function () {
    return gulp.src('./build/css/compiled/*.css')
        .pipe(concatCss("bundle.css"))
        .pipe(gulp.dest('./build/css/'));
});

gulp.task('minify-css', ['sass'], function () {
    del.sync(['./build/css/compiled/**']);
    return gulp.src('./build/css/bundle.css')
        .pipe(cleanCSS({
            compatibility: 'ie8'
        }))
        .pipe(gulp.dest('./build/css'));
});


/** Javascript **/
gulp.task('concat-scripts', function () {
    return gulp.src('./src/js/*.js')
        .pipe(concat('bundle.js'))
        .pipe(gulp.dest('./build/js'));
});

gulp.task('minify-scripts', function () {
    pump([
        gulp.src('build/js/bundle.js'),
        uglify(),
        gulp.dest('build/js/')
    ]);
});


/** HTML **/
gulp.task('include-html-templates', function () {
    return gulp.src(['src/*.html'])
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file'
        }))
        .pipe(gulp.dest('./build/'));
});

gulp.task('inject-css-js-in-html', function () {
    return gulp.src('./build/*.html')
        .pipe(inject(gulp.src(['./build/js/bundle.js', './build/css/bundle.css'], {
            read: false
        }), {
            relative: true
        }))
        .pipe(gulp.dest('./build'));
});

gulp.task('minify-html', function () {
    return gulp.src('build/*.html')
        .pipe(htmlmin({
            collapseWhitespace: true
        }))
        .pipe(gulp.dest('./build/'));
});

/* Images */
gulp.task('optimize-images', () =>
    gulp.src('src/images/*')
    .pipe(imageOptim.optimize())
    .pipe(gulp.dest('./build/images/'))
);

/* Reloading page on update */
gulp.task('browser-sync', function () {
    browserSync.init({
        server: {
            baseDir: "./"
        },
        startPath: "build/1.html"
    });
});


/*** Watch task ***/
gulp.task('watch', function () {
    gulp.watch('src/scss/*.scss', ['sass']);
    gulp.watch('build/css/compiled/*.css', function () {
        runSequence('concat-css', 'minify-css');
    });
    gulp.watch('src/js/*.js', function () {
        runSequence('concat-scripts', 'minify-scripts');
    });
    gulp.watch('src/**/*.html', function () {
        runSequence('include-html-templates', 'minify-html', 'inject-css-js-in-html');
    });
    gulp.watch('src/images/*', ['optimize-images']);
});



/* Default task sequence */
gulp.task('default', function () {
    gulp.watch(runSequence('browser-sync', 'sass', 'concat-css', 'minify-css', 'concat-scripts', 'minify-scripts', 'include-html-templates', 'minify-html', 'inject-css-js-in-html', 'optimize-images', 'watch'));
});

Upvotes: 0

Views: 992

Answers (1)

TeoMatthew
TeoMatthew

Reputation: 579

You can call a method stream like this (example based on your optimize-images task)

gulp.task('optimize-images', () =>
    gulp.src('src/images/*')
    .pipe(imageOptim.optimize())
    .pipe(gulp.dest('./build/images/'))
    .pipe(browserSync.stream({once: true});
);

the argument once is for reload resources one time at the end.

with this way, browserSync reloads all images files, if you want to reload only changed files, you can use a plugin for filter the files on stream like gulp-changed

Upvotes: 2

Related Questions