介绍
gulp-retina-workflow 是一个 npm 包，它可以自动将你的图片进行 1x 和 2x 的转换。
当你的网站需要支持 Retina 屏幕时，你通常需要提供两种版本的图片：2x 与 1x。gulp-retina-workflow 可以自动处理这些转换，并生成相应的文件。
在本篇文章中，我们将介绍如何使用 gulp-retina-workflow。
环境与依赖
在使用 gulp-retina-workflow 之前，请确保你的电脑环境中已安装了以下软件：
- Node.js
- gulp.js
安装 gulp-retina-workflow 需要进行如下操作：
npm install --save-dev gulp-retina-workflow
使用指南
使用 gulp-retina-workflow 只需要进行几个简单的步骤：
1. 创建项目和文件夹
使用以下命令来创建项目和文件夹：
mkdir my-project cd my-project mkdir src mkdir dist
2. 添加图片
在 src 目录下添加你想转换的图片。例如，我现在添加了两张图片：
- src/image1.png
- src/image2.png
3. 创建 gulpfile.js
在 my-project 目录下创建 gulpfile.js，并添加以下代码：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- -------------- - -------------------------------- ------------------- ---------- - ------ --------------------- ----------------------- ------------------------- --- -------------------- ------------展开代码
代码解释：
- 首先，我们引入 gulp 和 gulp-retina-workflow。
- 然后，我们创建了一个名为 retina 的任务。这个任务用来转换图片。
- .pipe(retinaWorkflow()) 是中间步骤，它告诉 gulp-retina-workflow 来处理你的图片。
- .pipe(gulp.dest('dist')) 让处理结果被写入到 dist 目录下。
- 最后，我们定义了一个 default 任务，这个任务依赖于 retina 任务。
4. 运行 gulp
现在，你可以在 my-project 目录下运行以下命令：
gulp这个命令会默认执行 default 任务，也就是执行 retina 任务。
运行后，你可以在 dist 目录下看到转换后的图片：
- dist/image1.png
- dist/image1-2x.png
- dist/image2.png
- dist/image2-2x.png
gulp-retina-workflow 自动将你的图片转换成 1x 和 2x 版本，并在文件名后面加上 -2x 后缀。
示例代码
-- -------------------- ---- ------- ----- ---- - ---------------- ----- -------------- - -------------------------------- ------------------- ---------- - ------ --------------------- ----------------------- ------------------------- --- -------------------- ------------展开代码
总结
gulp-retina-workflow 是一个非常方便的 npm 包，它可以自动将你的图片转换成支持 Retina 屏幕的版本。
在使用 gulp-retina-workflow 前，请先确保你的电脑环境中已安装了 Node.js 以及 gulp.js。
使用 gulp-retina-workflow 时，你只需进行简单的几个步骤即可完成转换。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005686681e8991b448e4671
