8

I have a gulpfile that should clean out my dist directory before minifying code. Sometimes, the clean task is still running while code is being minified resulting in some missing files.

What's causing it to do that? My understanding is that the dependencies for a task will be completed before the task runs, and a dependency will only run once even if it is a dependency for multiple tasks.

var gulp = require('gulp');
var gulpLoadPlugins = require('gulp-load-plugins');
var plugins = gulpLoadPlugins();
var del = require('del');

gulp.task('default', ['css', 'js', 'fonts']);

gulp.task('clean', function(cb) {
  del(['dist/**'], cb);
});

gulp.task('css', ['clean'], function() {
  return gulp.src('style.css')
            .pipe(plugins.autoprefixer({
              browsers: ['last 2 versions']
            }))
            .pipe(gulp.dest('dist'))
            .pipe(plugins.minifyCss({
              noRebase: true,
              keepSpecialComments: 0
            }))
            .pipe(plugins.rename({extname: '.min.css'}))
            .pipe(gulp.dest('dist'));
});

gulp.task('js', ['clean'], function() {
  return gulp.src('scripts.js')
            .pipe(gulp.dest('dist'))
            .pipe(plugins.uglify({preserveComments: 'some'}))
            .pipe(plugins.rename({extname: '.min.js'}))
            .pipe(gulp.dest('dist'));
});

gulp.task('fonts', ['clean'], function() {
  return gulp.src('fonts/*')
            .pipe(gulp.dest('dist/fonts'));
});

UPDATE: Gulp output suggests that the clean task is done before the others start, but sometimes not all the output files are in the dist directory. Sometimes they are.

[09:47:15] Using gulpfile /Users/raddevon/Documents/projects/AlphaBlog/theme/gulpfile.js
[09:47:15] Starting 'clean'...
[09:47:15] Finished 'clean' after 8.06 ms
[09:47:15] Starting 'css'...
[09:47:15] Starting 'js'...
[09:47:16] Starting 'fonts'...
[09:47:16] Finished 'js' after 399 ms
[09:47:16] Finished 'css' after 899 ms
[09:47:16] Finished 'fonts' after 267 ms
[09:47:16] Starting 'default'...
[09:47:16] Finished 'default' after 7.78 μs
Improve this question
13
  • Why do you .pipe(gulp.dest('dist')) multiple times in each task by the way? Commented Jan 23, 2015 at 15:46
  • @Oleg I want both unminified and minified files in my dist directory. Commented Jan 23, 2015 at 15:49
  • What leads you to believe that the clean task is not done before other things start running? Can you post some gulp output? Commented Jan 23, 2015 at 16:04
  • @ben Added to the post. Not all the files are in the folder at the end. Sometimes they are, sometimes they aren't. It seems like files start getting moved or compiled into dist before clean is done. Otherwise, I can't understand why they wouldn't be there. It's very inconsistent. Affects different files each time. Commented Jan 23, 2015 at 16:44
  • 1
    maybe you should change to: del(['dist/**/*'], cb); Commented Jan 23, 2015 at 16:47

2 Answers 2

Reset to default
11

Use del.sync() and the other tasks will start only after the clean task completion.

gulp.task('clean', function () {
    del.sync(['./build/**']);
});

Also check this thread: How to clean a project correctly with gulp?

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

3

Have a look at the running tasks in series, from the Gulp documentation.

If your tied to having one clean task then maybe try returning the stream per the second example from above, and see if that helps.

I personally like to make clean tasks more specific, (more like the first example), so you could always try something like:

...

// minify css
gulp.task('clean:css', function(cb) {
  del(['dist/*.css'], cb);
});

gulp.task('comp:css', ['clean:css'], function(cb) {
  return gulp.src('style.css')
    .pipe(minifyCss())
    .pipe(rename('style.min.css'))
    .pipe(gulp.dest(build.css), cb);
});

gulp.task('css', ['comp:css']);

// concat js
gulp.task('clean:js', function(cb) {
  del(['dist/*.js'], cb);
});

// and so on
Improve this answer

10 Comments

Thanks for the tip. I had not noticed that in the example. Maybe you could clarify one thing for me: why is assigning the gulp code to a variable and then returning the variable different from returning the output of the gulp code? Wouldn't that also return a stream?
That change doesn't seem to help. First run, I ended up with all the files except the non-minified scripts file. Second run, I had all except the minified scripts. Still inconsistent.
Im not sure to be honest. Im think whats happening is your initial clean task is getting called as a dependency 3 separate times. So even though the tasks technically run at the same time, maybe 1 is finishing before another one starts. So task 1 finishes and writes its files before task 2 even begins, then task 2 wipes the directory, again, removing those files from task 1, etc., this would explain the results your having.
That's definitely in line with the result I'm seeing, but it's opposite what the comments in that running tasks in a series example says. It clearly says a dependency will only run once even if it's repeated in the code. Not sure why it's misbehaving. Thanks for your help.
No problem. The only other thing I think it could be is how your paths are setup. Make sure it's absolutely the clean task that is the issue. Manually run the other tasks 1 at a time, and make sure everything is outputting correctly. I also noticed that your gulpfile is in the same directory as your style.css and scripts.js, is that right? Is your fonts task working correctly? I noticed its 'fonts/*'; shouldn't it be 'dist/fonts/*'?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.