uglifyjs随笔

今天看书给推荐了几个代码压缩工具来压缩脚本

压缩脚本,指的是把脚本文件中不必要的字节,如空格和注释,统统删除,从而达到“压缩”文件的目的。有的精简程序甚至会重写你的部分代码,使用更短的变量名,从而减少整体文件的大小。

精简后的代码虽然不容易看懂,但却能大幅减少文件大小。多数情况下,我们应该有两个版本,一个是工作副本,可以修改代码并添加注释;另一个是精简副本,用于放在站点上。通常,为了与非精简版本区分开,最好在精简副本的文件名上加上min字样:

<script src="scripts/scriptName-min.js"></script>

于是书中给了几个有代表性的压缩代码工具:

Douglas Crockford的JSMin;

雅虎的YUI Compressor;

谷歌的Closure Compiler等。

我下载了一个uglifyjs,用来压缩JS文件,还能优化JS,它是基于node的,要想安装uglifyjs,首先要安装好node.js和npm

使用node -v 命令可以查看下安装的版本

接下来安装UglifyJS,命令为:npm install uglify-js -g    最后要把node和npm添加到环境变量中,然后就可以用uglifyjs来压缩js文件了

下面演示如何利用uglifyjs来压缩:

首先确定好要压缩的文件所在的位置,打开cmd,找到该文件的位置->然后输入命令:uglifyjs inet.js -o inet-min.js (这里我的文件名为inet.js,压缩后保存的名字为inet-min.js)

注意:uglifyjs inet.js -m -o inet.min.js 这条命令是把变量名改为a,b,c,d.....的

uglifyjs压缩批处理

我们不可能每次都打开cmd去键入压缩执行代码,容易写错不说(如上面那个结果图),还耗时,想想都会让人疯掉。懒人有懒法,花了点功夫,折腾了一个批处理文件,以后,想要压缩JS,只要双击运行这个.bat文件就可以了!完整代码如下:

@echo off
:: 设置压缩JS文件的根目录,脚本会自动按树层次查找和压缩所有的JS
SET JSFOLDER=C:\Users\Administrator\Desktop\formini
echo 正在查找JS文件
chdir /d %JSFOLDER%
for /r . %%a in (*.js) do (
    @echo 正在压缩 %%~a ...
    uglifyjs %%~fa  -m -o %%~fa
)
echo 完成!
pause & exit

新建一个txt文档,任意命名,将上面的代码粘贴进去,修改JSFOLDER后面的文件夹目录为你自己的,然后把.txt后缀改成.bat就可以啦!然后双击就可以批量使用uglifyjs压缩JS文件啦!

最后说一下,我感觉uglifyjs还是挺好用的,不过缺点就是只能压缩js不能压缩css。

时间: 2024-10-03 23:24:25

uglifyjs随笔的相关文章

C#博客随笔之六:数据绑定

这一篇随笔记录的是在完成程序中遇到的一些情况 首先要讲的是MVVM 所谓MVVM就是Model,View,ViewModel 下面是MVVM的优点(引用自百度百科): MVVM模式和MVC模式一样,主要目的是分离视图(View)和模型(Model),有几大优点1. 低耦合.视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变.2. 可重用性.你可以把一些视图

webpack 打包压缩 ES6文件报错UglifyJs + Unexpected token punc &#171;(&#187;, expected punc &#171;:&#187;

webpack打包压缩 ES6 js..vue报错: ERROR in js/test.js from UglifyJs Unexpected token punc ?(?, expected punc ?:? [js/test.js:1374,5] 解决方案: 配置babel,把配置放到文件[.babelrc]中 { "presets": ["es2015"] }

Abby&#39;s 学习php5随笔

2017.6.27 Abby's cakephp2 学习之旅 下载了XAMPP集成开发环境,然后配置其数据库,参考学习教程, 1.建立表单. 配置完信息如下,Cache Apache默认在windows下是system用户,所以权限最高,但xampp集成环境中的apache确是administor 如何更改apache用户为system 静默开发.(一种开发方法,番茄ToDo中的学霸模式有些相似) 如何设置.ctp的显示 http://cakephp2.local/posts/index怎么就可

java基础随笔 字符数据类型char的单引号

public class Love{ public static void main(String[] args){ System.out.println('*'+'\t'+'*'); System.out.println("*"+"\t"+"*") } } 运行结果   第一行为  93 第二行为  *        * 原因 第一行中'\t' 单引号  识别为字符数据类型char,char类型是可以运算的,在第一行中+做了运算符. 第二行&q

web前端学习随笔

好好算下来,学习web前端已有半个月了,这半个月来主要学习的是HTML和CSS部分,期间有困惑,也有解决困惑时的快感,所以想把这段时间感受到的一些东西记下来,因为内容比较杂,所以干脆叫随笔吧.这里面不会说前端的相关基础知识,只是说一些自己对前端的一些认识. html是用来控制页面结构的我曾经对这句话有过疑问,觉得html应该是控制页面内容的,为什么要说是控制页面结构的呢?在查看京东首页的代码时,我恍然大悟,html确实是定义页面内容的,但同时它也要控制页面的结构.举例来说,京东商品分类的div包

JavaWeb学习随笔

Servlet学习随笔 1.HttpServlet init(ServletConfig)------Servlet生命周期中的初始方法,默认情况是服务器创建后第一次访问这个Servlet时调用,可以修改配置信息,使其在服务器一创建时就被调用; 修改配置信息的方法-----在web.xml的<servlet>下添加<load-on-startup>x<load-on-startup>,x是正整数,越小表示优先级越高 url路径的配置,完全匹配>目录匹配>(.

想知道博客园随笔总阅读量吗?

我真的是闲的无聊了...,前提是你写的随笔总数少于等于40条. 0.在选项里设置一页显示40条随笔 1,打开自己的随笔列表:https://i.cnblogs.com/posts 2,在当前页面f12打开浏览器控制台 3,粘贴进去以下代码 var trs=document.querySelectorAll('#post_list tr td:nth-child(4)')//取得阅读量 atrs=Array.from?Array.from(trs):Array.prototype.slice.ca

随笔1104

随笔1104 一.变量定义 var a = 10; 如果定义小数或整数的变量,等号后面值直接写 如果定义字符串的变量,等号后面的值要加双引号或单引号 类型转换 parseInt(); 强制转换为整数 parseFloat();强制转换为小数 二.运算符表达式 1.数学运算符 + - * / % 百分号是取余 例:alert(a+b); alert(a%b); a除以b的余数 2.逻辑运算符 && 并 指两者都满足 || 或 指两者其中任何一个满足 ! 非 指强制变反 真变假 假变真 3.比

alpha发布(技术随笔)

昨天是班级里面每个小组要进行alpha演示,大家都很努力的去做自己的项目.我们nice!组没有演示自己的项目,只一点很惭愧,身为组员没有协助组长按时完成项目,这一点自己也感觉很抱歉,虽然每天感觉自己都有去做,但是效果非常不理想.看到天天向上组的连连看界面做的很好,有背景切换,主题,游戏的级别等做的很细心.先锋组的俄罗斯方块也不错,看到同学玩的那么开心就知道了,还有飞天小女警的礼物挑选真的很用心,这个idea就很新颖,而且完成的也很好,老师也说如果转换成手机app那就更方便使用了,市场很好. 这次