在前端开发中，我们通常会用到一些工具来增加开发效率，例如自动化构建工具 gulp。而在使用 gulp 进行项目构建时，我们经常需要编译 Pug 模板语言。但编译 Pug 时，每次修改 Pug 文件都会生成对应的 HTML 文件，这些文件可能存在于多个文件夹中，导致构建后的项目文件夹非常杂乱。如果我们希望每次构建前都清理掉已编译的 HTML 文件，单靠 Gulp 的相关插件可能无法实现，这时候可以使用 gulp-clean-compiled-pug 这个 npm 包来帮助我们解决问题。
gulp-clean-compiled-pug 是什么
gulp-clean-compiled-pug 是一个 Gulp 插件，可以很方便地将已编译的 Pug 文件夹删除，从而保持构建后项目文件夹的整洁。
如何使用 gulp-clean-compiled-pug
首先，我们需要全局安装 gulp：
$ npm install gulp -g
然后再在项目中安装 gulp 和 gulp-clean-compiled-pug：
$ npm install --save-dev gulp gulp-clean-compiled-pug
安装插件
使用 gulp-clean-compiled-pug 前，我们需要先将其安装到项目中：
$ npm install --save-dev gulp-clean-compiled-pug
导入插件
在引入 gulp 包之后，我们需要导入 gulp-clean-compiled-pug 插件：
const gulp = require('gulp');
const cleanCompiledPug = require('gulp-clean-compiled-pug');使用 gulp-clean-compiled-pug
导入 gulp-clean-compiled-pug 插件以后，我们需要在 gulpfile.js 中编写任务来使用该插件：
gulp.task('clean-pug', function() {
return gulp.src('dist/**/*.html', { read: false })
.pipe(cleanCompiledPug({ directory: 'templates' }))
});其中，directory 为可选参数，用来指定 Pug 文件所在的文件夹路径。如果无法找到该路径，插件将不会删除任何 HTML 文件。
示例代码
以一个简单的 Gulp 工作流为例，我们可以通过以下代码来实现使用 gulp-clean-compiled-pug：
-- -------------------- ---- -------
----- ---- - ----------------
----- --- - --------------------
----- ---------------- - -----------------------------------
----------------- ---------- -
------ ------------------------
------------
-------------------------
---
---------------------- ---------- -
------ -------------------------- - ----- ----- --
------------------------ ---------- ----- ----
---
-------------------- ------------------------ ---------结论
gulp-clean-compiled-pug 是一款非常便捷的 Gulp 插件，可以帮助我们解决编译 Pug 文件后产生的 HTML 文件杂乱的问题。本篇文章介绍了使用 gulp-clean-compiled-pug 的方法及示例代码，希望能对你在日常开发中提高效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600552c181e8991b448d026c