かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Gulp gulp-uglify でmin化しようとしたらエラーになった件

Gulpでjsをminfy化しようとしたら、次のようなエラーが表示されるようになってしまいました。

[21:34:54] Starting 'uglify'...
events.js:160
      throw er; // Unhandled 'error' event
      ^
GulpUglifyError: unable to minify JavaScript
...

uglify のタスクは昔作ってたものの使い回しでこんな感じ

var uglify = require("gulp-uglify");
var rename = require('gulp-rename');

gulp.task('uglify', function(cb) {
  return gulp.src( src )
    .pipr( uglify({
      // ! から始まるコメントを残すオプションを追加
      preserveComments: 'some'
    }) )
    .pipe( rename({
      extname: '.min.js'
    }) )
    .pipe( gulp.dest( assetDir ) );
});

何がエラーなのか調べる

表示されているエラーから何が原因なのかイマイチ解らなかったので、下記のようにuglifyに.on('error')を付けてエラーを表示してみました。

gulp.task('uglify', function(cb) {
  return gulp.src( src )
    .pipr( uglify({
      // ! から始まるコメントを残すオプションを追加
      preserveComments: 'some'
    })
    .on('error', function(e){
      console.log(e);
    }) )
    .pipe( rename({
      extname: '.min.js'
    }) )
    .pipe( gulp.dest( assetDir ) );
});

↓ 表示されたエラーの中に次のように表示されていました。

[21:34:54] Starting 'uglify'...
# 中略
message: '`preserveComments` is not a supported option',

どうやら!から始まるライセンスのコメントを残すオプションのサポートが無くなっているようです。

gulp-uglify v3.0.0 から preserveComments オプションは使えない

どうやらgulp-uglify v3.0.0 からはUglifyJS2に合わせてライセンスのコメントを残す方法が変更になっており
新規プロジェクトでnpm updateした際にgulp-uglifyのバージョンが上がり無効なオプションになってしまっていたのが原因だったようです。

gulp-uglify v3.0.0 で /*!, //! で始まるコメントを残す方法 に書き換えればOKでした。

Output options

👇

gulp.task('uglify', function(cb) {
  return gulp.src( src )
    .pipr( uglify({
      output:{
        comments: /^!/
      }
    })
    .pipe( rename({
      extname: '.min.js'
    }) )
    .pipe( gulp.dest( assetDir ) );
});

その他のオプションの指定方法は UglifyJS2 のGitHubページに載っています。
 
node系はしれっとアップデートの際に後方互換無しの変更されていたりするのでパッケージをアップデートするときとかは特に注意が必要ですね。デザイナーさんやコーダーさんでエンジニアにgulpを使って言われたままに黒い画面でnpm installしたけど上手く動かない!とか結構ありそう…


[参考]

↑ gulp-uglify v2.0.0 の書き方だったので修正しました。