LoginSignup
3
3

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-09-17

例えば複数のライブラリを 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

3
3
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3