Gulp shell delay

Question

I'm trying to execute a shell command at the end of a series of gulp tasks. I noticed that the changes written to the project's files aren't being written before the shell command picks up some of the files and copies them elsewhere. I'm using gulp-shell to execute my shell commands.

I found that if I executed a 'ls' command before my file copy, there's enough of a delay that the files are all written before I try to copy them. Is there a cleaner way to do this?

Here's the gruntfile:

var gulp = require('gulp');
var shell = require('gulp-shell');

var jshint = require('gulp-jshint');
var changed = require('gulp-changed');
var imagemin = require('gulp-imagemin');
var minifyHTML = require('gulp-minify-html');
var concat = require('gulp-concat');
//Uncomment out this line before going to production
//var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');

// JS hint task
gulp.task('jshint', function() {
  gulp.src('./code/js/*.js')
  .pipe(jshint())
  .pipe(jshint.reporter('default'));
});

// minify new images
gulp.task('imagemin', function() {
  var imgSrc = './code/img/**/*', imgDst = './www/img';
  gulp.src(imgSrc)
  .pipe(changed(imgDst))
  .pipe(imagemin())
  .pipe(gulp.dest(imgDst));
});

// minify new or changed HTML pages
gulp.task('htmlpage', function() {
  var htmlSrc = './code/*.html', htmlDst = './www';
  gulp.src(htmlSrc)
  .pipe(changed(htmlDst))
  .pipe(minifyHTML())
  .pipe(gulp.dest(htmlDst));
});

// JS concat, strip debugging and minify
gulp.task('scripts', function() {
  gulp.src(['./code/js/index.js', './code/js/*.js'])
  .pipe(concat('script.js'))
  //Uncomment out this line before going to production
  //.pipe(stripDebug())
  .pipe(uglify())
  .pipe(gulp.dest('./www/'));
});

// CSS concat, auto-prefix and minify
gulp.task('styles', function() {
  gulp.src(['./code/css/*.css'])
  .pipe(concat('styles.css'))
  .pipe(autoprefix('last 2 versions'))
  .pipe(minifyCSS())
  .pipe(gulp.dest('./www/'));
});

gulp.task('prepare', shell.task(['ls', 'cordova prepare']));

// default gulp task
gulp.task('default', ['imagemin', 'htmlpage', 'scripts', 'styles', 'prepare'], function() {
});

It's the prepare task - when it runs, the other files haven't finished executing yet.

It seems that I can set a dependent task that must finish before my prepare:

gulp.task('prepare', [styles], shell.task(['ls', 'cordova prepare']));

I haven't tested it, but I expect this will work?

Answer 1

Try gulp-run-sequence Gulp tasks are Async and this enables them to fire synchronously. Should solve your issue.