CODEWITHSUNDEEP
javascriptnode.jsgulp
any_h
any_h

Reputation: 568

What are gulp task async run hints?

I've got two tasks.

Sass:

gulp.task('sass', function() {
    gulp.src('src/sass/**.{scss, sass}')
        .pipe(sourcemaps.init())
            .pipe(sass({outputStyle: 'compressed'}))
            .on('error', handleErrors)
            .pipe(autoprefixer())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('dist/css'))
        .pipe(browserSync.reload({stream: true}))
});

And CSS optimization task:

gulp.task('cssopt', ['sass'], function() {
    gulp.src('dist/css/style.css')
        .pipe(uncss({html: ['http://example.dev//']}))
        .pipe(cmq({log: true}))
        .pipe(shrink())
        .pipe(rename({suffix: '.opt'}))
        .pipe(gulp.dest('dist/css'))
});

The cssopt task relies on the sass task, cause it's using the style.css file that the sass generates. But it won't work, it can't find the style.css file, cause it's not there. If I run the sass separately first, then the cssopt works cause the style.css is there.

From the docs (emphasis mine):

An array of tasks to be executed and completed before your task will run.

Docs also say:

Note: Are your tasks running before the dependencies are complete? Make sure your dependency tasks are correctly using the async run hints: take in a callback or return a promise or event stream.

Which I don't quite understand: "async run hints"... wat...

I tried to run a clean task as deps for sass and that worked well, though.

I could smash these into one task, but the cssopt takes quite long (the uncss is pretty slow when you give it an URL), and I need the style.opt.css file only on production anyway.

I am using the latest version (1.3.3) of gulp-sass.

Upvotes: 3

Views: 1738

Answers (1)

Bergi
Bergi

Reputation: 665111

"async run hints"... wat...

You need to hint the gulp system that your task is async. You can do that by taking a callback argument to your task function, or by returning an event stream or promise. That's what your tasks are lacking, they return undefined currently so gulp expects them to have finished immediately. Try

gulp.task('sass', function() {
    return gulp.src('src/sass/**.{scss, sass}').…

Upvotes: 4

Related Questions