CODEWITHSUNDEEP
javascriptnode.jsgulp
harishr
harishr

Reputation: 18055

gulp, tasks works individually but not in group

I have 3 task to be run sequentially : clean, mincat and then serve

var gulp = require('gulp');
var webserver = require('gulp-webserver');
var usemin = require('gulp-usemin');
var uglify = require('gulp-uglify');
var minifyHtml = require('gulp-minify-html');
var minifyCss = require('gulp-minify-css');
var rev = require('gulp-rev');
var rename = require('gulp-rename');
var del = require('del');
var sequential = require('run-sequence');

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

gulp.task('mincat', function () {
    gulp.src('./Index.html')
      .pipe(usemin({
          css: [minifyCss(), 'concat'],
          html: [minifyHtml({ empty: true })],
          js: [uglify()],
          js1: [uglify()]
      }))
      .pipe(gulp.dest('./build/'));
});

gulp.task('serve', function () {
    gulp.src('build')
      .pipe(webserver({
          host: 'localhost',
          port: 8080,
          livereload: true,
          open: true
      }));
});

gulp.task('dev', function () {
    sequential('clean','mincat','serve');
});

If I run the 3 tasks from command prompt one by one, it works

gulp clean
gulp mincat
gulp serve

Now I created a task to run all the 3 using single command, it doesnt work. I tried all the forms

  1. added run-sequential plugin

    gulp.task('dev', function () { sequential('clean','mincat','serve'); });

  2. initially run in parallel

    gulp.task('dev', ['clean','mincat','serve'])

  3. I also tried to separate the serve

    gulp.task('dev', ['clean','mincat'] function () { gulp.start('serve'); })

but non of these work, can someone point out the issue?

Upvotes: 0

Views: 315

Answers (1)

Preview
Preview

Reputation: 35806

First, your 2 can't work, since the gulp dependencies are all runned in parallel, without specific order. The 3 can work, but it's not really recommended since it not follow the gulp guidelines.

This let us the 1. What you did is correct, but the problem you're experiencing is that gulp does not know when your tasks are finished, so it's equivalent to run everything in parallel.

To make a task synchronous, you will have to return it's stream. Since del is not a stream, you only have to use the callback. For your serve, I don't think you have to do it, since it's launched at last.

This will look like:

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

gulp.task('mincat', function () {
  return gulp.src('./Index.html')
    .pipe(usemin({
      css: [minifyCss(), 'concat'],
      html: [minifyHtml({ empty: true })],
      js: [uglify()],
      js1: [uglify()]
    }))
    .pipe(gulp.dest('./build/'));
});

I don't understand why you could have .js1 files thought, and by the way, your index.html should be lowercase :)

Upvotes: 1

Related Questions