How to make Gulp complete one task, and only then start the next one

217 Views Asked by At

I've set up some simple Gulp tasks to process my CSS files.

The tasks are put together in one 'master' task:

gulp.task('process-css', ['concatCSS', 'minifyCSS', 'renameCSS']);

Just for reference, the definition of the concrete tasks follows:

gulp.task('minifyCSS', function() {
    return gulp.src('themes/my_theme/css/dist/*.css')
        .pipe(sourcemaps.init())
        .pipe(minifyCSS())
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('themes/my_theme/css/dist/'));
});

gulp.task('concatCSS', function() {

    var files = [
        'themes/rubbish_taxi/css/bootstrap.css',
        'themes/rubbish_taxi/css/custom.css',
        'themes/rubbish_taxi/css/responsive.css',
        'themes/rubbish_taxi/css/jquery.fancybox.css'
    ];

    return gulp.src(files)
        .pipe(concat("bundle.css"))
        .pipe(gulp.dest('themes/my_theme/css/dist/'));
});

gulp.task('renameCSS', function() {
    gulp.src('themes/my_theme/css/dist/bundle.css')
        .pipe(rename(function(path) {
            path.basename += ".min";
        }))
        .pipe(gulp.dest("themes/my_theme/css/"));
});

The tasks complete without an error, but the problem is that minifyCSS does not minify the source file. An unminified version of the files is saved as bundle.min.css. I believe that the reason is that minifyCSS runs before concatCSS completed.

How can I make the tasks be executed synchronously? Is my only option to specify which tasks should be executed before a give task like this:

gulp.task('minifyCSS', ['concatCSS'], function() {..} ?

It worked when I set it this way, but I wanted to avoid this to make code more readable.

1

There are 1 best solutions below

1
On

gulp.task('minifyCSS', ['concatCSS'], function() {..} ?

It worked when I set it this way, but I wanted to avoid this to make code more readable.

More readable how? You're stating that minifyCSS is dependent on concatCSS. The line of code I quoted above is how you explain this dependency to gulp.

The alternative is to use something like run-sequence, but I think avoiding functionality built into the tool to solve the exact problem you're facing isn't justified by the desire for a subjective improvement in readability.