Gulp doesn't work when multiple tasks are run - gulp

Question

I'm trying to grap my head around gulp. I managed to write gulpfile.js for my basic page scaffolding, but i've problems with running serveral task in order.
I'm trying to generate css/main.css file from scss files, copy it to dist/css/ and then inject my js and css files into index.html (with gulp-inject).
(function (r) {
var gulp = r('gulp');
var del = r('del');
var wiredep = r('wiredep');
var $ = r('gulp-load-plugins')();
// var runSequence = require('run-sequence');
var config = {
css_files: './css/*.css',
sass_files: './scss/*.scss',
main_sass: './scss/main.scss',
main_css: './css/main.css',
css_dir: './css/',
js_files: './js/*.js',
main_js: './js/main.js',
index: [
'./index.html',
'**/index.html',
'!node_modules/**/*.*',
'!bower_components/**/*.*',
],
dist: './dist/',
};
function clean(cb) {
del.sync([
config.css_files,
config.dist + config.css_files,
config.dist + config.js_files,
config.dist + config.index[0],
config.dist + config.index[1],
config.dist + '**/*.map',
]);
cb();
}
gulp.task('clean', function (cb) {
clean(cb);
});
gulp.task('scss', function (cb) {
gulp
.src(config.sass_files)
.pipe($.plumber())
.pipe($.sass())
.pipe(gulp.dest(config.css_dir));
cb();
});
gulp.task('js', function (cb) {
gulp
.src(config.js_files)
.pipe($.concat('main.js'))
.pipe($.sourcemaps.init())
.pipe($.uglify())
.pipe($.sourcemaps.write('./'))
.pipe(gulp.dest(config.dist + 'js/'));
cb();
});
gulp.task('css', ['scss'], function (cb) {
gulp
.src(config.css_files)
.pipe($.sourcemaps.init())
.pipe($.uglifycss())
.pipe($.sourcemaps.write('./'))
.pipe(gulp.dest(config.dist + 'css/'));
cb();
});
function wd(cb) {
wiredep({ ignorePath: '../..', src: config.main_sass, directory: './bower_components' });
wiredep({ ignorePath: '../..', src: config.index[0], directory: './bower_components' });
cb();
}
gulp.task('wd', function (cb) {
wd(cb);
});
gulp.task('inject-dev', ['wd'], function (cb) {
var src = ['!dist/**/*.*'].concat(config.index);
gulp
.src(src)
.pipe($.inject(gulp.src([config.css_files, config.js_files])))
.pipe(gulp.dest('./'));
cb();
});
gulp.task('inject-dist', ['copy-index'], function (cb) {
var src = gulp.src([config.dist + 'css/**/*.*', config.dist + 'js/**/*.*']);
var target = gulp.src(config.dist + '**/index.html');
target.pipe($.inject(src, { relative: true }))
.pipe(gulp.dest(config.dist));
cb();
});
gulp.task('watch', function (cb) {
gulp.watch(config.sass_files, ['scss']);
cb();
});
gulp.task('copy-index', function (cb) {
gulp
.src(config.index, { base: './' })
.pipe(gulp.dest(config.dist));
cb();
});
gulp.task('build-dist', ['clean', 'css', 'js', 'inject-dist']);
})(require);
ATM result of build-dist is generated js/main.js file, copied index.html and about/index.html, generated main.css in dev dir, but not in dist. Files are not injected in dist/index.html aswell.
λ szuja html-scaffold → λ git master* → tree -L 3 -I 'bower_components|node_modules'
.
├── about
│   └── index.html
├── bower.json
├── css
│   └── main.css
├── dist
│   ├── about
│   │   └── index.html
│   ├── index.html
│   └── js
│   ├── main.js
│   └── main.js.map
├── gulpfile.js
├── index.html
├── js
│   ├── main2.js
│   └── main.js
├── LICENSE
├── package.json
├── README.md
└── scss
└── main.scss
Edit:
Looks like gulp doesn't care about waiting for tasks to finish ignoring callback functions:
[16:15:47] Using gulpfile ~/workdir/html-scaffold/gulpfile.js
[16:15:47] Starting 'clean'...
[16:15:47] Finished 'clean' after 15 ms
[16:15:47] Starting 'scss'...
[16:15:47] Finished 'scss' after 75 ms
[16:15:47] Starting 'css'...
[16:15:47] Finished 'css' after 44 ms
[16:15:47] Starting 'js'...
[16:15:47] Finished 'js' after 74 ms
[16:15:47] Starting 'copy-index'...
[16:15:47] Finished 'copy-index' after 4.27 ms
[16:15:47] Starting 'inject-dist'...
[16:15:47] Finished 'inject-dist' after 13 ms
[16:15:47] Starting 'build-dist'...
[16:15:47] Finished 'build-dist' after 9.01 μs
[16:15:47] gulp-debug: 0 items
[16:15:47] gulp-debug: 0 items
[16:15:47] gulp-debug: scss/main.css
[16:15:47] gulp-debug: 1 item

