CODEWITHSUNDEEP
node.jsnpmsassgulp
Matt
Matt

Reputation: 2611

Gulp 4 wont complete sass task

There have been a few threads related to this issue but i have not managed to find a solution or explanation for my issue.

The Problem

I am using a local version of Gulp 4.0.0 and my pre-existing gulpfile.js was working smoothly.

What i'm doing in my Gulpfile: Watching for changes to Sass files, autoprefixing them and renaming the output file to theme.scss.liquid (for Shopify)and finally replacing some curly brackets to escape Liquid variables.

Sass Task

// Sass
gulp.task('sass', function() {
  gulp.src('./assets/scss/**/**/*.scss')
    .pipe(sass().on('error', function (err) {
      sass.logError(err);
      this.emit('end');
    }))
    .pipe(autoprefixer('last 2 versions'))
    .pipe(rename('theme.scss.liquid'))
    .pipe(replace('"{{', '{{'))
    .pipe(replace('}}"', '}}'))
    .pipe(gulp.dest('./assets/'));
});

Watch Task

gulp.task('watch', function() {
  gulp.watch('./assets/scss/**/**/*.scss', gulp.series('sass'));
});

What Happens

[12:55:33] Starting 'watch'...
[12:55:37] Starting 'sass'...

Any help greatly appreciated!

Upvotes: 1

Views: 234

Answers (1)

d-h-e
d-h-e

Reputation: 2548

I have similar problems with gulp.task and gulp v4

Better take the new gulp 4 syntax. 

const gulp = require('gulp');
// other dependencies
// ....

const sassFn = (cb) => {
  gulp.src('./assets/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer('last 2 versions'))
    .pipe(rename('theme.scss.liquid'))
    .pipe(replace('"{{', '{{'))
    .pipe(replace('}}"', '}}'))
    .pipe(gulp.dest('./assets'));

  cb();
};

const watchFn = () => {
  gulp.watch('./assets/scss/**/*.scss', sassFn);
};

exports.watch = watchFn;
exports.default = watchFn;

I removed gulp.series(), because i think it needs at least 2 tasks to run. Further i changed the src and dest path.

Upvotes: 1

Related Questions