Как правильно очистить проект с помощью gulp?

Ответ 1

Вы можете запускать отдельные задачи для watch:

gulp.task('clean', function(cb) {
  // You can use multiple globbing patterns as you would with `gulp.src`
  del(['build'], cb);
});

var scripts = function() {
  // Minify and copy all JavaScript (except vendor scripts)
  return gulp.src(paths.scripts)
    .pipe(coffee())
    .pipe(uglify())
    .pipe(concat('all.min.js'))
    .pipe(gulp.dest('build/js'));
};
gulp.task('scripts', ['clean'], scripts);
gulp.task('scripts-watch', scripts);

// Copy all static images
var images = function() {
 return gulp.src(paths.images)
    // Pass in options to the task
    .pipe(imagemin({optimizationLevel: 5}))
    .pipe(gulp.dest('build/img'));
};
gulp.task('images', ['clean'], images);
gulp.task('images-watch', images);

// the task when a file changes
gulp.task('watch', function() {
  gulp.watch(paths.scripts, ['scripts-watch']);
  gulp.watch(paths.images, ['images-watch']);
});

// The default task (called when you run `gulp` from cli)
gulp.task('default', ['watch', 'scripts', 'images']);

Ответ 2

Используйте del.sync. Он завершает del, а затем возвращается из задачи

gulp.task('clean', function () {
    return $.del.sync([path.join(conf.paths.dist, '/**/*')]);
});

и убедитесь, что чистая задача является первой задачей в списке задач. Например,

gulp.task('build', ['clean', 'inject', 'partials'], function ()  {
    //....
}

@Ben Мне понравилось то, как вы разделили чистоту: css clean: js tasks. Это отличный совет

Ответ 3

У меня возникла проблема с методом обратного вызова. Обратный вызов выполнялся до завершения операции del, вызывая ошибки. Исправление возвращало результат del к вызывающему абоненту, как показано ниже:

// Clean
gulp.task('clean', function() {
    return del(['public/css', 'public/js', 'public/templates'])
});

// Build task
gulp.task('build', ['clean'], function() {
    console.log('building.....');
    gulp.start('styles', 'scripts', 'templates');
});

Ответ 4

Я нашел эту проблему. Я просто очищаю целевые файлы в своей задаче. например:

gulp.task('img', function() {
    //clean target before all task
    del(['build/img/*']);
    gulp.src(paths.images)
        .pipe(gulp.dest('build/img'));
});

только одну строку для ее решения. Надеюсь, это поможет вам.

Ответ 5

Просто используйте модуль непосредственно как gulp.src дорого. Убедитесь, что вы используете метод sync(), иначе у вас могут быть конфликты.

gulp.task('clean', function () {
    del.sync(['./build/**']);
});

Другой способ сделать это, если вы хотите использовать трубки gulp: https://github.com/gulpjs/gulp/blob/master/docs/recipes/delete-files-folder.md

var del = require('del');
var vinylPaths = require('vinyl-paths');

gulp.task('clean:tmp', function () {
  return gulp.src('tmp/*')
    .pipe(vinylPaths(del))
    .pipe(stripDebug())
    .pipe(gulp.dest('dist'));
});

Ответ 6

для задачи по умолчанию я бы предложил использовать "run-sequence" для запуска последовательности задач gulp в указанном порядке, здесь: https://www.npmjs.com/package/run-sequence
то я бы использовал задачу "смотреть", как обычно.

для задачи с изображениями я бы добавил кеширование, так как это тяжелая задача, проверьте здесь: https://www.npmjs.com/package/gulp-cache

Объединение всего этого будет выглядеть примерно так:

var gulp = require('gulp');
var runSequence = require('run-sequence');
var del = require('del');
var cache = require('gulp-cache');

// Clean build folder function:
function cleanBuildFn() {
    return del.sync(paths.build);
}

// Build function:
function buildFn(cb) {
    runSequence(
        'clean:build', // run synchronously first
        ['scripts, 'images'], // then run rest asynchronously
        'watch',
        cb
    );
}

// Scripts function:
function scriptsFn() {
  return gulp.src(paths.scripts)
    .pipe(coffee())
    .pipe(uglify())
    .pipe(concat('all.min.js'))
    .pipe(gulp.dest('build/js'));
}

// Images function with caching added:
function imagesFn() {
    gulp.src(paths.source + '/images/**/*.+(png|jpg|gif|svg)')
    .pipe(cache(imagemin({optimizationLevel: 5})))
    .pipe(gulp.dest(paths.build + '/images'));
}

// Clean tasks:
gulp.task('clean:build', cleanBuildFn);

// Scripts task:
gulp.task('scripts', scriptsFn);

// Images task:
gulp.task('images', imagesFn);

// Watch for changes on files:
gulp.task('watch', function() {
    gulp.watch(paths.source + '/images/**/*.+(png|jpg|gif|svg)', ['images']);
    gulp.watch(paths.source + '/scripts/**/*.js', ['scripts']);
});

// Default task:
gulp.task('default', buildFn);