使用uglifyjs压缩美化JS

uglify-js

我用的一个奇怪的组合方式，暂时还没有把他们联系在一起。
server 开发代码
babel 编译es6语法，
uglifyjs 来压缩编译后的代码

    "server": "webpack-dev-server --open",
    "babel": "babel src/mapinit.js -w -o src/mapinit-es5.js ",
    "uglify": "uglifyjs src/mapinit-es5.js -c -m -o src/mapinit.min.js",
    "svgxy": "uglifyjs src/map3dSVG2XY.js -c -m -o src/map3dSVG2XY.min.js"

server 是热更新
babel 中 -w 也是热更新
babel 需要配置文件 .babelrc文件：{ “presets”: [“es2015”] }
uglifyjs 中没有热更新 不能自动编译

继续学习研究
代码生成器默认尝试输出最短代码。如果你想要美化输出，传递–beautify（-b）。您可以选择传递控制代码输出的其他参数：

ascii_only（默认false） - 转义字符串和regexps中的Unicode字符（影响非ascii字符变为无效的指令）

beautify（默认true） - 是否真正美化输出。传递-b将此设置为true，但-b即使您想生成缩小代码，也可能需要传递，以便指定其他参数，以便您可以使用-b beautify=false它来覆盖它。

braces（默认false） -总是在插入大括号if，for， do，while或with语句，即使他们的身体是一个单独的语句。

comments（默认false） - 传递true或"all"保留所有注释，"some"保留一些注释，正则表达式字符串（例如/^!/）或函数。

indent_level（默认4）

indent_start（默认0） - 用许多空格为所有行添加前缀

inline_script（默认true） - 转义HTML注释和字符串中出现的斜杠

keep_quoted_props（默认false） - 启用时，防止从对象文字中的属性名称中删除引号。

max_line_len（默认false） - 最大行长度（对于uglified代码）

preamble（默认null） - 传递时它必须是一个字符串，它将按字面意思添加到输出中。源地图将根据此文本进行调整。例如，可用于插入包含许可信息的注释。

preserve_line（默认false） - 传递true以尽力保留行号。

quote_keys（默认false） - 传递true引用文字对象中的所有键

quote_style（默认0） - 字符串的首选引用样式（也影响引用的属性名称和指令）：

0 - 更喜欢双引号，当字符串本身有更多双引号时，切换到单引号。0最适合gzip大小。
1 - 始终使用单引号
2 - 始终使用双引号
3 - 始终使用原始报价
semicolons（默认true） - 用分号分隔语句。如果你传递的false话我们将尽可能使用换行符而不是分号，从而导致更加可读的uglified代码输出（gzip之前的大小可能会更小; gzip之后的大小不会太大）。

shebang（默认true） - #!在序言中保留shebang （bash脚本）

webkit（默认false） - 为WebKit错误启用变通办法。PhantomJS用户应该将此选项设置为true。

width（默认80） - 仅在启用美化时生效，这指定美化者将尝试遵循的（定向）线宽。它指的是行文本的宽度（不包括缩进）。它目前效果不佳，但它确实使UglifyJS生成的代码更具可读性。

想只美化代码,删除一下注释等多余的空格，该怎么操作呢。开启美化即可 -b 。
-b 后面有一些配置选项，是“”包裹起来，多个选项用分号隔开，在命令行里面就需要加个转义字符了。
"uglify": "uglifyjs src/mapinit-es5.js -o src/mapinit.min.js -m -b ",
"uglify": "uglifyjs src/mapinit-es5.js -o src/mapinit.min.js -m -b \" comments=false,beautify=true\" ",
上面两行的效果一样，因为comments默认就是false就是不保留注释，beautify默认就是true就是开启美化。

-m 是混淆代码 -c是压缩代码 -b是美化代码，我这次主要就是搞懂这三个命令。下面对比一下三个命令的差别
要压缩的代码

/*示例代码*/		

function echo(stringA,stringB){

	var hello="你好";
	
	alert("hello world");
	
}
/*示例代码*/

不同命令压缩后的代码

// -c
function echo(stringA,stringB){alert("hello world")}
// -m
function echo(l,o){var e="你好";alert("hello world")}
// -c -m 
function echo(l,o){alert("hello world")}
// -c -m -b 
function echo(l, o) {
    alert("hello world");
}

-c 开启了压缩，删除了注释，删除了未使用的变量hello，代码变成了一行，
-m 混淆了变量名称 stringA,stringB 变成了l, o。增加了阅读难度。
-c -m 同时使用，效果是上面两者的结合
-c -m - b 美化一下就是给代码换行，方便阅读。

压缩前后代码大小对比
美化和不美化差了一倍多，压缩的效果非常明显。

所以如果只是删除注释，直接-b 就可以了。
参考网站：
https://www.npmjs.com/package/uglify-js
https://blog.csdn.net/u012028371/article/details/78180215