在RHEL5中安装grunt-contrib-imagemin,并与J2EE集成
来源:互联网 发布:网络配音 招聘 编辑:程序博客网 时间:2024/05/07 11:40
grunt-contib-imagemin是一个基于nodejs的插件,用于对图片进行无损压缩。整个grunt-contib-imagemin由很多个子插件组成,这些小插件类似java里的jar包,下面四个插件是它的核心组件(linux的工具包,用C写的):
1、gifsicle — Compress GIF images,对应nodejs的插件gifsicle
2、jpegtran — Compress JPEG images,对应nodejs插件imagemin-jpegtran
3、optipng — Compress PNG images,对应nodejs插件imagemin-optipng
4、svgo — Compress SVG images,对应nodejs插件imagemin-svgo
以imagemin-optipng举例,我理解它使用nodejs调用linux的工具包optipng,实现压缩图片的功能;取代了optipng工具包原声的命令行方式。
安装步骤:
1、安装node和npm,网上一堆,不赘述。
2、安装grunt-cli,即grunt客户端,它也是个nodejs插件,用于调用grunt-contrib-imagemin;安装时它有默认路径,直接调用安装命令就好了。我们把grunt命令加进环境变量中,就可以在任意目录使用了。
命令:
npm install -g grunt-cli
ln -s /usr/local/bin/node_modules/grunt-cli/bin/grunt /usr/local/bin/grunt
3、安装grunt-contrib-imagemin,注意先进到一个特定目录,插件会安装在当前目录里面,默认的源如果连接失败了,可以试试淘宝的源(在命令最后增加参数 –registry=https://registry.npm.taobao.org)。
命令:npm install grunt-contrib-imagemin –save-dev -d
这一步安装相当的漫长,需要慢慢下载,这些插件没有离线包一类的东西,好像只能联网使用命令下载安装。
4、测试,在grunt-contrib-imagemin的安装目录,新建一个Gruntfile.js, 新建文件夹image并放入待压缩图片1.png,在安装目录下,调用grunt imagemin
,进行测试;注意测试时需要分别使用jpg、png、gif,每种类型走的代码是不一样的,至于所谓的svgo,没用过所以没理它。Gruntfile.js代码如下:
module.exports = function(grunt) { 'use strict'; grunt.initConfig({ imagemin: { dist: { options: { optimizationLevel: 3 }, files: { 'image/1.png': 'image/1.png' } } } }); grunt.loadNpmTasks('grunt-contrib-imagemin'); grunt.registerTask('img', ['imagemin']);};
在RHEL7上,一下就成功了,测试页顺利通过,皆大欢喜。。但RHEL7版本其实很新了,公司的服务器往往是比较老的且不能连接外网,在RHEL7上没问题,迁移到公司的服务器RHEL4.8上,各种报错(记得压缩png报的错是glibc版本问题)。然后就想着在本机搭建同版本的虚拟机,重新安装然后再做迁移,4.8的版本真难找,没办法,找了个5.x的,好在他们的gcc版本、glibc版本差不多,总算重现了问题。
遇到的两个主要问题及解决方式如下:
一、安装optipng-bin这个插件时,看到报错如下:
optipng-bin@3.0.2 postinstall /tpsys/npm/taobaotest/node_modules/optipng-bin> node lib/install.js ? Request to https://raw.github.com/imagemin/optipng-bin/3.0.2/vendor/linux/x64/optipng failed ? optipng pre-build test failed ? compiling from source ? Error: ./configure --with-system-zlib --prefix="/tpsys/npm/taobaotest/node_modules/optipng-bin/vendor" --bindir="/tpsys/npm/taobaotest/node_modules/optipng-bin/vendor" && make installCommand failed: /bin/sh -c make installpngrtran.c:98: 警告:‘png_rtran_ok’ 定义后未使用pngxmem.c: In function ‘pngx_malloc_rows_extended’:pngxmem.c:37: 警告:由于数据类型范围限制,比较结果永远为假ratio.c:25: 错误:与 ‘opng_longest_impl_t’ 类型冲突ratio.c:24: 错误:‘opng_longest_impl_t’ 的上一个声明在此ratio.c:76: 错误:expected declaration specifiers or ‘...’ before ‘opng_ulongest_impl_t’ratio.c:76: 错误:expected declaration specifiers or ‘...’ before ‘opng_ulongest_impl_t’ratio.c: In function ‘opng_sprint_uratio_impl’:ratio.c:90: 错误:‘opng_ulongest_impl_t’ 未声明 (在此函数内第一次使用)ratio.c:90: 错误:(即使在一个函数内多次出现,每个未声明的标识符在其ratio.c:90: 错误:所在的函数内只报告一次。)ratio.c:90: 错误:expected ‘;’ before ‘integer_part’ratio.c:95: 错误:‘denom’ 未声明 (在此函数内第一次使用)ratio.c:97: 错误:‘num’ 未声明 (在此函数内第一次使用)ratio.c:117: 错误:‘integer_part’ 未声明 (在此函数内第一次使用)ratio.c:118: 错误:‘remainder’ 未声明 (在此函数内第一次使用)ratio.c: In function ‘opng_ulratio_to_factor_string’:ratio.c:158: 错误:‘opng_ulongest_impl_t’ 未声明 (在此函数内第一次使用)ratio.c:158: 错误:expected ‘;’ before ‘num’ratio.c:159: 错误:expected ‘;’ before ‘denom’ratio.c:160: 错误:‘num’ 未声明 (在此函数内第一次使用)ratio.c:160: 错误:‘denom’ 未声明 (在此函数内第一次使用)ratio.c:160: 错误:提供给函数 ‘opng_sprint_uratio_impl’ 的实参太多ratio.c:156: 警告:未使用的参数 ‘ratio’ratio.c: In function ‘opng_ulratio_to_percent_string’:ratio.c:170: 错误:‘opng_ulongest_impl_t’ 未声明 (在此函数内第一次使用)ratio.c:170: 错误:expected ‘;’ before ‘num’ratio.c:171: 错误:expected ‘;’ before ‘denom’ratio.c:172: 错误:‘num’ 未声明 (在此函数内第一次使用)ratio.c:172: 错误:‘denom’ 未声明 (在此函数内第一次使用)ratio.c:172: 错误:提供给函数 ‘opng_sprint_uratio_impl’ 的实参太多ratio.c:168: 警告:未使用的参数 ‘ratio’make[1]: *** [ratio.o] 错误 1make: *** [install] 错误 2
解决方式:每个插件在github上的issue中都有人提出疑问,https://github.com/imagemin/optipng-bin/issues/43 ,他们建议降低版本。。注意,这里说降版本,不是降grunt-contrib-imagemin或者optipng-bin版本(为此迷惑了很久), 意思是说降低optipng组件的版本(这是用C写的,插件仅是调用它而已),报错也不是插件报错,而是被调用的optipng组件编译不通过。
optipng组件编译完成后,仅一个名为optipng的文件,它被放在插件中的optipng-bin/vendor
目录下(没有vendor时可以自己手动创建),我们完全可以去下载下载optipng组件,编译通过后拷贝进来就好了。在http://sourceforge.net中找到了历史的各个版本,使用7.5编译报的错误和上面一样,使用7.0就编译通过了, 编译完成后把产生的optipng文件拷贝到optipng-bin/vendor
中,问题解决。
历史版本下载地址: http://sourceforge.net/projects/optipng/files/OptiPNG/
编译安装都很简单,直接 ./configure 、 make 、 make install 就好了。
二、jpegtran-bin报错,与上面optipng的遭遇很像,道理应该是一样的;这个没说是bug,只是编译环境导致了编译报错,只是这次我再github的issue中找到了有人上传的jpegtran文件,也是vendor目录下的,直接尝试替换就解决了。
issue地址:https://github.com/imagemin/jpegtran-bin/pull/63
下载文件地址: https://github.com/nervo/jpegtran-bin/commits/85514e054daeb770a9534b2568ca9b04c2a4c14a/vendor/linux/x64/jpegtran
我是一个个从新到旧测试的,直到测试没有问题。。
> jpegtran-bin@3.0.4 postinstall /tpsys/news/2jepgtran-bin/node_modules/jpegtran-bin> node lib/install.js ? The `/tpsys/news/2jepgtran-bin/node_modules/jpegtran-bin/vendor/jpegtran` binary doesn't seem to work correctly ? jpegtran pre-build test failed ? compiling from source ? Error: ./configure --disable-shared --prefix="/tpsys/news/2jepgtran-bin/node_modules/jpegtran-bin/vendor" --bindir="/tpsys/news/2jepgtran-bin/node_modules/jpegtran-bin/vendor" && make installCommand failed: /bin/sh -c ./configure --disable-shared --prefix="/tpsys/news/2jepgtran-bin/node_modules/jpegtran-bin/vendor" --bindir="/tpsys/news/2jepgtran-bin/node_modules/jpegtran-bin/vendor"configure: error: no nasm (Netwide Assembler) found at ChildProcess.exithandler (child_process.js:751:12) at ChildProcess.emit (events.js:110:17) at maybeClose (child_process.js:1015:16) at Process.ChildProcess._handle.onexit (child_process.js:1087:5)
最后是与J2EE的集成
客户要求在系统内可以手动点击压缩某张图片, 实现其实很没有技术含量,用的就是jdk里面自带的调用命令行的工具类,直接调用命令行,不知道是否有更好的方式。每次压缩某张图片是,生产一个临时的Gruntfile.js文件,命令执行完成后再删除。有几点注意下就好了:
1、指定gruntfile文件的命令, grunt imagemin -g gruntfile.js -s
2、指定文件路径时只能用相对路径,绝对路径不好使
- 在RHEL5中安装grunt-contrib-imagemin,并与J2EE集成
- Grunt中批量无损压缩图片插件--Grunt-contrib-imagemin
- Grunt中批量无损压缩图片插件--Grunt-contrib-imagemin
- 一步一步讲解如何安装并执行Grunt-contrib-watch插件
- win7安装grunt-contrib-qunit
- Grunt - imagemin图像压缩
- 在Grunt task中集成Protractor
- Grunt与WebStrom集成
- 在rhel5.8中安装git
- Grunt Contrib Watch Example
- 在RHEL5 Server上安装Xen并创建windows虚拟机
- 在CentOS6.5中安装与配置J2EE环境
- NodeJs与Grunt在Linux上的安装与配置
- grunt的grunt-contrib-jshint插件使用
- grunt的grunt-contrib-concat插件使用
- grunt-contrib-connect使用心得
- ubuntu中卸载opencv2,安装opencv3.2.0和contrib组件,并使用python进行开发
- RHEL5中TFTP服务器的安装与配置
- Coursera Ng机器学习课练习一之python版
- 833 取石子(七)
- 【Android实战】BroadcastReceiver之快速上手使用广播
- ListView的Item被点击和其中的Button被点击同时生效
- Tomcat中给server.xml加入<Context>元素
- 在RHEL5中安装grunt-contrib-imagemin,并与J2EE集成
- 在github网站下载的压缩包的使用方法
- 如何成为一名有优秀的iOS工程师
- NSPredicate
- 黑马程序--异常概述
- linux详细命令
- iOS3D转场动画
- 关于下拉菜单的onmouseover事件
- C#反射概念以及实例详解