png,jpg,gif,svg,这些格式的图像文件,我们都可以使用 grunt-contrib-imagemin 这个插件去优化一下,让图像文件的体积变得更小一些...
先去安装一下 ... 这个插件需要很多依赖的东西,所以安装的时候可能会长一些 ... 另外我们可能需要使用管理员的身份去执行这个安装的命令 ... 加上一个 sudo ,Windows 用户可以忽略这个 sudo 命令,直接输入 ... npm install ...
sudo npm install grunt-contrib-imagemin --save-dev
完成以后,打开 Gruntfile.js ... 去载入一下这个插件 ..
grunt.loadNpmTasks('grunt-contrib-imagemin');
再去配置一下这个插件里面定义的 imagemin 任务 ... 先添加一个 imagemin 属性 ... 这里我们也可以去定义多个目标 ... 这里我添加一个叫 dist 的目标 ... 相关的选项放到 options 属性里面 ... 然后再去描述一下要处理的文件,还要处理之后文件的存储位置 .
可以使用 files 对象,也可以使用 src 还有 dest 属性 ... 输入一个 src ... 这个属性的值就是要处理的图像文件 ... 是在 images 这个目录的下面 ... ** 表示所有的东西,包含 images 目录里面的子目录里的文件 ... 加上一个 /*{png, jpg} ... 意思就是,在 images 目录下面的所有的 png 还有 jpg 格式的文件 ...
逗号分隔一下 ... 另起一行,再添加一个 dest 属性,设置一下处理之后的文件的位置 ... 我们把处理好的文件放到 dist 这个目录的下面 ...
这里还需要把 expand 设置成 true ...
保存 ... 回到命令行工具 ... 输入 grunt imagemin ... 在它后面也可以加上具体的任务的目标 ... 不加的话,会执行这个任务里面的所有的目标 ...
完成以后 ... 会显示出最小化的图像数量 ... 还有节省的空间 ...