gulpでjsのconsoleを消したり圧縮したりする

引き続きgulpです。プラグインを使ってデバッグに使うconsoleを消したり圧縮したりします。

インストール

consoleを消すプラグインはgulp-strip-debugです。

$ npm install --save-dev gulp-strip-debug

圧縮はお馴染みのuglify。いくつか同じようなプラグインがあるのですが今回はgulp-uglifyを使用しました。

$ npm install --save-dev gulp-uglify

2つインストールしたら準備は完了です。

タスクを記述する

gulpfile.jsに以下を記述。

gulp.task("compress", function () {
  return gulp
    .src("./js/*.js")
    .pipe(stripDebug())
    .pipe(uglify())
    .pipe(gulp.dest("./build/js/"));
});

jsフォルダのjsファイルを読み込み、build/jsフォルダに出力するようにしています。

stripDebugを実行するとconsole.logなどの文字列を消すことが可能です。オプションは特にない模様。

uglifyはjsファイルを圧縮することが可能です。今回はオプションを渡しませんでしたが、渡すことも可能です。先ほどのページにもある程度載っていますがuglify自体のオプションも渡すことが可能のようです(gulp-uglifyはuglifyをラップしただけなので）。

実行

compressタスクを実行するだけです。

$ gulp compress