開発中にオブジェクトや変数を確認するために使うconsole.log関数。

本番環境でそのまま使ってもサイトの見た目上は特に変わらないが、デベロッパーツールを開くと訳のわからない変数などがズラズラと表示され、非常にみっともない。

かといって、いちいち手動でconsole.logをコメントアウトしていくのもアホらしい。

今回は、Gulpの「gulp-strip-debug」というプラグインを使って、console.logを除外したJSファイルを出力させる方法を紹介する。

プラグインのインストール

Gulpのルートディレクトリで以下のインストールコマンドを実行する。

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

gulpfile.jsの設定

プラグインの使い方はいたってシンプルで、基本的なタスクは次のとおり。

var gulp = require('gulp');
var stripDebug = require('gulp-strip-debug');

const { watch, series, task, src, dest, parallel } = require('gulp');

gulp.task('default', () => {
    return gulp.src('src/app.js')
        .pipe(stripDebug())
        .pipe(gulp.dest('dist/app.js'));
});

gulp-babelなど別のプラグインと組み合わせて使う場合も、pipeでstripDebug()を実行させればOK。

// babel
task('babel', () => {
  return (
    src(src/app.js)
    .pipe(babel({
      presets: ['@babel/preset-env']
    }))
    .pipe(stripDebug())
    .pipe(dest(dist/app.js))
  );
});