Question

我收到了这个Gulp文件，我正在执行各种任务。

我想在运行任何其他任务之前删除构建目录的内容，但无法解决如何执行此操作。

我在搜索解决方案时尝试了很多种方法，但无法让它发挥作用。

这是我的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');
});

Gulp - 如何在运行其他任务之前删除构建目录

2 个答案: