deadforge deadforge - 3 months ago 22
Javascript Question

Gulp task to make a release

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

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);
});
Comments