JavaScript Gulp -- Clean vor Build

[Niocore]

Hallo zusammen,

Ich hab ein kleines Problem mit Gulp.
Ich möchte meinen dist/ Ordner, in dem die fertige Webseite zusammengeschoben wird, vor dem Ausführen meines Default-Tasks immer löschen lassen.

Nur leider, durch die asynchrone Natur von Gulp, bekomme ich das nicht sinnvoll hin.

clean wird im jetzigen Stadium per default zwar vor allen anderen gecallt, nebenbei werden aber trotzdem auch noch die anderen Tasks ausgeführt, bevor clean fertig ist.
Das heisst also, dass Gulp auf die Fresse fliegt, da es dist/ nicht löschen kann, da die anderen Tasks da auch drin rumfummeln.

Per ['clean'] könnte ich zwar erreichen, dass ein Task erst ausgeführt wird, wenn clean fertig ist, aber das Problem ist dann, dass mein watch immerzu unnötigerweise clean callen wird und so dist/ löschen würde.
Ich muss clean also wirklich nur einmal beim Start ausführen.
Und das mit einem Callback, sodass die restlichen Tasks erst nachher ausgeführt werden, wenn clean fertig ist.

Ich hoffe mein Problem ist nicht zu spezifisch.

Besten Dank!

var gulp = require('gulp'),
    del = require('del'),
    connect = require('gulp-connect'),
    less = require('gulp-less'),
    autoprefixer = require('gulp-autoprefixer'),
    cssmin = require('gulp-clean-css'),
    rename = require('gulp-rename'),
    jsmin = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    plumber = require('gulp-plumber'),
    changed = require('gulp-changed');

var src = 'src/',
    dist = 'dist/',
    srcJs = src + 'js/',
    srcJsFiles = srcJs + '*.js',
    srcLess = src + 'less/',
    srcLessFiles = srcLess + '*.less',
    srcImg = src + 'img/',
    srcImgFiles = srcImg + '*'
    srcHtmlFiles = src + '*.html',
    distJs = dist + 'js/',
    distCss = dist + 'css/'
    distImg = dist + 'img/'
    srcRootFiles = [src + 'sitemap.xml', src + 'robots.txt', src + '.htaccess'];

gulp.task('clean', function(){
    return del(dist);
});

gulp.task('server', function(){
    return connect.server({
        port: 3000,
        livereload: true,
        root: 'dist'
    });
});

gulp.task('less', function(){
    return gulp.src(srcLessFiles)
        .pipe(changed(distCss, {extension: '.css'}))
        .pipe(plumber())
        .pipe(less())
        .pipe(autoprefixer({
            browsers: ['last 2 version'],
            cascade: false
        }))
        .pipe(gulp.dest(distCss))
        .pipe(cssmin())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest(distCss))
        .pipe(connect.reload());
});

gulp.task('js', function(){
    return gulp.src(srcJsFiles)
        .pipe(changed(distJs))
        .pipe(plumber())
        .pipe(gulp.dest(distJs))
        .pipe(jsmin())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest(distJs))
        .pipe(connect.reload());
});

gulp.task('html', function(){
    return gulp.src(srcHtmlFiles)
        .pipe(changed(dist))
        .pipe(plumber())
        .pipe(gulp.dest(dist))
        .pipe(connect.reload());
});

gulp.task('img', function(){
    return gulp.src(srcImgFiles)
        .pipe(changed(distImg))
        .pipe(plumber())
        .pipe(imagemin({
            optimizationLevel: 5,
            progressive: true,
            multipass: true
        }))
        .pipe(gulp.dest(distImg))
        .pipe(connect.reload());
});

gulp.task('rootFiles', function(){
    return gulp.src(srcRootFiles)
        .pipe(changed(dist))
        .pipe(plumber())
        .pipe(gulp.dest(dist))
        .pipe(connect.reload());
});

gulp.task('watch', ['build', 'server'], function(){
    gulp.watch(srcHtmlFiles, ['html']);
    gulp.watch(srcImgFiles, ['img']);
    gulp.watch(srcJsFiles, ['js']);
    gulp.watch(srcLessFiles, ['less']);
    gulp.watch(srcRootFiles, ['rootFiles']);
});

gulp.task('default', ['clean', 'build', 'server', 'watch']);

gulp.task('build', ['js', 'less', 'html', 'img', 'rootFiles']);

Ergänzung (9. April 2016)

Lösung gefunden!

Man kann Tasks auch so deklarieren, falls vor ihnen ein anderer ausgeführt werden soll:

gulp.task('default', ['clean'], function(){
    gulp.start('build', 'server', 'watch');
});

 

[fz21z]

Kenne Gulp nicht wirklich, aber das http://schickling.me/synchronous-tasks-gulp/ beschreibt dein Problem ganz gut.