图片压缩工具:grunt-contrib-imagemin

  咱们平时使用Photoshop 切出的图片,都含有一些不须要的信息或者多余的颜色值,这些信息和颜色值,对网页显示并无用处,反而增长图片大小,Google Pagespeed 建议咱们对于JPEG文件,使用jpegtran或jpegoptim(仅适用于Linux;使用--strip-all选项运行)。对于PNG文件,使用OptiPNG或PNGOUT。减少图片大小,就能够减小用户下载的文件大小,加快页面访问速度。javascript

  对于不一样格式的图片,咱们须要用pegtran/jpegoptim/OptiPNG/PNGOUT 的工具,这样对于前端开发费时费力,grunt-contrib-imagemin封装了这些压缩功能;大大方便了咱们优化的工做.前端

  安装 :npm install grunt-contrib-imagemin --save-devjava

  配置 :详细见https://github.com/gruntjs/grunt-contrib-imageminnode

  代码例子:git

module.exports = function (grunt) {
    'use strict';
    grunt.initConfig({
        imagemin: {
            /* 压缩图片大小 */
            dist: {
                options: {
                    optimizationLevel: 3 //定义 PNG 图片优化水平
                },
                files: [{
                    expand: true,
                    cwd: 'imgs/',
                    src: ['**/*.{png,jpg,jpeg,gif}'], // 优化 img 目录下全部 png/jpg/jpeg/gif图片
                    dest: 'imgs/' // 优化后的图片保存位置,覆盖旧图片,而且不做提示
                }]
            }
        },
    });
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.registerTask('img', ['imagemin']);
};

  存在的问题:github

  一、0.9.2版本,在win7系统32位,64位有问题,没法压缩jpg,运行的时候报错.npm

  能够在https://github.com/imagemin/jpegtran-bin/releases下载文件后获取里面的浏览器

  jpegtran-bin-2.0.2->jpegtran-bin-2.02->vendor-win-x64里的两个文件:grunt

  jpegtran.exe  libjpeg-62.dll,覆盖到node_modules\grunt-contrib-imagemin\node_modules\imagemin\node_modules\imagemin-jpegtran\node_modules\jpegtran-bin\vendor\下便可工具

  二、压缩后的png图片,半透明的效果在IE6下显示有问题,压缩前正常,压缩后图片消失不可见,其余浏览器正常。缘由不详。0.9.2出现,在最新版本未测试过。

  三、最新版本貌似0.9.4没这个问题,可是默认压缩后的大小却相差不少,具体缘由不详。

相关文章
相关标签/搜索