gulpgulp-sass

Gulp 4: watch task has to be a function


I have a problem with the watch task on SCSS using Gulp 4. I've looked at the documentation on gulp-sass and the various threads on the topic but still I must be making some very banal mistake, as I always receive the error

Error: watching ./assets/css/app.scss: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)

This is my code

`

'use strict';

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

function buildStyles() {
  return gulp.src('./assets/css/app.scss')
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(gulp.dest('.'));
};

exports.buildStyles = buildStyles;

gulp.task('watch', function () {
  gulp.watch('./assets/css/app.scss', ['sass']);
});

exports.default = gulp.series('watch');

`

How can I make this task run, as default task? Thank you very much in advance


Solution

  • I answer my own question: the correct code was this

    'use strict';
    
    const gulp = require('gulp');
    const sass = require('gulp-sass')(require('sass'));
    
    gulp.task('styles', function () {
      return gulp.src('./assets/css/app.scss')
         .pipe(sass.sync().on('error', sass.logError))
         .pipe(gulp.dest('.'));
    });
    
    
    gulp.task('watch', function () {
      gulp.watch('./assets/css/app.scss', gulp.series('styles'));
    });
    
    // Default Task
    gulp.task('default', gulp.parallel('watch'));