Setting up gulp-sass on Gulp 4

Question

I recently updated Gulp to version 4 after I did some upgrades on the dependencies in my package.json file. I'm having trouble setting it up with the new gulp.series/gulp.parallel so that it works like it did before I did the upgrade.

This is how my Gulpfile.js looks at the moment:

const gulp = require('gulp'),
      sass = require('gulp-sass'),
      autoprefixer = require('gulp-autoprefixer'),
      cleanCSS = require('gulp-clean-css'),
      browserSync = require('browser-sync').create();

gulp.task('styles', gulp.series(function() {
    gulp.src('sass/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false,
            grid: "no-autoplace"
        }))
        .pipe(gulp.dest('./css/'))
        .pipe(browserSync.stream());
}));

//Watch task
gulp.task('default', gulp.parallel('styles',function() {
    gulp.watch('sass/**/*.scss',gulp.parallel('styles'));
    gulp.watch("*.html").on('change', browserSync.reload);
}));

gulp.task("sync", gulp.parallel("default",function(){
    browserSync.init({
        server: "./",
        notify: false
    });
}));

And this is how it looked before I upgraded to version 4, when it worked like I wanted it to:

const gulp = require('gulp'),
      sass = require('gulp-sass'),
      autoprefixer = require('gulp-autoprefixer'),
      cleanCSS = require('gulp-clean-css'),
      browserSync = require('browser-sync').create();

gulp.task('styles', function() {
    gulp.src('sass/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('./css/'))
        .pipe(browserSync.stream());
});

//Watch task
gulp.task('default',function() {
    gulp.watch('sass/**/*.scss',['styles']);
    gulp.watch("*.html").on('change', browserSync.reload);
});

gulp.task("sync", ["default"], function(){
    browserSync.init({
        server: "./",
        notify: false
    });
})

The way I want it to behave is to obviously compile the SCSS files to CSS on save. And that's working, partially. When editing the main.scss file (located in sass/main.scss, the CSS is generated immediately like I want and new CSS is generated on each save. But if I edit some of the partial files, located in sass/partials/_file.scss, it only works on the first save after starting up Gulp. If I try to save a second time, the changes are not generated as CSS and the terminal log is not updated to a new timestamp.

I guess that I have gulp.series/gulp.parallel set up wrong. And I suspect that I somehow have to apply this on the pipe methods, but I don't know how.

Setting up gulp-sass on Gulp 4

Answers (1)

Related Questions