Gulp sass watch create new css folder

Question

Ihave 2 problems with gulp sass watch

1- when i save my sass file gulp create extra css folder and i already have one

2- gulp watch is only watching for my style.scss and not the other files inside the other folders

• My project structure

  assets
     css
       style.css
     sass
       1-basics
           _base.scss
           _colors.scss
       2-layout
           _grid.scss
           _header.scss
     style.scss
  
  index.html
  

gulp

const gulp          = require('gulp');
const watch         = require('gulp-watch');
const sass          = require('gulp-sass');
const bs            = require('browser-sync').create();

gulp.task('browser-sync', ['sass'], function() {
    bs.init({
        server: {
            baseDir: "./"
        }
    });
});

gulp.task('sass', function () {
    return gulp.src('assets/sass/**/*style.scss')
                .pipe(sass())
                .pipe(gulp.dest('./assets/css'))
                .pipe(bs.reload({stream: true}));
});

gulp.task('watch', ['browser-sync'], function () {
    gulp.watch("assets/sass/**/*style.scss", ['sass']);
    gulp.watch("*.html").on('change', bs.reload);
});

Answer 1

I modified a few parts of your code, see the comments:

const gulp          = require('gulp');

// you are not using the following require, gulp.watch is not the watch plugin below
// it is a function of the gulp object required above
//  const watch         = require('gulp-watch');

const sass          = require('gulp-sass');
const bs            = require('browser-sync').create();

gulp.task('browser-sync', ['sass'], function() {
    bs.init({
        server: {
            baseDir: "./"
        }
    });

    // note I moved the watch tasks to within the browser-sync task
    // and changed the sass watch glob below
    // so it watches both the partials and style.scss

    gulp.watch("assets/sass/**/*.scss", ['sass']);
    gulp.watch("*.html").on('change', bs.reload);
});

gulp.task('sass', function () {
    // this appears to be the correct path to your style.scss file
    return gulp.src('assets/style.scss')
                .pipe(sass())

                // with the change to the gulp.src above, now the gulp.dest is correct
                //  before you had a globstar ** and that effects the base directory
                //  that will be used below.  Without the globstar it is a little easier
                .pipe(gulp.dest('./assets/css'))
                .pipe(bs.reload({stream: true}));
});

// moving the watch tasks now allows this simple default task
gulp.task('default', ['browser-sync']));

// below not needed now
//gulp.task('watch', ['browser-sync'], function () {
    //gulp.watch("assets/sass/**/*style.scss", ['sass']);
    //gulp.watch("*.html").on('change', bs.reload);
//});