Gulp: 当 .svg 从 src 中删除时，从 dest 中删除生成的 .png

Question

我有一个 Gulp 任务为 src 文件夹中的 .svg 文件创建 .png 回退：

gulp.task('svg2png', ['svg'], function() {
  return gulp.src(src + '/svg/**/*.svg')
  .pipe(plugins.newer(dest + '/svg'))
  .pipe(plugins.svg2png())
  .pipe(gulp.dest(dest + '/svg'))
  .pipe(plugins.notify({
    message: 'svg2png task complete', onLast: true
  }));
});

（svg 任务是 svgmin）

我想通过删除生成的文件（在 dest 文件夹中）来整理自己，并想按如下方式扩展 watch 任务：

gulp.task('watch', function () {
  var watchSvg = gulp.watch('src/svg/**/*.svg', ['svg2png']);

  watchSvg.on('change', function(event) {
    if (event.type === 'deleted') {
      var filePathFromSrc = path.relative(path.resolve('src'), event.path);
      var destFilePath = path.resolve('dist', filePathFromSrc);
      del.sync(destFilePath);
    }
  });
});

这适用于删除 .svg，但我还想删除匹配的 .png 文件，这样就没有孤儿了。我盲目地相信 Handling the Delete Event on Watch recipe 所以我已经超出了我的 Gulp / JS 知识水平来试验这个修改。

提前致谢。

Answer 1

假设 .png 文件生成到与缩小后的 .svg 文件相同的文件夹中，以下应该有效：

watchSvg.on('change', function(event) {
  if (event.type === 'deleted') {
    var filePathFromSrc = path.relative(path.resolve('src'), event.path);
    var destFilePath = path.resolve('dist', filePathFromSrc);
    del.sync(destFilePath);
    var pngDestFilePath = destFilePath.replace(/.svg$/, '.png');
    del.sync(pngDestFilePath);
  }
});

Gulp: 当 .svg 从 src 中删除时，从 dest 中删除生成的 .png

Gulp: delete generated .png from dest when .svg removed from src

gulp

gulp-watch