abcdefGets

ゲッツ!

gulp-uglifyでプロパティ名をmangleする

全然ドキュメントがなかったので備忘録。

ClosureCompilerみたいにプロパティ名もmangleしたい。
こんなの

const x = {
  doSomething() {return ...}
  doNothing() {}
}
x.doSomething();
x.doNothing();
const x = {
  a() {return ...}
  b() {}
}

x.a();
x.b();

設定

gulp.task('minify', () => {
  const uglify = require('gulp-uglify');
  gulp.src(['src/index.js'])
    .pipe(uglify({
      mangle: true,
      compress: true,
      mangleProperties: {
        ignore_quoted: true
      }
    }));
});

これが基本。

で、特定のプロパティ名のリネームを防ぎたい場合は、reservedという機能を使う

gulpfile.js

gulp.task('minify', () => {
  const uglify = require('gulp-uglify');
  const Uglify     = require('uglify-js');

  let reserved = Uglify.readReservedFile('./reserved.json');
  reserved = Uglify.readDefaultReservedFile(reserved);

  gulp.src(['src/index.js'])
    .pipe(uglify({
      mangle: true,
      compress: true,
      mangleProperties: {
        reserved: reserved.props,
        ignore_quoted: true
      }
    }));
});

reserved.json

{
  "vars": [  ],
  "props": [ "doSomething", "doNothing" ]
}

これでdoSomethingdoNothingはmangleされなくなる。

上記の記述の

let reserved = Uglify.readReservedFile('./reserved.json');
reserved = Uglify.readDefaultReservedFile(reserved);

の部分ではUglifyjs2が必要なので、別途npm installしてくだはい。
後は必要なプロパティ名をガンガンpropsに突っ込んでいけばOK。

ただ、ClosureCompilerもそうだけど、プロパティ名のmangleにはそれなりのリスクがあるので、
コンパイル後にも統合テストをしたほうが良い。

まとめ

gulp-uglifyが不親切でつらい。