Gulp clean folder then create folder

Question

I have a pretty simple gulp task that I'm trying to accomplish:

gulpfile.js

gulp.task('build-dev', ['lint', 'jscs', 'clean-all', 'usemin'])

gulp.task('clean-all', function () {
    return gulp.src(config.dest, { read: false })
        .pipe(clean());
});

gulp.task('usemin', function () {
    return gulp.src('index.html')
      .pipe(usemin({
          css: [rev(), minifyCss, 'concat'],
          appjs: [uglify()],
          vendorjs: [uglify()]
      }))
      .pipe(gulp.dest(config.dest + '/'));
});

gulp.config.js

module.exports = function() {
var root = './app/';
var dest = './build/dist';
var bower = {
    json: require('./bower.json'),
    directory: './bower_components/'
};
var nodeModules = 'node_modules';

var config = {
    build: 'build/',
    root: root,
    dest: dest
};

return config;

};

It seems like when I run this if I have files in the dist folder then it will successfully clean the files out of it, but not complete the usemin task. If I have a clean dist folder and run it then it will complete usemin

What am I missing so that it clears the folder, then re-creates it to place the usemin files in it again?

score 1 · Accepted Answer · edited May 23 '17 at 11:44

It seems that due to asynchronously running of the tasks your defined tasks are not running simultaneously. You should try out this chain your tasks as it is described on this answer.

//fetch tasks
gulp.task('build-dev', ['lint', 'jscs', 'clean-all', 'usemin'])

gulp.task('clean-all', function () {
    return gulp.src(config.dest, { read: false })
        .pipe(clean());
});

//wait clean-all to exit
gulp.task('usemin', ['clean-all'], function () {
    return gulp.src('index.html')
      .pipe(usemin({
          css: [rev(), minifyCss, 'concat'],
          appjs: [uglify()],
          vendorjs: [uglify()]
      }))
      .pipe(gulp.dest(config.dest + '/'));
});

score 0 · Answer 2 · answered Jan 20 '16 at 19:09

I would add in the run-sequence module and replace the build-dev task with something like this.

var runSequence = require('run-sequence').use(gulp)
gulp.task('build-dev', function(cb){
  runSequence('clean-all', ['lint', 'jscs', 'usemin'], cb)
}

You don't want other tasks to be running while files are being deleted.

Gulp clean folder then create folder

2 Answers2