执行npm run watch时dist文件夹被删的原因、解决及grunt依赖问题

为啥会出现这个问题？ #

你的watch命令是用nodemon监听SCSS文件变化，然后触发npm run build脚本。核心问题肯定出在build命令里——多数前端构建流程都会在编译前执行清理操作（比如删掉整个dist目录），然后重新生成文件。但如果build脚本的清理后，CSS编译步骤没正常跑起来（比如依赖缺了、路径错了），就会出现“只删不建”的情况，自然dist里的CSS就没了，页面就挂了。

举个常见场景：如果build命令调用了Grunt的build任务，而这个任务先执行clean:dist删掉整个目录，后续的SCSS编译步骤又因为某种原因失败了，那dist就空了。

怎么解决？ #

• 先查build命令到底做了啥
  打开你的package.json，找到scripts里的build字段，看看它执行的具体命令。如果是grunt build，就去Gruntfile.js里找build任务的配置，重点看：

  1. 有没有清理dist的步骤（比如grunt-contrib-clean的配置）
  2. 清理后有没有执行SCSS编译（比如grunt-contrib-sass或grunt-contrib-less）
  3. 编译后的CSS是不是输出到了dist目录的正确路径下

• 给watch模式单独写个轻量化的编译脚本
  如果你不想每次watch都全量清理dist，可以在package.json的scripts里加一个只做SCSS编译的命令：

  "watch-build": "sass src/scss/main.scss dist/css/main.css" // 替换成你项目实际的SCSS源文件和输出路径
  

  然后把原来的watch命令改成：

  "watch": "nodemon -e scss -x \"npm run watch-build\""
  

  这样每次SCSS变化时，只会重新编译CSS到dist，不会删除整个文件夹，也就不会出现CSS丢失的问题了。

• 手动跑一遍build看有没有报错
  先执行npm run build，盯着终端输出看有没有编译错误。比如如果是Sass编译失败，会提示缺少依赖或者路径错误，先把这些基础问题解决，watch时才能正常生成文件。

为啥会缺这些依赖？ #

Grunt的工作机制是：全局安装grunt-cli用来执行命令，但每个项目用到的Grunt插件（比如grunt-contrib-clean、grunt-contrib-less这些）都需要单独安装到项目的本地依赖里。你只装了grunt watch相关的核心包，但项目Gruntfile里用到的其他插件都没装，所以Grunt找不到它们，就会抛出这些提示。

怎么解决？ #

• 一次性装完所有缺失的插件
  直接把终端里提示的所有包用npm安装到项目的开发依赖里：

  npm install --save-dev grunt-contrib-clean grunt-contrib-concat grunt-contrib-connect grunt-contrib-copy grunt-contrib-jshint grunt-contrib-qunit grunt-contrib-uglify grunt-html-validation grunt-jekyll grunt-contrib-less
  

  这里的--save-dev会把这些依赖加到package.json的devDependencies里，以后其他人克隆项目时，只需要跑npm install就能一键装全所有依赖。

• 如果项目有完整的package.json，直接一键安装
  要是你的项目原本就有写好的package.json（里面已经列了所有需要的devDependencies），那更简单，直接执行：

  npm install
  

  npm会自动读取package.json里的依赖列表，把所有需要的包都装好。

• 验证安装结果
  装完之后再跑grunt watch，如果还有某个插件缺失，继续用npm install --save-dev [缺失的包名]安装就行。一般装完所有提示的包后，watch任务就能正常启动，开始监听文件变化了。

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