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
raddevon
  • 3,290
  • 4
  • 39
  • 49
  • Why do you `.pipe(gulp.dest('dist'))` multiple times in each task by the way? – Oleg Jan 23 '15 at 15:46
  • @Oleg I want both unminified and minified files in my dist directory. – raddevon Jan 23 '15 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? – Ben Jan 23 '15 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. – raddevon Jan 23 '15 at 16:44
  • 1
    maybe you should change to: ````del(['dist/**/*'], cb); ```` – Slawa Eremin Jan 23 '15 at 16:47
  • which files are missing sometimes? is is the same set of files, or does it appear random? – Evan Davis Jan 23 '15 at 16:51
  • @SlawaEremkin I'll try that and report back. – raddevon Jan 23 '15 at 17:35
  • @Mathletics It's random. Sometimes, it's the minified JavaScript. Sometimes the minified CSS is missing. Sometimes the whole folder is empty. Sometimes one of the fonts is missing. – raddevon Jan 23 '15 at 17:36
  • Try running tasks without clean dependency to make sure missing files are caused by it. There have been bugs where streams don't output all the files. – Heikki Jan 23 '15 at 20:39
  • Btw. does the problem happen with the example code too? Gulp log suggests your real gulpfile is more complex. – Heikki Jan 23 '15 at 20:43
  • @Heikki I will try that and report back. You're right about the output. Forgot I had added a few things since posting the example. It exhibited the same behavior before though. I'll update with the output from the example code. – raddevon Jan 23 '15 at 21:05
  • @SlawaEremkin That change doesn't seem to make a difference. Still random missing files after the task is complete. – raddevon Jan 26 '15 at 16:13
  • Did you ever get this sorted? I'm having a similar issue and can't figure it out. – JacobTheDev Apr 11 '17 at 16:22

2 Answers2

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?

Community
  • 1
  • 1
magiccrafter
  • 5,175
  • 1
  • 56
  • 50
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
mw_
  • 37
  • 3
  • 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? – raddevon Jan 26 '15 at 16:08
  • 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. – raddevon Jan 26 '15 at 16:12
  • 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. – mw_ Jan 26 '15 at 19:02
  • 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. – raddevon Jan 26 '15 at 22:14
  • 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/*'`? – mw_ Jan 26 '15 at 23:24
  • Also make sure your using the right pattern: `dist/**` = delete dist folder and all files. `dist/**/*` = keep dist folder but delete all files. `dist/**/*.*` = keep dist folder and any folders within, but delete all files. – mw_ Jan 26 '15 at 23:58
  • Just removed the `clean` dependencies and ran each task independently. Each of them worked just as I expected. Then, I ran the `clean` task which also worked as intended. It's only when you put them all together with the dependencies that things break. Any of those patterns for the clean task would probably work for my purposes. I just want to empty everything before I fill it again with the other tasks. – raddevon Jan 27 '15 at 17:44
  • Yeah, I would suggest you let go on move on to a different solution. Like the example 1 I made a post back, or have a look at the [run-sequence plugin](https://www.npmjs.com/package/run-sequence) and see if that might be a solution for your case. If your dead set to continue as is, good luck, *post back your success), but if not, dive into the `run-sequence` rabbit hole, and see what you can find. godspeed! – mw_ Jan 28 '15 at 10:12
  • Thanks again. Taking a look at run-sequence now. I've also seen the [once module](https://www.npmjs.com/package/once) posited as a possible solution. – raddevon Jan 28 '15 at 12:49
  • No problem. I've been here before. Breaking things into specific microtasks helps me not only visualize what's happening in the log, but fix something when it does go wrong, which it will. Probably verbose overkill for advanced users, but I would highly recommend it. – mw_ Jan 29 '15 at 05:19