项目图片一键压缩

发表于 更新于 分类于 本文字数： 1.3k 阅读时长 ≈ 1 分钟
  • 就放到vue分类下把^_^

感觉压缩后还是有损的，记录下，唯一的优点应该就是可以一键压缩项目中的所有图片了。。
相关插件地址：
imagemin
MozJPEG jpg图片压缩插件
pngquant png图片压缩插件

1.要使用 imagemin，请确保已安装了 Node.js，然后打开终端窗口，cd 到项目的文件夹，并运行以下命令：

1
2
3
4
5
6
//安装图片压缩imagemin插件
npm install imagemin
//使用 MozJPEG 插件压缩 JPEG
npm install imagemin-mozjpeg
//使用 pngquant 插件优化 PNG 图像
npm install imagemin-pngquant

2.然后创建一个名为 imagemin.js 的新文件，并粘贴以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//下面是引用插件 + 准备压缩的所有图片相对路径
const imagemin = require('imagemin');
const PNGImages = 'assets/images/*.png';
const JPEGImages = 'assets/images/*.jpg';
//压缩后图片存放路径，这个路径当然也可以自定义
const output = 'build/images';
//下面是使用 MozJPEG 插件压缩 JPEG 的js相关配置
const imageminMozjpeg = require('imagemin-mozjpeg');
const optimiseJPEGImages = () =>
  imagemin([JPEGImages], output, {
    plugins: [
      imageminMozjpeg({
        //压缩质量
        quality: 70,
      }),
    ]
  });
optimiseJPEGImages()
  .catch(error => console.log(error));
//下面是使用 pngquant 插件优化 PNG 图像
const imageminPngquant = require('imagemin-pngquant');
const optimisePNGImages = () =>
  imagemin([PNGImages], output, {
    plugins: [
      imageminPngquant({ quality: '65-80' })
    ],
  });
optimiseJPEGImages()
  .then(() => optimisePNGImages())
  .catch(error => console.log(error));

最后
在终端中输入node imagemin.js来运行这个脚本。这样就会处理所有的 JPEG，png 图像，并将优化过的图像放在 build/images(这个路径当然也可以自定义) 文件夹中。