Question

我有一个场景，我的客户端希望将LESS文件放入src目录（通过FTP），并将它们自动作为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"));

这成功检测到放入src目录的新LESS文件，并将CSS文件输出到build。但它之后并没有清理LESS文件。：（

Answer 1

使用gulp-clean。

管道传输后，它会清理你的src目录。当然，在备份时使用不同的设置对其进行测试，如果无法使其正常工作，请不要犹豫再做第二项任务，并使用一些任务依赖来运行清理任务完成。

如果我是对的，当我试图在gulp-clean之后管道gulp.dest时出现问题，所以我有另一种方法可以做到这一点，这里有一个例子任务依赖。

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任务完成后启动。这样，只有在较少的编译结束时才会删除文件，而不是在抛出错误的中间。

这可能不是完美的方法，因为我不是专家，但它是一个安全和有效的解决方案供您使用。理解IMO也很清楚。

Answer 2

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

npm install --save-dev del

Here就是你应该如何使用它。

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

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

2 个答案: