在 gulp.dest 后删除 gulp.src 文件？

Question

我有这样一个场景，我的客户希望通过FTP将LESS文件放入一个名为 src 的目录，并自动将它们输出为CSS到名为 build 的目录。对于每个LESS文件，一旦创建了其所需的CSS文件，它应该从 src 目录中删除。我如何使用Gulp来实现这个过程？

我的当前的 gulpfile.js 是：

var gulp = require("gulp");
var watch = require("gulp-watch");
var less = require("gulp-less");

watch({ glob: "./src/**/*.less" })
  .pipe(less())
  .pipe(gulp.dest("./build"));

这个程序可以成功检测到新的LESS文件被放入src目录，并将输出CSS文件到build目录。但它没有清理掉LESS文件。 :(

- XåpplI'-I0llwlg'I -

Answer 1

请使用gulp-clean插件。它会在管道后清理您的src目录。当然，在不同的设置下备份测试，并且如果无法正确运行，请不要犹豫制作第二个任务并使用任务依赖项在less任务完成后运行清理。

---

如果我没错，当我尝试在gulp.dest之后使用gulp-clean管道时，出现了问题，所以我找到了另一种方法来实现这个操作。下面是一个使用任务依赖项的示例。

var gulp = require('gulp'),
    less = require('gulp-less'),
    clean = require('gulp-clean');

gulp.task('compile-less-cfg', function() {
    return gulp.src('your/less/directory/*.less')
               .pipe(less())
               .pipe('your/build/directory'));
});

gulp.task('remove-less', ['less'], function(){
    return gulp.src('your/less/directory)
               .pipe(clean());
});

那是不需要观看的任务。然后，您应该在*.less文件上使用watch，但是，您应该运行remove-less任务而不是less。为什么？因为任务依赖关系。

当您调用remove-less任务时，它将只在less任务完成后才开始。这样，在编译less文件期间，文件就只会在您的less编译完成后删除，而不是在过程中抛出错误。

这可能不是完美的解决方案，因为我不是专家，但对于您来说，这是一种安全有效的解决方案。同时，我认为这也很容易理解。

- soenguy

---

gulp-clean已被弃用。 - Simon Arnold

Answer 2

gulp-clean 已经被弃用。请使用npm模块del。

npm install --save-dev del

这里是如何使用它的。

var gulp = require('gulp');
var del = require('del');

gulp.task('clean:mobile', function () {
  return del([
    'dist/report.csv',
    // here we use a globbing pattern to match everything inside the `mobile` folder
    'dist/mobile/**/*',
    // we don't want to clean this file though so we negate the pattern
    '!dist/mobile/deploy.json'
  ]);
});

gulp.task('default', ['clean:mobile']);

- Wajahath