browserSync not recompiling SCSS files

Question

I just started using Gulp and I have a problem that I can't find any solution to. I've read every single question about it, but nothing solved it. I am also using XAMPP and a virtual host.

Here is the gulpfile.js

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

var styleSrc = "./resources/scss";

gulp.task('default', ['watch','sass'], function(){});

// Watch for changes
gulp.task('watch', function(){

    // Serve files from the root of this project
    browserSync.init({
        proxy: 'starter.web'
    });

    gulp.watch(styleSrc,['sass']).on('change', browserSync.reload);
    gulp.watch('./public/*.php').on('change', browserSync.reload);

});

gulp.task('sass', function(){
    return gulp.src('./resources/scss/main.scss')
        .pipe(sass())
        .pipe(gulp.dest('./public/css'))
        .pipe(browserSync.reload({ stream: true }))
});

The problem is, when I start gulp, it compiles the scss file to css and starts the browserSync, and after that, if I change anything in the php file, it is fine, but if I change anything in the scss file, this is the output I get:

cmd.exe /D /C call "C:\Users\User\AppData\Roaming\npm\sass.cmd" --no-cache --update main.scss:main.css
Could not find an option named "cache".

Usage: sass <input.scss> [output.css]
       sass <input.scss>:<output.css> <input/>:<output/>

=== Input and Output ===================
    --[no-]stdin               Read the stylesheet from stdin.
    --[no-]indented            Use the indented syntax for input from stdin.
-I, --load-path=<PATH>         A path to use when resolving imports.
                               May be passed multiple times.

-s, --style=<NAME>             Output style.
                               [expanded (default), compressed]

    --update                   Only compile out-of-date stylesheets.

=== Source Maps ========================
    --[no-]source-map          Whether to generate source maps.
                               (defaults to on)

    --source-map-urls          How to link from source maps to source files.
                               [relative (default), absolute]

    --[no-]embed-sources       Embed source file contents in source maps.
    --[no-]embed-source-map    Embed source map contents in CSS.

=== Other ==============================
    --watch                    Watch stylesheets and recompile when they change.
    --[no-]poll                Manually check for changes rather than using a native watcher.
                               Only valid with --watch.

    --[no-]stop-on-error       Don't compile more files once an error is encountered.
-i, --interactive              Run an interactive SassScript shell.
-c, --[no-]color               Whether to emit terminal colors.
-q, --[no-]quiet               Don't print warnings.
    --[no-]trace               Print full Dart stack traces for exceptions.
-h, --help                     Print this usage information.
    --version                  Print the version of Dart Sass.

Process finished with exit code 64

It doesn't recompile it. Anyone have any idea what is happening?

Answer 1

Am not an expert in gulp

I am assuming you are using gulp 3

your code should be

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

    var styleSrc = "./resources/scss";

    gulp.task('sass', function(){
     return gulp.src('./resources/scss/main.scss')
        .pipe(sass())
        .pipe(gulp.dest('./public/css'))
        .pipe(browserSync.reload({ stream: true }))
    });


    gulp.task('browser-sync',['sass'] function() {
       browserSync.init({
           server: {
              baseDir: "./"
             }
          });
           gulp.watch(styleSrc, ['sass']);
           gulp.watch("./public/*.php").on('change', browserSync.reload);
       });
    gulp.task('default', ['sass',  'browser-sync']

Use this as your gulpfile.js

and run gulp