使用nodejs压缩合并javascript和css文件 - 推酷
使用nodejs压缩合并javascript和css文件
对于压缩工具前端攻城师最常见的就是雅虎的Yui Compressor / Google的Closure Compiler了。
对比其他压缩工具相对在JS和CSS压缩领域比较成熟，压缩率也比较好.
一般会选择结合ANT实现压缩并合并，效果也不错，但是比较偏向个人，团队协作每个人都部署java/ant有些麻烦。
对于个人开发使用ANT的方案也是相对不错的选择。对于团队，最好的解决办法是在服务端压缩，大家只需要登录并执行一个统一的脚本。
下面分享下大致的测试结果，和改用
压缩合并js/css的原因。
js部分采用UglifyJS
1. 压缩jquery 1.8，253 KB：使用UglifyJS(以下简称UJ): 90.5 KB；使用Closure Compiler(以下简称CC): 91.1 KB。
2. 如果在闭包(function($, window, undefined) {...})(jQuery, window); 内的 unused function/variables
CC会被删除没使用的；UJ 默认全部保留，加上 pro.ast_lift_variables(ast) 才会删除未使用的函数/变量 (对象/数组 不会被删除)。
如果直接暴漏在window下的，两个基本差不多。
3. function c(){2}， CC 会警告，UJ不会
4. function c(){e()2}，都会抛出异常，显示行数，错误原因。CC提示列错误，UJ不会。
5. function c(){e();2}，都保留了2，CC 警告，UglifyJS 无信息
6. CC 一次显示JS里的全部错误(有些是前面的错误引起的, 所以部分是误报)，UJ每次只显示一个错误。
7. 0 = {}; CC会报错，而UJ不会。
8. if语句都可很好的优化。
9. CC喜欢把变量/函数(结构简单的)内的语句，直接插入到使用它们的地方，UJ维持原样。
如果函数内的内容较少, CC会把函数的内容直接插入到调用它的地方，比如：
function c(){xxxxxxx('34567');}
function c(){xxxxxx.yyyyy('34');}
function c(){xxxxxx.yyyyy.zzzz('');}
function c(){if (X){alert('1234')};alert('12');}
当其他函数里调用c()时，会把c()方法删除，然后把c()内的内容移动到这里 (当里面的字符串长度+1后，就会直接使用原函数c()，所以CC这里是根据字符长度)。
10. 如果是很长的字符串, var str ='很长......很长'; 在其他函数内用到str，CC会把str的值直接插入，而UJ不会。
11. 10000 都会转成 1e4。
12. alert(3*7) 都会转成 alert(21)。
13. function c() {}; function b(){ c();}; CC/UJ(开启 --lift-vars) 都会删除 c() 的代码。
14. 这段代码:(function() {})(); CC会删除，UJ不会。
综上，CC是编译器，有高级优化选项，UJ目前只能算是压缩器。CC喜欢把函数外的字符串值/内容简单的函数内容，直接插入到使用它的地方，所以有时这样反而增加了压缩后的文件大小。
对于压缩后的大小，UJ压缩的一般比CC稍大，一般1KB左右。
压缩速度，CC想的事情比较多，而且需要java，所以压缩慢，UJ 速度飞快。
如果网站结构复杂，JS比较多的时候，UJ的速度优势就非常明显了。
所以团队成员无JS新手，使用UJ是个不错的选择。
另外, uglifyjs2 也在开发中，比UJ1的压缩效果好一些，/mishoo/uglifyjs2， 对比uglifyjs1：
因为还是beta版，UJ2的一些问题都算正常的，UJ2由UJ1改进而来，测试中也没发现重大bug，所以采用UJ2还算靠谱。
PS: 最近应用发现2个bug:
没用的内部变量, 没删除完整, 剩下了 &&
压缩文件末尾没加上&;&号, 当2个文件合并后如果这样, 问题就大了:
var a={};a.x=function(){console.log(this)} //file1
(function(){...})() //file2 // 变成a.x()()了..
所以上面的2个bug, 需要自己写2个正则解决掉.
css部分采用clean-css
CSS压缩找到的有：
/GoalSmashers/clean-css
/ded/sqwish
/fczuardi/node-css-compressor
对比后，选择了clean-css，压缩速度和效果都还不错，目前发现的问题：.a{}这样的无内容的规则，不会被清理。
改用nodejs压缩，1是源码是JS的，发现bug可以快速解决；2是nodejs的异步多线程IO特性，可以多线程压缩，压缩速度提升明显；3是统一了环境，不需要再依赖java。并且合并文件也非常简单。
压缩合并的大体思路：
var argv = process.argv, arguments = argv.splice(2);
用来接收传递的参数，比如可以：
sudo ./build.js
{project path}
var buildType = arguments[0], projectPath = arguments[1];
简单的项目，就可以去project path的assets目录遍历待压缩的文件，进行压缩。
高级点的，可以把文件列表写到配置，var maps = require('map'). 然后遍历maps进行压缩合并，只压缩map的结构一维就够了，如果想压缩并合并，可以改成二维的结构。
再高级点，遍历文件夹得到待压缩的文件（想办法去掉不需要压缩的文件），再根据规则产生待合并的文件名，然后自动生成map。
再高级点，自动生成map的同时，针对文件生成md5，下次压缩根据md5判断，如果文件内容变动，才压缩并重新生成map。
当然，也不是后面的方法最好，选择适合自己的就是最好的。
大体上，这样就可以制作“傻瓜版”压缩工具了，只需要输入参数，其他的不需要管。
我们的做法是读取header / footer 的部分， 匹配标记生成待压缩的文件列表和合并后的目标文件名，比如：
&!-- target=&pkg1.min.js& {{{ --&
&script src=&a1.js&&&/script&...&script src=&b1.js&&&/script&
&!-- }}} --&
&!-- target=&pkg2.min.js& {{{ --& ... &!-- }}} --&
然后生成带MD5的map，对比文件是否改动，选择性压缩，再合并到target指向的目标文件。
开发时使用未压缩的，上线前压缩合并，再自动把header/footer未压缩的注释掉，加上合并后的JS/CSS。
使用UglifyJS2、clean-css的压缩代码，已经放到github，/kairyou/f2e-tools/tree/master/libs。
require build-css-cc.js或build-js-uj2.js，就可以使用里面的build方法压缩了。
另外，压缩时需要发送错误时终止并提示，所以压缩时的读取是sync方式，但是生成文件map、产生MD5、合并文件部分可以采用异步方式。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致使用Grunt进行js、css压缩合并 – 可乐吧&&&&Js/Css/Images 一键压缩功能 node.js
&Js/Css/Images 一键压缩功能 node.js
Js/Css/Images 一键压缩功能,ps.需先配置node.js运行环境
若举报审核通过，可奖励20下载分
被举报人：
jasonli001
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
VIP下载&&免积分60元/年（1200次）
您可能还需要
Q.为什么我点的下载下不了，但积分却被扣了
A. 由于下载人数众多，下载服务器做了并发的限制。若发现下载不了，请稍后再试，多次下载是不会重复扣分的。
Q.我的积分不多了，如何获取积分？
A. 获得积分，详细见。
完成任务获取积分。
论坛可用分兑换下载积分。
第一次绑定手机，将获得5个C币，C币可。
关注并绑定CSDNID，送10个下载分
下载资源意味着您已经同意遵守以下协议
资源的所有权益归上传用户所有
未经权益所有人同意，不得将资源中的内容挪作商业或盈利用途
CSDN下载频道仅提供交流平台，并不能对任何下载资源负责
下载资源中如有侵权或不适当内容，
本站不保证本站提供的资源的准确性，安全性和完整性，同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
开发技术下载排行
您当前C币：0&&&可兑换 0 下载积分
兑换下载分:&
消耗C币:0&
立即兑换&&
兑换成功你当前的下载分为 。前去下载资源
你下载资源过于频繁，请输入验证码
如何快速获得积分？
你已经下载过该资源，再次下载不需要扣除积分
Js/Css/Images 一键压缩功能 node.js
所需积分：2
剩余积分：0
扫描微信二维码精彩活动、课程更新抢先知
VIP会员，免积分下载
会员到期时间：日
剩余下载次数：1000
Js/Css/Images 一键压缩功能 node.js
剩余次数：&&&&有效期截止到：
你还不是VIP会员VIP会员享免积分 . 专属通道极速下载
VIP下载次数已满VIP会员享免积分 . 专属通道极速下载，请继续开通VIP会员
你的VIP会员已过期VIP会员享免积分 . 专属通道极速下载，请继续开通VIP会员使用GruntJS构建Web程序之合并压缩篇
字体：[ ] 类型：转载 时间：
前一篇讲述了如何使用concat和uglify命令实现JavaScript资源的合并，压缩。这篇讲述下css资源的合并和压缩。
有如下步骤：
1.新建项目Bejs2.新建文件package.json3.新建文件Gruntfile.js4.命令行执行grunt任务&
一、新建项目Bejs源码放在src下，该目录有两个子目录asset和js。js下放selector.js和ajax.js，这在上一篇已经讲了如何合并压缩它们。这篇只关注asset目录，asset目录下放了一些图片和css文件。一会会把两个css资源reset.css和style.css合并，压缩到dest/asset目录。一个合并版本all.css，一个压缩版本all-min.css。
二、新建package.jsonpackage.json放在根目录下，它的意义上一篇已经介绍过了。 现在的项目结构如下
package.json内容需符合JSON语法规范，如下
代码如下:{& "name": "BeJS",& "version": "0.1.0",& "devDependencies": {&&& "grunt": "~0.4.0",&&& "grunt-contrib-concat": "~0.1.1",&&& "grunt-css":&& "&0.0.0"& }}grunt-contrib-concat上一篇已经介绍过了，grunt-css 是这篇要使用的插件。
此时，打开命令行工具进入到项目根目录，敲如下命令: npm install
查看根目录，发现多了个node_modules目录，包含了四个子目录，见图
三、新建文件Gruntfile.jsGruntfile.js也是放在项目根目录下，几乎所有的任务都定义在该文件中，它就是一个普通的js文件，里面可以写任意js代码而不仅局限于JSON。和package.json一样它也要和源码一样被提交到svn或git。
源码如下 代码如下:module.exports = function(grunt) {&&& // 配置&&& grunt.initConfig({&&&&&&& pkg : grunt.file.readJSON('package.json'),&&&&&&& concat : {&&&&&&&&&&& css : {&&&&&&&&&&&&&&& src: ['src/asset/*.css'],&&&&&&&&&&&&&&& dest: 'dest/asset/all.css'&&&&&&&&&&& }&&&&&&& },&&&&&&& cssmin: {&&&&&&&&&&& css: {&&&&&&&&&&&&&&& src: 'dest/asset/all.css',&&&&&&&&&&&&&&& dest: 'dest/asset/all-min.css'&&&&&&&&&&& }&&&&&&& }&&& });&&& // 载入concat和css插件，分别对于合并和压缩&&& grunt.loadNpmTasks('grunt-contrib-concat');&&& grunt.loadNpmTasks('grunt-css');&&& // 默认任务&&& grunt.registerTask('default', ['concat', 'cssmin']);};
四、执行grunt任务打开命令行，进入到项目根目录，敲 grunt
从打印信息看出成功的合并和压缩并生成了dest目录及期望的文件，这时的项目目录下多了dest，如下
至此，css合并压缩完毕。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具Grunt的配置及使用（压缩合并js/css） - 博客频道 - CSDN.NET
每天都记录一点点！
talk less.show code more
分类：Web前端
Q：Grunt为何物？
A：一个专为JavaScript提供的构建工具。
Q：啥是构建工具？
A：在项目部署上线前，通常要将源文件压缩，合并，并拷贝到bch或trunk中。 在将js模块化后，又多了一个分析，提取业务代码中所依赖模块的工作。 解决这一系列繁重工作的自动化工具，称之为构建工具。
Q：grunt是如何工作的？
A：刚刚接触grunt，举个例子可能不太恰当，但应该可以让你先比较准确的认识她。 就好像一个万能工厂（grunt），只负责执行任务（Task），不关心每个任务到底都干了什么。 这些任务比如：
clean:删除临时文件
uglify:压缩
qunit:测试
concat:合并
任务流程可能是这样的：
task:clean
task:uglify
task:qunit
task:concat
前提是你已经安装了nodejs和npm。
你可以在&&下载安装包安装，也可以通过包管理器（比如在 Mac 上用 homebrew，同时推荐在 Mac 上用 homebrew）。
安装grunt CLI
npm install -g grunt-cli
按照官方的说法，grunt-cli只是为了在同一台机器上安装不同的grunt版本，那么咱们先不去管他。
在项目中使用grunt
首先需要往项目里添加两个文件：package.json和Gruntfile.js
package.json:该文件用来为npm存放项目配置的元数据，与grunt关系最大的配置在devDependencies中。{
&name&: &cyjs&,
&version&: &0.1.0&,
&description&: &js for k68.org&,
&homepage&: &http://www.k68.org/&,
&author&: &firebaby&,
&devDependencies&: {
&grunt&: &~0.4.1&,
&grunt-contrib-jshint&: &~0.3.0&,
&grunt-contrib-concat&: &~0.1.1&,
&grunt-contrib-uglify&: &~0.1.2&,
&grunt-contrib-cssmin&: &~0.5.0&,
&grunt-htmlhint&: &~0.9.2&
Gruntfile.js:注意G的大写，这个文件就是grunt的配置了，其中详细定义了每个任务的细节和执行任务的顺序等。
一、安装grunt
在命令行进入项目所在目录，键入如下命令即可，npm会根据devDependencies中的配置，将需要的grunt及其插件下载到你的项目目录中。
npm install grunt --save-dev
grunt-contrib-jshint（js语法检查）、grunt-contrib-concat（js合并）、grunt-contrib-uglify（采用UglifyJS压缩js）、grunt-contrib-cssmin（Css压缩合并）、grunt-htmlhint（html语法验查），以上都是常用的插件。
更多插件，请访问：
在项目目录下安装插件也可采用如下方式安装：
安装：uglify
npm install grunt-contrib-uglify
安装：cssmin
npm install grunt-contrib-cssmin
插件安装完成后，查看根目录，会发现node_modules目录，包含了相应的插件目录。
二、新建Gruntfile.js
Gruntfile.js由以下内容组成
1、wrapper函数，结构如下，这是Node.js的典型写法，使用exports公开API
module.exports = function(grunt) {
// Do grunt-related things in here
2、项目和任务配置
3、载入grunt插件和任务
4、定制执行任务
module.exports = function(grunt) {
//配置参数
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
options: {
separator: ';',
stripBanners: true
&js/config.js&,
&js/smeite.js&,
&js/index.js&
dest: &assets/js/default.js&
options: {
'assets/js/default.min.js': 'assets/js/default.js'
options: {
keepSpecialComments: 0
compress: {
'assets/css/default.css': [
&css/global.css&,
&css/pops.css&,
&css/index.css&
//载入concat和uglify插件，分别对于合并和压缩
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
//注册任务
grunt.registerTask('default', ['concat', 'uglify', 'cssmin']);
grunt api文档：
三、命令行执行grunt任务
进入到项目根目录，敲：
就会按Gruntfile配置的文件进行压缩合并。
也可以单独执行，例执行js压缩命令：
grunt uglify
css压缩命令
grunt cssmin
playboyanta123
排名：第6090名
（10）（16）（3）（3）（6）（56）（7）（0）（7）（1）（2）（3）（1）（0）（0）}