如何在VSCode Live Preview扩展刷新前运行Node.js预部署脚本？

Live Preview本身没有直接内置“预览刷新前执行脚本”的功能，但可以通过VSCode的任务系统结合文件监听的方式实现，比单独用nodemon更贴合VSCode的使用流程：

1. 配置VSCode任务 #

先在项目的.vscode/tasks.json里定义执行预部署脚本的任务：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "执行预部署脚本",
      "type": "shell",
      "command": "node ./你的预部署脚本路径.js",
      "problemMatcher": [],
      "runOptions": {
        "runOn": "folderOpen"
      }
    }
  ]
}

把./你的预部署脚本路径.js替换成你实际的脚本文件路径即可。

2. 让文件变化自动触发任务 #

有两种方式可以实现保存文件时自动跑脚本，之后Live Preview会自动刷新：

• 方式一：用「Trigger Task on Save」扩展
  安装这个VSCode扩展后，在.vscode/settings.json里配置哪些文件保存时触发任务：

{
  "triggerTaskOnSave.tasks": {
    "执行预部署脚本": ["**/*.html", "**/*.css", "**/*.js"]
  },
  "triggerTaskOnSave.restart": true
}

这样每次修改并保存指定类型的文件，都会先执行预部署脚本，Live Preview检测到文件变化后自动刷新。

• 方式二：关联Live Preview启动任务
  修改tasks.json，新增一个先跑脚本再打开预览的任务：

{
  "label": "带预部署的预览",
  "dependsOn": "执行预部署脚本",
  "type": "shell",
  "command": "code --open-preview ${file}",
  "problemMatcher": []
}

之后运行这个任务，它会先执行预部署脚本，再打开Live Preview。如果要自动刷新，搭配上面的文件监听设置就行。

3. 优化现有nodemon配置（可选） #

如果你不想折腾VSCode任务，也可以优化nodemon的配置，让它只在静态文件变化时触发脚本，同时确保脚本执行后修改的文件能被Live Preview检测到：
在nodemon.json里写：

{
  "watch": ["src/**/*"], // 监听你的源文件目录
  "ext": "html,css,js",
  "exec": "node ./你的预部署脚本路径.js"
}

只要你的预部署脚本会生成或更新Live Preview加载的静态文件，nodemon执行脚本后，Live Preview就会自动刷新。

总的来说，虽然Live Preview没有原生的预刷新脚本钩子，但通过VSCode任务系统+扩展，或者优化nodemon配置，都能实现更便捷的工作流。

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