title: How to make Gulp complete one task, and only then start the next one
body: <p>I've set up some simple Gulp tasks to process my CSS files.</p>
  
  <p>The tasks are put together in one 'master' task:</p>
  
  <p><code>gulp.task('process-css', ['concatCSS', 'minifyCSS', 'renameCSS']);</code></p>
  
  <p>Just for reference, the definition of the concrete tasks follows:</p>
  
  <pre><code>gulp.task('minifyCSS', function() {
      return gulp.src('themes/my_theme/css/dist/*.css')
          .pipe(sourcemaps.init())
          .pipe(minifyCSS())
          .pipe(sourcemaps.write('./'))
          .pipe(gulp.dest('themes/my_theme/css/dist/'));
  });
  
  gulp.task('concatCSS', function() {
  
      var files = [
          'themes/rubbish_taxi/css/bootstrap.css',
          'themes/rubbish_taxi/css/custom.css',
          'themes/rubbish_taxi/css/responsive.css',
          'themes/rubbish_taxi/css/jquery.fancybox.css'
      ];
  
      return gulp.src(files)
          .pipe(concat("bundle.css"))
          .pipe(gulp.dest('themes/my_theme/css/dist/'));
  });
  
  gulp.task('renameCSS', function() {
      gulp.src('themes/my_theme/css/dist/bundle.css')
          .pipe(rename(function(path) {
              path.basename += ".min";
          }))
          .pipe(gulp.dest("themes/my_theme/css/"));
  });
  </code></pre>
  
  <p>The tasks complete without an error, but the problem is that <code>minifyCSS</code> does not minify the source file. An unminified version of the files is saved as <code>bundle.min.css</code>. I believe that the reason is that <code>minifyCSS</code> runs before <code>concatCSS</code> completed.</p>
  
  <p>How can I make the tasks be executed synchronously?
  Is my only option to specify which tasks should be executed before a give task like this:</p>
  
  <p><code>gulp.task('minifyCSS', ['concatCSS'], function() {..}</code> ?</p>
  
  <p>It worked when I set it this way, but I wanted to avoid this to make code more readable.</p>