使用NodeJS和npm安装UglifyJS对JavaScript进行压缩或美化

2017-03-13 05:00:59   前端

  UglifyJS   JavaScript   js压缩   js美化  

Windows下使用NodeJS和npm安装UglifyJS对JavaScript进行压缩或美化

一、下载并安装NodeJS for Windows 0.6.5 或进入NodeJS官网下载最新版本。

Node.js官网

LTS版 下载完后 点击安装包 安装提示 一直点下一步就可以了

二、查看版本:

安装完成后
win+R 运行cmd

  1. node -v
  2. npm -v

如果上诉两个命令出错,请打开系统环境变量Path,直接点确定。再试。

三、安装UglifyJS 这里我们安装最新的版本,具体版本可在npm官网查看,uglify-js版本页面。

  1. npm install uglify-js -g

然后等待命令完成,这个过程时间可能有点长。

如果出错请删除

  1. C:\Users\Administrator\AppData\Roaming\npm 内相关内容
  2. C:\Users\Administrator\AppData\Roaming\npm-cache 内相关内容
  3. C:\Users\Administrator 下的错误信息文件

然后再次运行

  1. npm install uglify-js -g

四、修改配置

上述安装后自动生成的配置文件是不可直接使用的,我们需要手工去修改。

  1. 打开C:\Users\Administrator\AppData\Roaming\npm\uglifyjs.cmd

内容为:

  1. :: Created by npm, please don't edit manually.
  2. "%~dp0\.\node_modules\uglify-js\bin\uglifyjs" %*
  3. 修改为:
  4. :: Created by npm, please don't edit manually.
  5. @IF EXIST "%~dp0"\"node.exe" (
  6. "%~dp0"\"node.exe" "%~dp0\.\node_modules\uglify-js\bin\uglifyjs" %*
  7. ) ELSE (
  8. node "%~dp0\.\node_modules\uglify-js\bin\uglifyjs" %*
  9. )

五、使用uglifyjs对javascript进行压缩美化

  1. 压缩:
  2. uglifyjs f.js > f.min.js//压缩结果从1.3M=》700多k
  3. 美化:
  4. uglifyjs -b f.min.js > f.b.js
  5. C:\Users\Administrator>uglifyjs h:\yjs\echars.min.js > h:\yjs\echars.mi.js
  6. C:\Users\Administrator>uglifyjs h:\yjs\echars.min.js > h:\yjs\echars.mi.js
  7. 最强压缩
  8. C:\Users\Administrator>uglifyjs h:\yjs\echars.min.js -mt --extra -o h:\yjs\echars.mi.js -c
  9. //文件大小变化1.3M=>391k
  10. //-》》》原文档说明
  11. //-mt或者-mangle-toplevel --压缩全局 scope的变量名(默认不作处理)
  12. //--extra 开启一些附加优化,但这些优化可能没有广泛测试通过,因此可能,但不一定破坏你的代码(看到这 说明这个选项压缩的代码不太稳定,但还是测试了一下 结果没有问题 建议可以先尝试一下 压缩程度会更大一些 我的加与不加相差50k )
  13. //-o
  14. //-c

六、总结

  1. 使用这种方式安装的文件很小,安装起来也很快。so 推荐各位使用这种方式使用node.js
  2. 我压缩的 echars.js 起初报错找不到里面的方法 很是纳闷 然后试着改了括号啥的还是不行 接下来 奇迹发生了 恢复改之前 强行 刷新页面(CTRL+F5)就好了...原来应该是缓存导致的

参考文档:http://www.doc88.com/p-8139917272927.html

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

感谢你的支持,我会继续努力!
扫码打赏,建议金额1-10元