中止gulp watch任务后，如何清理变更并还原文件？

方法一：在Gulpfile中监听退出信号 #

直接在你的gulpfile.js里，给watch任务加上进程退出监听，当捕获到Ctrl+C触发的中断信号，或者进程正常退出时，自动执行还原任务。

先定义好还原任务，再给watch任务添加信号监听：

const gulp = require('gulp');

// 假设你已实现setupStyles任务，新增restoreStyles还原任务
function restoreStyles(cb) {
  // 这里写具体还原逻辑，比如把setupStyles执行前备份的文件复制回去
  console.log('正在还原setupStyles的变更...');
  cb();
}

function watch(cb) {
  // 你的原有watch逻辑，比如监听样式文件变化
  gulp.watch('src/styles/**/*.scss', gulp.series('compileStyles'));

  // 捕获Ctrl+C的中断信号
  process.on('SIGINT', () => {
    restoreStyles(() => {
      process.exit(0); // 还原完成后退出进程
    });
  });

  // 监听进程正常退出事件
  process.on('exit', () => {
    restoreStyles(() => {});
  });

  cb();
}

// 导出任务供npm脚本调用
exports.setupStyles = setupStyles;
exports.restoreStyles = restoreStyles;
exports.watch = watch;

之后package.json的dev脚本不用额外修改：

...
  "scripts": {
    "dev": "gulp setupStyles && gulp watch",
  },
...

方法二：用Shell的trap命令（无需修改Gulpfile） #

如果不想改动gulpfile，直接在npm脚本里借助bash的trap命令，捕获终止信号触发还原任务。

修改package.json的scripts：

...
  "scripts": {
    "dev": "trap 'gulp restoreStyles' EXIT SIGINT; gulp setupStyles && gulp watch",
  },
...

这里trap 'gulp restoreStyles' EXIT SIGINT的作用是：当进程收到正常退出（EXIT）或Ctrl+C中断（SIGINT）信号时，自动执行gulp restoreStyles。

注意点 #

• 必须提前实现restoreStyles任务，确保它能准确还原setupStyles修改的文件（建议在setupStyles执行时先备份目标文件，还原时用备份覆盖）。
• Windows默认的cmd不支持trap，需要用Git Bash、WSL，或者改用PowerShell的对应逻辑处理信号。

内容的提问来源于stack exchange，提问作者jost21