Gulp 4 watch all sass files, compile one

Question

My file structure is:

sass
-main.sass
-variables.sass
-containers.sass
-buttons.sass
-helpers.sass

css
-main.css

In my main.sass file, I'm importing all the other sass files:

@import "variables";
@import "containers"; 
@import "buttons"; 

//etc...

In gulp I want to watch any changed scss file and compile only main.sass into main.css.

This is what I have:

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

function styles() {
  return gulp.src('sass/main.sass', {
    sourcemaps: true
  })
  .pipe(sass().on('error', sass.logError))
  .pipe(gulp.dest('css/'));
}

function watch() {
  gulp.watch('sass/**/*.sass', styles);
}

var build = gulp.parallel(styles, watch);

gulp.task(build);
gulp.task('default', build);

The files are being watched but when I update one, the main.css file is not updated.

Lukas Körfer Lukas Körfer · Accepted Answer · 2019-06-29T12:21:42

I believe one of your problems could be that you define a watching task via gulp.watch(...) but its reference is lost and so it never gets called. However, I don't really understand what you try to achieve with the call to parallel(). I'm currently working on a similar use case with a build script like the following:

var gulp = require('gulp');

function styles() {
    return gulp.src('...')
        .pipe(...)
        .pipe(gulp.dest('...'));
}

exports.build = gulp.watch('...', styles);

This should be a minimal working example, just call gulp build.

Gulp 4 watch all sass files, compile one

1 Answers