Gulp - как удалить каталог сборки перед запуском других задач

Question

У меня есть этот файл Gulp, где я выполняю различные задачи.

Я хотел бы удалить содержимое моего каталога сборки перед запуском любых других задач, но не могу решить, как это сделать.

Я пробовал множество различных способов, которые я нашел при поиске решения, но не могу заставить его работать.

Вот мой Глоток файл:

// List required plugins 
var gulp    = require('gulp'), 
    del     = require('del'), 
    uglify    = require('gulp-uglify'), 
    postcss    = require('gulp-postcss'), 
    lost    = require('lost'), 
    nano    = require('gulp-cssnano'), 
    sourcemaps   = require('gulp-sourcemaps'), 
    autoprefixer  = require('autoprefixer'), 
    mqpacker   = require('css-mqpacker'), 
    mixins    = require('postcss-mixins'), // Must go before other plugins in the PostCSS task 
    nested    = require('postcss-nested'), 
    vars    = require('postcss-simple-vars'), 
    partials   = require('postcss-import'), 
    plumber    = require('gulp-plumber'), 
    gutil    = require('gulp-util'), 
    imagemin   = require('gulp-imagemin'), 
    pngquant   = require('imagemin-pngquant'), 
    browserSync   = require('browser-sync').create(); 

// Config - Paths and other config 
var src = { 
     cssDir: 'src/css/**/*.css', 
     jsDir: 'src/js/**/*.js', 
     imgDir: 'src/img/*', 
     svgDir: 'src/img/svg/**/*.svg', 
     htmlDir: 'src/**/*.html', 
     srcDir: 'src/', 
    }, 
    build = { 
     buildDir: 'build/', 
     cssDir: 'build/assets/css/', 
     htmlDir: 'build/**/*.html', 
     jsDir: 'build/assets/js/', 
     imgDir: 'build/assets/img/', 
    }, 
    options = { 
     autoprefix: { browsers: ['last 2 versions'] }, 
     imagemin: { optimizationLevel: 7, progressive: true, interlaced: true, svgoPlugins: [ {removeViewBox: false}, {cleanupIDs: false} ], use: [pngquant()] }, 
     port: '80', 
    }; 

// Error handling function 
// Thanks to https://cameronspear.com/blog/how-to-handle-gulp-watch-errors-with-plumber/ 
var onError = function(err) { 
    gutil.beep(); 
    console.log(err); 
    this.emit('end'); 
} 

// Clean task 
gulp.task('clean:build', function() { 
    return del([ 
     build.buildDir, 
    ]); 
}); 

// Copy HTML to Build 
gulp.task('html', function() { 
    return gulp.src(src.htmlDir) 
    .pipe(plumber({ 
     errorHandler: onError 
    })) 
    .pipe(gulp.dest(build.buildDir)) 
    .pipe(browserSync.stream()); 
}); 

// BrowserSync Server + watching files for changes 
gulp.task('server', function() { 
    browserSync.init({ 
     server: { 
      baseDir: build.buildDir 
     }, 
     port: options.port, 
    }); 
}); 


// PostCSS Task 
gulp.task('css', function() { 
    var processors = [ 
     partials(), 
     lost(), 
     autoprefixer({ browsers: ['last 2 version'] }), 
     mixins(), 
     nested(), 
     vars(), 
     mqpacker(), // Make sure mqpacker is last! 
    ]; 
    return gulp.src(src.cssDir) 
     .pipe(plumber({ 
      errorHandler: onError 
     })) 
     .pipe(sourcemaps.init()) 
     .pipe(postcss(processors)) 
     //.pipe(nano()) - Disable minification during development 
     .pipe(sourcemaps.write('.')) 
     .pipe(gulp.dest(build.cssDir)) 
     .pipe(browserSync.stream()); 
}); 

// JS Task 
gulp.task('compressJS', function() { 
    return gulp.src(src.jsDir) 
    .pipe(plumber({ 
     errorHandler: onError 
    })) 
    .pipe(uglify()) 
    .pipe(gulp.dest(build.jsDir)) 
    .pipe(browserSync.stream()); 
}); 

// Image Task 
gulp.task('imagemin', function() { 
    return gulp.src(src.imgDir) 
    .pipe(plumber({ 
     errorHandler: onError 
    })) 
    .pipe(imagemin(
     options.imagemin 
    )) 
    .pipe(gulp.dest(build.imgDir)) 
    .pipe(browserSync.stream()); 
}); 

gulp.task('watch', function() { 
    gulp.watch(src.cssDir, ['css']); 
    gulp.watch(src.jsDir, ['compressJS']); 
    gulp.watch(src.htmlDir, ['html']); 
    gulp.watch(src.imgDir, ['imagemin']); 
}); 

gulp.task('default', ['html', 'imagemin', 'compressJS', 'server', 'watch']); 

Как я должен сделать, чтобы выполнить задачу clean:build перед любыми другими задачами, но только запустить его один раз. Или есть лучший способ очистки файлов перед запуском сборки?

Спасибо!

Answer 1

Пусть ваши задачи зависит от вашей чистой задачи:

gulp.task('html', ['clean:build'], function() { ... }) 

Answer 2

это, как я могу это сделать.

var del = require('del') ; 
gulp.task('delete-build-folder', function(cb) { 
    return del([config.buildDir], cb); 
}); 

gulp.task('default', ['delete-build-folder'], function() { 
    console.log('building.....'); 
    gulp.start('copy-html', 'copy-html-views'); 
});