CODEWITHSUNDEEP
gulpwampcakephp-3.0gulp-sassgulp-browser-sync
Chris Carton
Chris Carton

Reputation: 59

Browsersync doesn't refresh on wamp

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.

Upvotes: 0

Views: 721

Answers (2)

Chris Carton
Chris Carton

Reputation: 59

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.

Upvotes: 0

Mark
Mark

Reputation: 180641

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});
});

Upvotes: 1

Related Questions