什么是 gulp-prettify？
gulp-prettify 是一个 Gulp 插件，用于格式化 HTML、CSS 和 JS 文件。它可以自动缩进、对齐和美化代码，让你的代码更易读、更易维护。
如何安装 gulp-prettify？
首先，确保已经安装了 Node.js 和 Gulp。然后，在命令行中执行以下命令即可安装 gulp-prettify：
npm install --save-dev gulp-prettify
如何使用 gulp-prettify？
在 Gulpfile.js 中引入 gulp 和 gulp-prettify：
const gulp = require('gulp');
const prettify = require('gulp-prettify');定义一个任务，使用 gulp.src() 方法获取待处理文件，并使用 pipe() 方法将文件传递给 gulp-prettify：
gulp.task('prettify', function() {
return gulp.src('src/*.html')
.pipe(prettify())
.pipe(gulp.dest('dist'));
});上述代码将 src 目录下所有的 HTML 文件进行格式化，并将格式化后的文件保存到 dist 目录中。
如果你想对 CSS 或 JS 文件进行格式化，只需要修改参数即可：
-- -------------------- ---- -------
-- --- ---
------------------------- ---------- -
------ ---------------------
---------------- ---- ---- ---
-------------------------
---
-- --- --
------------------------ ---------- -
------ --------------------
---------------- --- ---- ---
-------------------------
---注意，在格式化 JS 文件时需要指定 js: true 参数，否则 gulp-prettify 会将 JS 文件当作 HTML 文件处理。
gulp-prettify 的更多选项
gulp-prettify 还提供了许多选项，可以根据自己的需求进行配置。以下是一些常见的选项：
indent_char: 缩进字符，默认为一个空格。indent_size: 缩进大小，默认为两个空格。eol: 换行符，默认为系统默认换行符。brace_style: 大括号风格，可选值为collapse（折叠）和expand（展开），默认为collapse。preserve_newlines: 是否保留空行，默认为true。max_preserve_newlines: 最多保留几个空行，默认为10。unformatted: 需要保留原样的代码块，使用正则表达式进行匹配。
例如，下面的代码将使用四个空格作为缩进字符，并保留所有空行：
gulp.task('prettify', function() {
return gulp.src('src/*.html')
.pipe(prettify({
indent_size: 4,
preserve_newlines: true
}))
.pipe(gulp.dest('dist'));
});总结
使用 gulp-prettify 可以轻松地格式化 HTML、CSS 和 JS 文件，让你的代码更易读、更易维护。在配置 gulp-prettify 时，可以根据自己的需求选择不同的选项。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/51130