在前端开发过程中，我们经常需要对目录进行打包、发布、拷贝等操作。由于项目的不断迭代和版本升级，无用文件和冗余文件会越来越多，导致目录的体积不断增大，影响项目的开发和运行。解决这个问题的最方便的方法就是使用 npm 包 clean-directory。
clean-directory 是一个用于删除目录或指定文件的 npm 包，可以对指定目录或者特定文件的过滤条件进行筛选和删除。它可以轻松地删除一些不必要的文件，使目录变得更加干净整洁，减少目录的体积，提高开发效率。
下面将介绍如何使用 clean-directory 包。
安装
使用 npm 可以很方便地安装 clean-directory：
npm install clean-directory --save-dev
使用方法
clean-directory 的使用很简单，只需要在命令行中输入以下内容即可：
node node_modules/clean-directory <目录路径> <选项>
其中，目录路径是指需要进行清理的目录或者文件路径，选项是指支持的过滤选项。
以下是 clean-directory 支持的所有选项：
- --exts：需要删除的文件类型，逗号分隔。
- --ignore-dirs：忽略的目录名称，逗号分隔。
- --ignore-files：忽略的文件名称，逗号分隔。
- --dry：只显示将要删除的文件，不执行删除操作。
- --verbose：显示详细日志信息。
以下是一些常用的使用示例：
清空某个目录
node node_modules/clean-directory ./dist
删除指定类型的文件
node node_modules/clean-directory ./dist --exts .js,.css,.map
忽略某些目录和文件
node node_modules/clean-directory ./dist --ignore-dirs node_modules,test --ignore-files index.html,package-lock.json
实战示例
假设我们的项目目录结构如下，其中的 dist 文件夹包含了项目所有的编译结果：
-- -------------------- ---- ------- --- ------ --- ---- - --- ---------- - --- --------- - --- --------- - --- ------------- - --- ------ - --- -------- - --- ---------- --- ------------ --- ----------------- --- ------------
如果我们在开发项目中删除了一些不用的文件，dist 文件夹中也会产生一些无用文件和冗余文件，比如：
- bundle.js.map 文件是旧版本的 sourcemap 文件，我们需要将其删除。
- 站点上使用的 logo.png，但是 banner.jpg 不再显示了，我们希望删除它。
- 我们需要在 dist 文件夹中保留 index.html、style.css 和 bundle.js 三个文件，其它所有的文件都需要删除。
这时候我们可以使用以下命令来执行删除操作：
node node_modules/clean-directory ./dist --exts .map --ignore-files logo.png --dry node node_modules/clean-directory ./dist --ignore-dirs images --ignore-files !index.html,!style.css,!bundle.js
第一条命令是删除 map 文件，它使用了 --exts 选项来指定需要删除的文件类型，并使用 --ignore-files 选项排除了 logo.png 文件。使用 --dry 选项可以查看将要删除的文件。
第二条命令是删除所有不是 index.html、style.css 和 bundle.js 的文件，并使用 --ignore-dirs 选项排除了 images 文件夹。
执行完这两个命令后，我们的 dist 文件夹仅仅包含了以下三个文件：
├── dist │ ├── index.html │ ├── style.css │ └── bundle.js
小结
clean-directory 是一个非常实用的 npm 包，它可以很方便地对指定目录或文件进行过滤和删除，让目录更加整洁干净。同时，它还支持多种选项，可以根据实际需要来定制执行操作。希望这篇文章能够帮助你更加深入地了解 clean-directory 包的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d7b81e8991b448db38a