CODEWITHSUNDEEP
node.jsgulpminify
Alan2
Alan2

Reputation: 24592

Gulp file task execution order

I have these tasks:

gulp.task('clean-css', function () {
    del.sync([
        'content/bundles/css.css',
        'content/bundles/css.css.bundle',
        'content/bundles/css.min.css',
        'content/bundles/css.min.css.gz',
        'temp/css/common/*.css',
        'temp/css/user/*.css',
        'temp/css/media/*.css'])
});

gulp.task('make_css_files', ['clean-css'], function () {
  gulp.src('content/less/common/*.less').pipe(less()).pipe(gulp.dest('temp/css/common'));
    gulp.src('content/less/user/*.less').pipe(less()).pipe(gulp.dest('temp/css/user'));
    gulp.src('content/less/media/*.less').pipe(less()).pipe(gulp.dest('temp/css/media'));
});

gulp.task('make_css_bundle', ['make_css_files'], function () {
    return gulp.src(['temp/css/common/*.css', 'temp/css/user/*.css', 'temp/css/media/*.css'])
      .pipe(minifyCSS())
      .pipe(concat('css.min.css'))
      .pipe(gulp.dest('content/bundles/'))
      .pipe(gzip(gzip_options))
      .pipe(gulp.dest('content/bundles/'));
});

When I run the make_css_bundle it runs:

[18:38:04] Using gulpfile C:\H\user\user\Gulpfile.js
[18:38:04] Starting 'clean-css'...
[18:38:04] Finished 'clean-css' after 86 ms
[18:38:04] Starting 'make_css_files'...
[18:38:04] Finished 'make_css_files' after 6.5 ms
[18:38:04] Starting 'make_css_bundle'...
[18:38:04] Finished 'make_css_bundle' after 21 ms
Process terminated with code 0.

However it seems like the clean is running out of order and when I check there's no minified CSS created.

When I take out the dependencies and run the steps manually it works.

Is there some problem I have with the ordering. I thought it would run the dependencies first.

Upvotes: 2

Views: 375

Answers (1)

Jeroen
Jeroen

Reputation: 63830

I've asked a similar question a while ago. Basically, we both have an elaborate duplicate of this question on what it means to return from a task; I recommend reading through that last link and its links.

You need to return the streams from your tasks to help gulp do them in correct order. Since you have 3 different streams in the second task I recommend using merge-stream to return one stream of all three substreams, merged together. E.g.:

var merge = require('merge-stream');

gulp.task('clean-css', function () {
  return del.sync([
    'content/bundles/css.css',
    'content/bundles/css.css.bundle',
    'content/bundles/css.min.css',
    'content/bundles/css.min.css.gz',
    'temp/css/common/*.css',
    'temp/css/user/*.css',
    'temp/css/media/*.css']);
});

gulp.task('make_css_files', ['clean-css'], function () {
  return merge(
    gulp.src('content/less/common/*.less').pipe(less()).pipe(gulp.dest('temp/css/common')),
    gulp.src('content/less/user/*.less').pipe(less()).pipe(gulp.dest('temp/css/user')),
    gulp.src('content/less/media/*.less').pipe(less()).pipe(gulp.dest('temp/css/media'))
  );
});

gulp.task('make_css_bundle', ['make_css_files'], function () {
  return gulp.src(['temp/css/common/*.css', 'temp/css/user/*.css', 'temp/css/media/*.css'])
    .pipe(minifyCSS())
    .pipe(concat('css.min.css'))
    .pipe(gulp.dest('content/bundles/'))
    .pipe(gzip(gzip_options))
    .pipe(gulp.dest('content/bundles/'));
});

Upvotes: 2

Related Questions