Answer 1

Works with run-sequence and returning a promise instead of waiting for callback function. I was trying this method before, but somehow managed to pass parameters as an array, so they were running in parallel..
(function (r) {
var gulp = r('gulp');
var del = r('del');
var wiredep = r('wiredep');
var $ = r('gulp-load-plugins')();
var runSequence = require('run-sequence');
var config = {
css_files: './css/*.css',
sass_files: './scss/*.scss',
main_sass: './scss/main.scss',
main_css: './css/main.css',
css_dir: './css/',
js_files: './js/*.js',
main_js: './js/main.js',
index: [
'./index.html',
'**/index.html',
'!node_modules/**/*.*',
'!bower_components/**/*.*',
],
dist: './dist/',
};
function clean(cb) {
del.sync([
config.css_files,
config.dist + config.css_files,
config.dist + config.js_files,
config.dist + config.index[0],
config.dist + config.index[1],
config.dist + '**/*.map',
]);
cb();
}
gulp.task('clean', function (cb) {
clean(cb);
});
gulp.task('scss', function () {
return gulp
.src(config.sass_files)
.pipe($.plumber())
.pipe($.sass())
.pipe($.debug())
.pipe(gulp.dest(config.css_dir));
});
gulp.task('js', function () {
return gulp
.src(config.js_files)
.pipe($.concat('main.js'))
.pipe($.sourcemaps.init())
.pipe($.uglify())
.pipe($.sourcemaps.write('./'))
.pipe(gulp.dest(config.dist + 'js/'));
});
gulp.task('css', ['scss'], function () {
return gulp
.src(config.css_files)
.pipe($.sourcemaps.init())
.pipe($.uglifycss())
.pipe($.sourcemaps.write('./'))
.pipe($.debug())
.pipe(gulp.dest(config.dist + 'css/'));
});
function wd(cb) {
wiredep({ ignorePath: '../..', src: config.main_sass, directory: './bower_components' });
wiredep({ ignorePath: '../..', src: config.index[0], directory: './bower_components' });
cb();
}
gulp.task('wd', function (cb) {
wd(cb);
});
gulp.task('inject-dev', ['wd'], function () {
var src = ['!dist/**/*.*'].concat(config.index);
return gulp
.src(src)
.pipe($.inject(gulp.src([config.css_files, config.js_files])))
.pipe($.debug())
.pipe(gulp.dest('./'));
});
gulp.task('inject-dist', ['copy-index'], function () {
var src = gulp.src([config.dist + 'css/**/*.*', config.dist + 'js/**/*.*']);
var target = gulp.src(config.dist + '**/index.html');
return target.pipe($.inject(src, { relative: true }))
.pipe($.debug())
.pipe(gulp.dest(config.dist));
});
gulp.task('watch', function (cb) {
gulp.watch(config.sass_files, ['scss']);
cb();
});
gulp.task('copy-index', function () {
return gulp
.src(config.index, { base: './' })
.pipe(gulp.dest(config.dist));
});
gulp.task('build-dist', function (cb) {
runSequence('clean', 'js', 'css', 'inject-dist', cb);
});
})(require);