Edited at

gulp-uglify で minify したけど、1行にならないとき(UglifyJS で改行位置の最適化をする)

More than 3 years have passed since last update.

例えば複数のライブラリを browserify でまとめて、コード量が多くなったものを minify すると、1行にならず複数行に渡ってしまうことがあります。

それは、output オプションの max_line_len デフォルト値が32000だからです!


解決方法

ouput オプションの max_line_len の値をデカくする。


gulpfile.js

gulp.task('js',function(){

browserify({
entries: ['src/js/app.js']
})
.bundle()
.pipe(source('main.js'))
.pipe(buffer())
.pipe($.uglify({
output:{
max_line_len: 100000
}
}))
.pipe(gulp.dest('dst/js/'));
});


というか解決しなくてもいい(2015/9/17 追記)

コメント欄でご指摘を受け、ClosureCompiler では圧縮コードに適宜改行が挟まれるという件について、理由を調べてみました。

以下にそのような内容の翻訳を見つけました。

http://www37.atwiki.jp/aias-closurecompiler/pages/30.html#id_74f9e4da

(原文は https://developers.google.com/closure/compiler/faq#linefeeds

改行が gzip にどのような影響を与えるのかについては具体的な内容を調べられていない状況ですが、第一に改行を0にするより gzip をするだけのほうが圧倒的に圧縮率は上がるので、本記事で行ったような指定はほとんど無意味か、場合によっては有害になるかもしれないです。

オプションの使い方の参考までにということで……!


補足

uglify の output オプションは他にもいろいろあります。

以下、オプションとデフォルト値を引用します。

indent_start  : 0,     // start indentation on every line (only when `beautify`)

indent_level : 4, // indentation level (only when `beautify`)
quote_keys : false, // quote all keys in object literals?
space_colon : true, // add a space after colon signs?
ascii_only : false, // output ASCII-safe? (encodes Unicode characters as ASCII)
inline_script : false, // escape "</script"?
width : 80, // informative maximum line width (for beautified output)
max_line_len : 32000, // maximum line length (for non-beautified output)
ie_proof : true, // output IE-safe code?
beautify : false, // beautify output?
source_map : null, // output a source map
bracketize : false, // use brackets every time?
comments : false, // output comments?
semicolons : true, // use semicolons to separate statements? (otherwise, newlines)

引用元

http://lisperator.net/uglifyjs/codegen