Browsersync doesn't refresh on wamp

Question

I have a small problem against I'm fighting since few hours. I'd like to use gulp for watching scss files, convert them to css then reload browser.

It worked until reload browser. So sass is working with gulp but not Browsersync. Here is my gulpfile.js, maybe someone can help ?

var gulp = require('gulp');  
var sass = require('gulp-sass');  
var browserSync = require('browser-sync');

gulp.task('sass', function () {  
    gulp.src('webroot/css/style.scss')
        .pipe(sass({includePaths: ['scss']}))
        .pipe(gulp.dest('webroot/css'));
});

gulp.task('browser-sync', function() {  
    browserSync.init(["./**/*.css", "./**/*.php","./**/*.ctp","./**/*.js"], {
        server: {
            baseDir: "./",
            proxy:{target:'cake.dev', ws : true}
        },
        logLevel: "debug",
    });
});

gulp.task('default', ['sass', 'browser-sync'], function () {  
    gulp.watch("webroot/css/*.scss", ['sass']);
});

Ps : I'm working with CAKEPHP 3.

score 1 · Answer 1 · answered Jan 17 '18 at 22:49

1

So you need to tell browserSync to reload at the end of the sass task:

gulp.task('sass', function () {  
  gulp.src('webroot/css/style.scss')
    .pipe(sass({includePaths: ['scss']}))
    .pipe(gulp.dest('webroot/css'))
    .pipe(browserSync.reload({stream:true});
});

answered Jan 17 '18 at 22:49

Mark

143,421
24
428
436

Yes thanks ! But .pipe(browserSync.reload({stream:true}); doesn't change anything. Also I don't have the notification of browsersync when the browser open. – Chris Carton Jan 18 '18 at 12:09

score 0 · Answer 2 · answered Jan 18 '18 at 15:41

I solved it :

var gulp = require('gulp');  
var sass = require('gulp-sass');  
var browserSync = require('browser-sync');

gulp.task('sass', function () {  
    gulp.src('webroot/css/style.scss')
        .pipe(sass({includePaths: ['scss']}).on('error', sass.logError))
        .pipe(gulp.dest('webroot/css'));
});

gulp.task('browser-sync', function() {  
    browserSync.init(["webroot/css/*.css", "webroot/js/*.js"], {
        proxy   : "http://cake.dev/",
    });
});

gulp.task('default', ['sass', 'browser-sync'], function () {  
    gulp.watch("webroot/css/*.scss", ['sass']);
});

You don't have to use server{//...} in browserSync init because that is to CREATE a server. Instead if you are on wamp you have to use simply proxy... (if you have a virtual host you must modify it and replace "require local" by "require all granted", I THINK...).

And on the "on error" condition is to not stop the program if you make an error writing your scss and saving it.

So you can make mistakes, but you are responsable to learn about it.

Thanks Everyone. Hope this will help somebody else one day.

Browsersync doesn't refresh on wamp

2 Answers2