node下使用UglifyJS压缩合并JS文件的方法


Posted in Javascript onMarch 07, 2018

现在UglifyJS的最新版本为 2.8.13,主要功能为JS的压缩和合并,下面直接进入教程:

安装:

<span style="font-size:18px;color:#006600;">npm install uglify-js -g</span>

将uglifyjs安装为全局变量,方便我们在任何地方使用。

<span style="color:#006600;">下面是shell命令的中文解释:
* source-map [string],生成source map文件。
* ?source-map-root [string], 指定生成source map的源文件位置。
* ?source-map-url [string], 指定source map的网站访问地址。
* ?source-map-include-sources,设置源文件被包含到source map中。
* ?in-source-map,自定义source map,用于其他工具生成的source map。
* ?screw-ie8, 用于生成完全兼容IE6-8的代码。
* ?expr, 解析一个表达式或JSON。
* -p, ?prefix [string], 跳过原始文件名的前缀部分,用于指定源文件、source map和输出文件的相对路径。
* -o, ?output [string], 输出到文件。
* -b, ?beautify [string], 输出带格式化的文件。
* -m, ?mangle [string], 输出变量名替换后的文件。
* -r, ?reserved [string], 保留变量名,排除mangle过程。
* -c, ?compress [string], 输出压缩后的文件。
* -d, ?define [string], 全局定义。
* -e, ?enclose [string], 把所有代码合并到一个函数中,并提供一个可配置的参数列表。
* ?comments [string], 增加注释参数,如@license、@preserve。
* ?preamble [string], 增加注释描述。
* ?stats, 显示运行状态。
* ?acorn, 用Acorn做解析。
* ?spidermonkey, 解析SpiderMonkey格式的文件,如JSON。
* ?self, 把UglifyJS2做为依赖库一起打包。
* ?wrap, 把所有代码合并到一个函数中。
* ?export-all, 和?wrap一起使用,自动输出到全局环境。
* ?lint, 显示环境的异常信息。
* -v, ?verbose, 打印运行日志详细。
* -V, ?version, 打印版本号。
* ?noerr, 忽略错误命令行参数。</span>

# UglifyJS2 使用方法

> UglifyJS2使用包括2种方式

1. shell 指令调用

2. api 调用

shell命令:

合并压缩start.js、test.js这两个JS文件

~> uglifyjs start.js test.js -o new.min.js --source-map new.min.js.map

API调用:

var fs = require('fs');
var uglifyjs = require("uglify-js");
var result = uglifyjs.minify("../test.js",{
 mangle:false
});

上面的一个基本核心方法 minify ,下面我们单独看下这个方法

这是一个非常智能的方法 ,共 2个参数

第一个参数 *

第一个参数可以是 字符串,路径,路径数组;

1.字符串参数

就是我们书写的 javascript 代码可以直接当做一个字符串参数参数函数,但是需要有第二个参数告诉函数,这是 javascript 源码字符串

var result = uglifyjs.minify("var fun=function(){ alert('itKingOne博客');};",{
 mangle:false,
 fromString:true,
});

上面的第一个参数传入了 javascript 源码,第二个参数中 formString : true ,就是告诉 minify 函数,前面的参数是 需要压缩的 javascript 源码.

字符串路径

这是函数默认支持的一种方式,可以单独的一个参数,直接给定一个 需要压缩的 javascript 文件路径, 当然也可以2个参数.

var result = uglifyjs.minify("../test.js");

上面的函数执行,会吧我的上级目录中的 test.js 进行压缩.默认一个参数时,表示文件路径

数组指定多个路径

可以一个参数,但是这个参数是一个数组 [ ‘路径1',‘路径2',‘路径3'] 类似这样结果就是把上面路径的所有 javascript 压缩后返回到了 result 对象中,稍后我们单独说下 result 返回值.

var result = uglifyjs.minify([ "../test.js", "../mian.js"]);

第二个参数*

参数说明

romString属性 (default false) 指定第一个参数中的 字符串是 javascript 源码

mangle属性 默认为true;指定为false时,表示不进行混淆压缩

width和max-line-len属性 按照说明,这里应该是指压缩后的文件的长度

outSourceMap属性 用来指定函数返回值result.map字符串转化为Object后file属性的值

sourceRoot属性 用来指定函数返回值result.map字符串转化为Object后sourceRoot属性的值

返回值 result *

返回值 result 是一个对象.code 属性对应的是压缩后的脚本

{"code":"这里是压缩后的 javascript 脚本","map":null}

以上这篇node下使用UglifyJS压缩合并JS文件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 简单的进度条实现代码
Mar 11 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
window resize和scroll事件的基本优化思路
Apr 29 Javascript
jquery提示效果实例分析
Nov 25 Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 Javascript
jQuery中的Deferred和promise 的区别
Apr 03 Javascript
JavaScript中的工厂函数(推荐)
Mar 08 Javascript
手机端转换rem适应
Apr 01 Javascript
npm国内镜像 安装失败的几种解决方案
Jun 04 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
Aug 27 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
Mar 07 #Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 #Javascript
浅谈webpack打包之后的文件过大的解决方法
Mar 07 #Javascript
解决iview打包时UglifyJs报错的问题
Mar 07 #Javascript
React Native使用fetch实现图片上传的示例代码
Mar 07 #Javascript
使用vue制作探探滑动堆叠组件的实例代码
Mar 07 #Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
Mar 07 #Javascript
You might like
最简单的PHP程序--记数器
2006/10/09 PHP
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
2018/09/16 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
javascript div 弹出可拖动窗口
2009/02/26 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
淘宝搜索框效果实现分析
2011/03/05 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
2012/05/11 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
Angularjs上传图片实例详解
2017/08/06 Javascript
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
深入了解js原型模式
2019/05/30 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
用python实现的去除win下文本文件头部BOM的代码
2013/02/10 Python
Python做简单的字符串匹配详解
2017/03/21 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
Python基于dom操作xml数据的方法示例
2018/05/12 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
无工作经验者个人求职信范文
2013/12/22 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
大学生求职自荐信
2015/03/24 职场文书
社区安置帮教工作总结2015
2015/05/20 职场文书
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python
Redis可视化客户端小结
2021/06/10 Redis
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis