How can I make gulp-watch generate CSS file when SASS changes?

Question

Here is my code:

gulp.task('sass', function () {
    gulp.src('./public/stylesheets/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./public/stylesheets/'));
});

gulp.task('watch-saas', function () {
    watch('./public/stylesheets/*.scss', function () {
        gulp.start('sass');
    });
});

Output:

[19:15:46] Using gulpfile ~/WebstormProjects/mySite/gulpFile.js
[19:15:46] Starting 'watch-saas'...
[19:15:46] Finished 'watch-saas' after 38 ms

Im afraid no CSS. Any ideas how to make this work?

I think my code looks very much like the example code here. And the 'sass' task runs fine on its own.

Answer 1

I'm not that experienced in Gulp, but I usually use:

gulp.task('watch-saas', function () {
    return gulp.watch(['./public/stylesheets/*.scss'], ['sass']);
});

I assume that you have to return the result in your task, because it's an asynchronous task.

Answer 2

We should first pipe it and ask gulp to watch it in changes in our scss or file we alerted

var gulp = require('gulp')
var watch = require('gulp-watch');

gulp.task('styles', function(){
    return  gulp.src(''./public/stylesheets/.scss'').pipe(gulp.dest('./sass'));  
});

watch('./public/stylesheets/.scss', function(){
    gulp.start('styles');
 });

styles is the task name which I assigned here