node.js之node-smushit图片压缩

网站上线对图片压缩是必要的。Yahoo!的在线图片无损优化工具:Smush.it是一个不错的工具,处理png类图片压缩效率,效果很高。

最近尝试了,在本地node.js命令行使用Grunt实现了css/js合并压缩。之前好像记得看过,ysmush在node.js也有插件,就做了一下尝试。

插件名:node-smushit
npm主页:http://search.npmjs.org/#/node-smushit
项目主页:https://github.com/colorhook/node-smushit

xp环境下已安装node.js情况下,命令行模式下进行安装。

npm install -g node-smushit

安装完成后,可以使用,smushit -h查看相应帮助。

尝试了压缩img目录中的图片,在img目录的上级目录中,使用命令:

smushit img

如果有子目录,需要使用如下命令:

smushit jifen -R

压缩单个文件,在jifen目录中,使用如下命令:

smushit result.png

执行命令后,后面的信息给出了图片的原大小、优化后大小、体积减少的百分比等信息。优化的图片会直接覆盖掉原文件,如有需要请注意备份原文件。

ps:针对压缩目录中的图片会比较好,。

参考:
http://www.noanylove.com/2012/06/node-js-the-smush-it-expansion/

内网安装Grunt

尝试了半天终于在内网使用Grunt压缩文件成功了。前置条件,外网已安装好相应环境。记录一下过程:

一、将node.js安装包,发至内网进行安装。安装后可以使用:

node -v (查看nodejs版本号)
npm -v(npm版本号)

二、在外网机,文件夹选项中选择“显示所有文件和文件夹”。

1、打开C:\Documents and Settings\admin\Application Data,找到npm和npm-cache目录。
2、打开C:\Documents and Settings\admin,找到node_modules目录。
复制到内网机相应目录中。

三、比较关键的一步,内网机设置环境变量。

1、在桌面上,右键“我的电脑”,选择“高级”选项卡,找到点击“环境变量”按钮。
2、“新建”环境变量,变量名“NODE_PATH”,变量值“C:\Documents and Settings\admin\Application Data\npm\node_modules”
添加完成后,确保变量有NODE_PATH和PATH。其中PATH值为安装node.js时,自动创建。如果没有请添加,变量值“PATH”,变量值“C:\Documents and Settings\hanbingfeng\Application Data\npm”

四、这个时候在cmd命令下,输入命令,即可看到版本信息:

grunt -version

五、进到项目目录下使用grunt命令测试成功。

参考资料:
https://npmjs.org/doc/install.html

利用node压缩合并js/css/图片

1.安装nodejs

http://nodejs.org/

2.安装各自的node package

js我用的是UglifyJS,github地址:https://github.com/mishoo/UglifyJS;css我用的是clean-css,github地址:https://github.com/GoalSmashers/clean-css;图片用的是node-smushit,github地址:https://github.com/colorhook/node-smushit

3.编写代码

ps:nodejs我安装的是windows版的,之后安装了UglifyJS和clean-css,只有UglifyJS可用,clean-css不好使,估计可能是系统问题。有机会研究一下自动化的流程。

参考:http://www.cnblogs.com/zhuzf/archive/2012/09/28/2707332.html