Gulp task to make a release

Question

I'ma newbie to Gulp. I'm trying to build a release to dist folder. The project structure is as follows:

_untitled/
 └── app/
     └── img/
     └── jade/
     └── script/
     └── style/
     └── vendor/
     └── 404.html
     └── index.html
 └── node_modules/
 └── gulpfile.js
 └── package.json

Here's my gulpfile.js:

var gulp = require('gulp');
var $ = require('gulp-load-plugins')();

//-------------------- jade
gulp.task('jade', function () {
    return gulp.src('app/jade/*.jade')
    .pipe($.jade({
        pretty: true
    }))
    .on('error', console.log)
    .pipe(gulp.dest('app'))
    .pipe($.size());
});

//-------------------- style
gulp.task('style', function () {
    return gulp.src('app/style/sass/main.scss')
    .pipe($.rubySass({
        style: 'expanded',
        'sourcemap=none': true,
        noCache: true
    }))
    .pipe($.autoprefixer({
            browsers: ['last 2 versions']
        }))
    .pipe(gulp.dest('app/style'))
    .pipe($.size());
});

//-------------------- script
gulp.task('script', function () {
    return gulp.src('app/script/**/*.js')
    .pipe($.jshint())
    .pipe($.jshint.reporter(require('jshint-stylish')))
    .pipe($.size());
});

//-------------------- htmlDist
gulp.task('htmlDist', function () {
    return gulp.src('app/**/*.html')
    .pipe(gulp.dest('dist'))
    .pipe($.size());
});

//-------------------- styleDist
gulp.task('styleDist', function () {
    return gulp.src('app/style/**/*.css')
    .pipe($.concat('main.css'))
    .pipe($.csso())
    .pipe(gulp.dest('dist/style'))
    .pipe($.size());
});

//-------------------- scriptDist
gulp.task('scriptDist', function () {
    return gulp.src('app/script/**/*.js')
    .pipe($.uglify())
    .pipe(gulp.dest('dist/script'))
    .pipe($.size());
});

//-------------------- cleanDist
gulp.task('cleanDist', function () {
    var del = require('del');
    return del('dist');
});

//-------------------- build
gulp.task('build', ['jade', 'style', 'script']);

//-------------------- buildDist
gulp.task('buildDist', ['htmlDist', 'styleDist', 'scriptDist']);

//-------------------- release
gulp.task('release', ['cleanDist', 'build', 'buildDist']);

With this, when I type gulp release I have an ok dist folder, except that index.html is empty and 0 KB size. And then, when I try to make gulp release once again (in second time, with dist folder already existed), I have only 404.html file in dist folder and an error with following output:

gulp release
[02:36:14] Using gulpfile D:\Coding\_untitled\gulpfile.js
[02:36:14] Starting 'cleanDist'...
[02:36:14] Finished 'cleanDist' after 52 ms
[02:36:14] Starting 'jade'...
[02:36:15] Starting 'style'...
[02:36:16] Starting 'script'...
[02:36:17] Starting 'htmlDist'...
[02:36:17] Starting 'styleDist'...
[02:36:17] Starting 'scriptDist'...
[02:36:17] all files 38 B
[02:36:17] Finished 'script' after 1.19 s
[02:36:17] all files 432 B
[02:36:17] Finished 'jade' after 2.88 s

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
Error: ENOENT, chmod 'D:\Coding\_untitled\dist\script\main.js'

After all of this, if I try to make gulp release (that would be in third), dist folder doesn't even appear. Looks like this task runs great (not counting empty index.html) when dist folder doesn't exist, and then it just goes wrong. Well I need to get this task to delete an entire dist folder first, and then build a release. Running gulp buildDist separately works correct (index.html is normal).

This is my first post, i've tried my best to get it right. Would appreciate any help.

Answer 1

When you specify dependencies in gulp, they are run in parallel, not in sequence. This means that your jade, style, and script tasks are running at the same time as your htmlDist, styleDist, and scriptDist tasks.

You should use the run-sequence package to ensure that your tasks run in order.

var runSequence = require('run-sequence');

gulp.task('build', function(callback) {
  runSequence('cleanDist', 'build', 'buildDist', callback);
});