browserSync not working in gulpfile

Question

i am new to node.js and gulp. I am trying to a get browserSync working with php and a watch on the scss files, to compile them automatically.

Here is my gulpfile.

var gulp = require('gulp');
var connectPHP = require('gulp-connect-php');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');

gulp.task('sass', function(){
    return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])
        .pipe(sass())
        .pipe(gulp.dest("src/css"))
        .pipe(browserSync.stream());
});

var reload  = browserSync.reload;

gulp.task('php', function() {
    connectPHP.server({ base: "src", port: 8010, hostname:"0.0.0.0", keepalive: true});
});
gulp.task('browser-sync',['php'], function() {
    browserSync.init({
        proxy: '127.0.0.1:8010',
        port: 8080,
        open: true,
        notify: false
    });
});

gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss','src/scss/*.scss'], ['sass']);
gulp.watch("src/*.html").on('change', browserSync.reload);

gulp.task('js', function(){
    return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/popper.js/dist/umd/popper.min.js'])
        .pipe(gulp.dest("src/js"))
        .pipe(browserSync.stream());
});



gulp.task('default', ['js','browser-sync','php'], function () {
    gulp.watch(['build/*.php'], [reload]);
});

When starting gulp, there is no error. Compiling works too. But i have to refresh the browser. Don't know what i am doing wrong. Can you tell me whats wrong?

Greetings, xola

Answer 1

Thank you for the hints.

I realized that the watcher only watches html files. But i always was editing php files. Also I moved all the watchers to the default task.

So this is my working gulpfile for browser-sync, php and the watchers:

var gulp = require('gulp');
var connectPHP = require('gulp-connect-php');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');

//Compile sass into CSS & auto-inject into browsers
//This Task is run by a watcher inside the default task
gulp.task('sass', function(){
    return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])
        .pipe(sass())
        .pipe(gulp.dest("src/css"))
        .pipe(browserSync.stream());
});

//Apply and Configure PHP on Port 8010
gulp.task('php', function() {
    connectPHP.server({
        base: "src",
        port: 8010,
        hostname:"0.0.0.0",
        keepalive: true
    });
});

//Apply and configure BrowserSync on Port 8080 to proxy the php instance on Port 8010
gulp.task('browser-sync',['php'], function() {
    browserSync.init({
        proxy: '127.0.0.1:8010',
        port: 8080,
        open: true,
        notify: false
    });
});

//Move the javascript files into our /src/js folder
gulp.task('js', function(){
    return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/popper.js/dist/umd/popper.min.js'])
        .pipe(gulp.dest("src/js"))
        .pipe(browserSync.stream());
});


//Default task starts php, browsersync and js copy task and also adds three watchers to reload the browser automatically on Change (and if needed calling sass, which compiles and moves the scss and reloads the browser itself)
gulp.task('default', ['php','browser-sync','js'], function () {
    gulp.watch("src/*.html").on('change', browserSync.reload);
    gulp.watch("src/*.php").on('change', browserSync.reload);
    gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss','src/scss/*.scss'], ['sass']);
});

Answer 2

I think you need to have the watch functions inside a task as well.

gulp.task('watcher', function () {
    gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss','src/scss/*.scss'], ['sass']);
    gulp.watch("src/*.html").on('change', browserSync.reload);
});

You would start the watch task like this

gulp watcher