UglifyJS--javascript代码压缩使用指南{转}
在线测试地址 http://lisperator.net/uglifyjs/
下面都是基于linux系统的安装使用.
UglifyJS是遵循了CommonJS规范写成的,可以在支持CommonJS模块系统的javascript环境中运行。当然,这是官方的说法,通俗的说,就是可以在浏览器里和node.js的环境中兼可运行了。
UglifyJS的作者在今年9月份的时候,开始了UglifyJS2的项目,作者本人也是比较推崇UglifyJS2,因此,本文就只是关于UglifyJS2的一些介绍。下文中所有的UglifyJS都是指代UglifyJS2。
UglifyJS其实不仅仅是个js的压缩工具,同时可以对代码进行最小化,和美化的工具包。
担心篇幅太长,在这里只做关于node.js环境下使用UglifyJS的介绍。
1. 安装:
—— 从npm安装
npm install uglify-js
—— 从github安装
git clone git://github.com/mishoo/UglifyJS2.git
cd UglifyJS2
npm link .
2. 概述:
在控制台/命令行中输入uglifyjs –help,如果出来帮助信息,表明uglifyjs可以正确使用了。
uglifyjs [input files] [options]
举个栗子:
// 有个叫main.js的待压缩/美化的文件
uglifyjs main.js -o main-min.js -c
uglifyjs的作者建议的就是先把文件放在前面,再把一些压缩/美化的参数跟在后边。
一些常用的参数列表
-o,--output 指定输出文件,默认情况下为命令行
-b,--beautify 美化代码格式的参数
-m,--mangle 改变变量名称(ex:在一些例如YUI Compressor压缩完的代码后你可以看到
a,b,c,d,e,f之类的变量,加了-m参数,uglifyjs也可以做到,默认情况下,是不会改变变量名称的)
-r,--reserved 保留的变量名称,不需要被-m参数改变变量名的
-c,--compress OK,主角登场了,这是让uglifyjs进行代码压缩的参数。可以在-c后边添加
一些具体的参数来控制压缩的特性,下文中会具体介绍。
--comments 用来控制注释的代码的
3. 变量名压缩
你需要传入-m来进行变量名的压缩(将一系列很长的变量名压缩为a,b,c,d,e,f云云)。当使用了-m参数进行改变变量名时,如果还想保留一些变量名让他们不被改变,就需要用–reserved (-r) 。例如
uglifyjs ... -m -r '$,require,exports'
4. 进行压缩的选项
当使用了–compress (-c) 参数时,就启用了uglifyjs对代码的压缩的功能。你可以在-c后边传入一系列逗号分开的选项来指定压缩的具体特性。
对于这些选项使用的方法,可以参考下文中的“代码美化选项”部分。
(巴拉巴拉巴拉,此处省去一千字就不做具体的介绍了。总而言之,你可以让uglifyjs可选的除去你在代码中留下的debugger的等等关键字,或是各种变态的注释等等,一般用户这里忽略了,如真有特殊需求,可以自己翻阅文档。)
4.1 预编译选项
你可以使用–define (-d)来定义一些给uglifyjs压缩/美化代码的时候使用的变量,此话怎讲呢?说着玄乎,其实举个例子就能明白了。为了调试代码,你可以在你的代码中加入如下的示例
if (DEBUG) {
console.log("debug stuff");
}
当然,在最后发布的时候。普通的码农呢,会勤勤恳恳的一个个把这样的调试代码给删除掉,但是万一工程过于庞大,溜掉了一两个也是无可厚非的。聪明的码农呢,就会用到了uglifyjs中的-m这个选项了。
首先要保证的就是DEBUG不是一个本地的变量,再使用如下命令
uglifyjs -o main-min.js main.js -c --define DEBUG=true
得到的main-min.js文件中,上边的调试代码就不见了。是不是很cool?
还有种使用预编译选项的方式,就是把预编译的所有选项放到一个js文件中。例如,有个define文件,有如下内容
const DEBUG = false;
const PRODUCTION = true;
// etc.
注:必须要使用const来声明需要预编译的变量。
用如下的方式编译你的代码
uglifyjs build/defines.js js/foo.js js/bar.js... -c
最终起到的效果和上面是一样的。
5. 代码美化选项
从博主的个人角度来讲,觉着这个有必要学习下,代码规范在什么时候都是一个码农离不开的话题。为了保证在一个大型项目中,你的代码具有良好的可读性,可以由jsdoc之类的工具生成一份具体的文档供别人阅读是很有重要的。
uglifyjs提供的代码美化的选项比较有限,就算是代码压缩功能的一个附属小功能吧。
这里需要强调下的是,美化中的所有选项,是对-b参数而言的,就是说在使用的时候,这些选项需要放在-b后边,例如:
beautify 进行代码的美化,默认的情况下等于-b beautify=true,你也可以吧beautfy设置为false跳过
美化步骤。
indent-level 设置代码缩进,例如github默认的情况下缩进是2个tab,默认的数值为4,例如
(uglifyjs -o main-min.js main.js -b "indent-level=2")
indent-start 对代码进行整体缩进默认值为0,可以这么使用
(uglifyjs -o main-min.js main.js -b "indent-start=4,indent-level=8")
quote-keys 默认为false。如果设置为true,则将所有对象中的键用引号引起来
space-colon 会在一个单引号后边插入一个空格
ascii-only 转义Unicode字符
inline-script 转义js代码字符串变量中的script标签
width 设置代码的宽度,默认情况下是80
5.1 保留copyright字样或者是其他的一些注释
默认的情况下uglifyjs只会保留符合jsdoc规范的注释。
你可以在–comments后面加上一串正则表达式,来匹配出你需要保留的注释,例如–comments ‘/foo|bar/’。
如果在–comments后加了个all,则保留了所有的注释。
UglifyJS--javascript代码压缩使用指南{转}的更多相关文章
- Google Closure Compiler高级压缩混淆Javascript代码
一.背景 前端开发中,特别是移动端,Javascript代码压缩已经成为上线必备条件. 如今主流的Js代码压缩工具主要有: 1)Uglify http://lisperator.net/uglifyj ...
- 使用Google Closure Compiler高级压缩Javascript代码
背景 前端开发中,特别是移动端,Javascript代码压缩已经成为上线必备条件. 如今主流的Js代码压缩工具主要有: 1)Uglify http://lisperator.net/uglifyjs/ ...
- 推荐15个最好用的 JavaScript 代码压缩工具
JavaScript 代码压缩是指去除源代码里的所有不必要的字符,而不改变其功能的过程.这些不必要的字符通常包括空格字符,换行字符,注释以及块分隔符等用来增加可读性的代码,但并不需要它来执行. 在这篇 ...
- JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
网上搜索了,目前主流的Js代码压缩工具主要有Uglify.YUI Compressor.Google Closure Compiler,简单试用了UglifyJS 和Google Closure Co ...
- Google JavaScript代码风格指南
Google JavaScript代码风格指南 修正版本 2.28 Aaron Whyte Bob Jervis Dan Pupius Eric Arvidsson Fritz Schneider R ...
- 如何对Javascript代码进行二次压缩(混淆)
如何对Javascript代码进行二次压缩(混淆) 对Javascript代码进行压缩(混淆),可以有效减少传输和加载时间.但是,不是所有的变量(方法)都能被混淆的,一般来说,只有非属性的变量(方法) ...
- 使用Google Closure Compiler高级压缩Javascript代码注意的几个地方
介绍 GCC(Google Closure Compiler)是由谷歌发布的Js代码压缩编译工具.它可以做到分析Js的代码,移除不需要的代码(dead code),并且去重写它,最后再进行压缩. 三种 ...
- 转:webpack代码压缩优化
压缩代码 18 天前30前端开发 压缩 JavaScript 修改 JavaScript 压缩处理器 其他压缩 JavaScript 的方法 加快 JavaScript 执行速度 作用域提升 预执行 ...
- 7个高性能JavaScript代码高亮插件
本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染 ...
随机推荐
- Sublime Text 2编译python时出错
[Error 2] The system cannot find the file specified [Finished] 解决方法: 1.环境变量path添加: C:\Python32\Too ...
- ED/EP系列7《指令速查表》
命 令 CLA INS ...
- kettle发送邮件
使用kettle发送邮件是为了更好的监控ETL的加载信息 以下是我通过测试的一个案例 1. JOB示意图 2.邮件发送配置详细信息 2.1地址信息配置 2.2 服务器信息配置 上图中所说的" ...
- MySQL使用rand函数实现随机数[转]
如何写一个语句能一下更新几百条MYSQL数据! 需要测试MYSQL数据库,里面有一个上万条数据的数据库,如何写一个PHP文件一下每次更新几百条信息,我都是写一个循环一次更新一条信息,这样我知道用WHI ...
- 调试mvc 源码【转:http://www.cnblogs.com/wucj/archive/2013/06/09/3128698.html】
最近在研究asp.net mvc的源码,于是在想,既然提供了源码,那我们如何进入源码调试了?在网上找了一些调试的方法,试了几个都不行,于是折腾了一上午,终于弄出来了,下面看看我的操作步骤. 一:准 ...
- Paragon NTFS for Mac免费获取官方赠送正版.更新获取ntfs for mac 14方法
Paragon NTFS for Mac免费获取官方赠送正版,没有这个软件的朋友赶紧收下.获取地址http://www.paragon-drivers.com/cn/ntfs-mac-free/ntf ...
- 【iOS】iOS消息推送机制的实现
iOS消息推送的工作机制可以简单的用下图来概括: Provider是指某个iPhone软件的Push服务器,APNS是Apple Push Notification Service的缩写,是苹果的服务 ...
- VS2012 常用web.config配置解析之自定义配置节点
在web.config文件中拥有一个用户自定义配置节点configSections,这个节点可以方便用户在web.config中随意的添加配置节点,让程序更加灵活(主要用于第三方插件的配置使用) 自定 ...
- 读取、添加、删除、修改配置文件 如(Web.config, App.config)
private Configuration config; public OperateConfig() : this(HttpContext.Current.Request.ApplicationP ...
- mysql卸载注意事项
由于数据库软件十分的复杂,不管是Mysql还是sqlserver安装都有很多配置要选择. 假若你第一次安装数据库失败,然后又想卸载,又再次安装,这时可能由于你第一次的卸载不完全,会导致你第二次安装时出 ...