問題描述

在 gulp 頁面上有以下示例:

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

gulp.task('scripts', ['clean'], 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'));
});

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

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

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

這很好用.但是 watch 任務存在一個大問題.如果我更改圖像，監視任務會檢測到它并運行 images 任務.這對 clean 任務也有依賴 (gulp.task('images', **['clean']**, function() {))，所以這個也運行.但是我的腳本文件丟失了，因為 scripts 任務沒有再次啟動，并且 clean 任務刪除了所有文件.

This works quite well. But there is one big problem with the watch task. If I change an image, the watch task detect it and runs the images task. This also has a dependency (gulp.task('images', **['clean']**, function() {) on the clean task, so this runs also. But than my script files are missing because the scripts task did not start again and the clean task deleted all files.

如何在第一次啟動時運行 clean 任務并保留依賴項?

How can I just run the clean task on the first startup and keep the dependencies?

推薦答案

可以讓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']);

這篇關于如何使用 gulp 正確清理項目?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！