CODEWITHSUNDEEP
javascripthtmlcssbrowser-sync
brent_white
brent_white

Reputation: 1019

Browsersnyc not auto reloading on changes made to css

Got Browsersync to work with my Gulp file but I've really been struggling with getting browsersync to auto reload my static site when I make changes to the main.scss file. I've followed all the documentation on there webpage thoroughly and I still cant get page to auto refresh.

I know parts of my integration with gulp are working because when I run my default gulp task which is linked to the browser-sync task a browser window fires up with the server but when I make s simple change to my main.scss file nothing auto reloads. I have to manually refresh to see changes.

Here's my gulpfile..What am I missing in here? 

// refferance gulp
var gulp = require('gulp');

// browser-sync
var browserSync = require('browser-sync');
var reload = browserSync.reload;
// other packages installed
var concat = require('gulp-concat');
var cssmin = require('gulp-minify-css');
var rename = require('gulp-rename');
var scss = require('gulp-sass');
var uglify = require('gulp-uglify');

// browser-sync task
gulp.task('browser-sync',['styles'] , function(){
    browserSync.init({
        server:'./'
    });
    gulp.watch('.//src/scss/*.scss',['styles']);
    gulp.watch('.//*.html').on('change',browserSync.reload);
});

// scripts task
gulp.task('scripts', function(){
    // fetch all files in the .js extension in the /src/js directory
    return gulp.src('./src/js/*.js')
    // concatenate files and save as app.js
    .pipe(concat('app.js'))
    // save app.js in dest directory
    .pipe(gulp.dest('./dest/js/'))
    .pipe(uglify())
    // minfiy file and rename to app.min.js
    .pipe(rename({
        suffix: '.min'
    }))
    // save in dest directory
    .pipe(gulp.dest('./dest/js'));
});


// styles task
gulp.task('styles', function(){
     // fetch all files with scss extension in /src/scss directory
    return gulp.src('./src/scss/*.scss')
    // compile scss
    .pipe(scss())
    // output css in css dest directory
    .pipe(gulp.dest('./dest/css/'))
    // minify css
    .pipe(cssmin())
    // rename as styles.min.css
    .pipe(rename({
        suffix: '.min'
    }))
    // save in same directory
    .pipe(gulp.dest('./dest/css'))
    // reload browser by injecting css into browser via browsersync
    // .pipe(reload({stream:true}));
    .pipe(browserSync.stream());
});

gulp.watch('./src/js/*.js', ['scripts']);


// we use the watch task in the default task bellow
gulp.task('watch',function(){
    // watch js
    gulp.watch('./src/js/*.js',['scripts']);
    // watch scss
    gulp.watch('./src/scss/*.scss',['styles']);
});

// default task allows us to run all tasks at once by just running `gulp` in command line

gulp.task('default', ['scripts', 'styles', 'browser-sync', 'watch']);

Upvotes: 0

Views: 782

Answers (1)

Jhey
Jhey

Reputation: 1377

If you take out 

gulp.watch('.//src/scss/*.scss',['styles']);
gulp.watch('.//*.html').on('change',browserSync.reload);

and replace with

gulp.watch('dest/**/*.html').on('change', browserSync.reload);

you should see changes providing that you are looking at a HTML file located under the dest directory.

I would also check that your styles and scripts tasks are firing. You should see this in the terminal/cli. If they are firing, any reload will also be logged too.

Hope that helps you out!

Upvotes: 2

Related Questions