1. 前言
gulp-fez-tinypic 是一款通过 gulp 自动压缩图片大小的 npm 包，其主要特点是体积小、速度快、性能稳定，适合于前端开发人员在项目中使用。本文将详细介绍 gulp-fez-tinypic 的使用方法和技巧，方便初学者快速上手。
2. 先决条件
在使用 gulp-fez-tinypic 前，需要提前安装好以下工具：
- Node.js（版本 >= v10.16.0）
- npm（版本 >= v6.9.0）
- Gulp（版本 >= v4.0.2）
3. 安装 gulp-fez-tinypic
要使用 gulp-fez-tinypic，需要将其安装到项目的依赖中。可以使用 npm 命令进行安装：
npm install gulp-fez-tinypic --save-dev
4. 配置 gulpfile.js
安装好 gulp-fez-tinypic 后，需要在 gulpfile.js 中配置任务（task）的使用方法。下面是一个简单的示例：
-- -------------------- ---- ------- -- -- ---- - ---------------- ----- ---- - ---------------- ----- ------- - ---------------------------- -- -- ---- -- -------------------- -------- -- - ------ ------------------------------------------------ ------ --------- ------------------------------ --------------------------- ---展开代码
在此示例中，我们先引入了 gulp 和 gulp-fez-tinypic，接着定义了一个名为 tinypic 的 gulp 任务。该任务使用 gulp.src 获得指定目录下的所有图片，然后通过 tinypic() 方法压缩图片，最后将处理后的图片输出到指定目录下（这里为 ./dest）。
5. 使用 gulp-fez-tinypic
在配置好 gulpfez-tinypic 后，我们就可以开始使用它来压缩图片了。只需要在命令行中执行 gulp tinypic 命令即可。如下：
gulp tinypic执行上述命令后，gulp-fez-tinypic 就会开始压缩指定目录下的所有图片文件，压缩完成后会输出到指定目录下。
6. 高级使用技巧
gulp-fez-tinypic 提供了一些高级属性和功能，让你可以更加自定义地使用。下面是一些常用的高级技巧：
6.1 可选配置项
// optional params tinypic({ key: 'LoYI2lPnaoKERJ30xkgP4fnf-djLwlAO', // API key (not required) optimizeLevel: 4, // optimization level, range = 0-7 (higher means slower and better optimization). default is 3. resize: {width: 200, height: 200} // resize image (not required) })
- key：可选的 API key（非必须）。使用 API key 可以获得更多的图片压缩次数。
- optimizeLevel：优化等级，默认值为 3，等级范围为 0-7（越高表示越慢，但是可优化程度更高）。
- resize：调整图片大小（非必须）。可以通过配置宽度和高度调整图片大小。
6.2 选取指定文件
gulp-fez-tinypic 会自动处理目录中的所有图片，但是有时候我们只需要处理某些特定的图片，可以使用 gulp.src()方法中的参数来选择文件。
gulp.src(['./src/images/**/*.jpg', '!./src/images/**/*-min.jpg'], { base:'./' })
在示例代码中，我们使用了一个 glob 表达式，只选择了 .jpg 格式的图片，但同时排除了名称结尾为 -min.jpg 的文件。我们还将 gulp.src() 的 base 参数设为了 .，这样输出的文件路径将以根目录为基准。
6.3 处理结果通知
gulp-fez-tinypic 支持处理结果通知，可以在压缩完图片后输出压缩前后的文件大小变化。
tinypic({ notify: true, verbose: true })
在配置 gulp 的 tinypic 任务时，只需要将 notify 参数设置为 true 即可。执行 gulp tinypic 命令时，便可以在命令行中看到处理结果的通知。
7. 总结
gulp-fez-tinypic 是一款非常实用的 npm 包，使得前端开发人员可以轻松地压缩图片大小，提升网页性能。本文介绍了 gulp-fez-tinypic 的安装和使用方法，并提供了一些高级技巧，希望对初学者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005730881e8991b448e9331
