search
LoginSignup
27
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

GruntでJSファイルからconsole.logを消す方法

概要

本番環境にアップしたさいに console.log をうっかり消し忘れて、ログ出っぱなしでIEとかでうわああああを防ぐ方法です。

grunt-chan-log.png

Grunt プラグインの grunt-contrib-uglify はJSファイルの結合や圧縮だけでなく、使われていないコード、デッドコードを削除する機能があります。これを利用して本番環境では必要のない console を取り除きます。

Grunt実行時にデバッグ用フラグをスイッチして、console.log をデッドコードにしてしまおうという仕組みです。

デバッグ用コードを準備する

Grunt と grunt-contrib-uglify はインストール済みという前提です。

次のようなjsがあったとします。

index.js
console.log('hello!');

if (DEBUG) {
    console.info('console.info');
}

DEBUG && console.debug('console.debug');

肝は DEBUG というグローバル変数です。
このグローバル変数を uglify で値を入れ替えてデッドコードを意図的に作り出すのです。

Gruntの設定

Gruntfile.js に uglify のタスクを2つ作成します。

Gruntfile.js
module.exports = function (grunt) {

    grunt.loadNpmTasks('grunt-contrib-uglify');

    grunt.initConfig({
        uglify: {
            //デッドコードの削除を有効にする
            options: {
                compress: {
                    dead_code: true
                }
            },

            //【開発版】変数 DEBUG を true に定義
            dev: {
                options: {
                    compress: {
                        global_defs: {
                            "DEBUG": true
                        }
                    }
                },

                files: {
                    './index.min.js': ['./index.js']
                }
            },

            //【公開版】変数 DEBUG を false に定義
            app: {
                options: {
                    compress: {
                        global_defs: {
                            "DEBUG": false
                        }
                    }
                },

                files: {
                    './index.min.js': ['./index.js']
                }
            }
        }
    });
};

DEVタスク実行時に true を DEBUG に代入するので、当然 console の箇所は実行されます。

もう一方の APPタスクは DEBUG を false にします。これもコードを見たとおり console は実行されません。つまりデッドコードになるので圧縮時にはコード上から削除されるのです。

この方法のよいところは、ifブロックもまるごと削除されるので、ログだけでなく開発時にだけ必要なコードを分離しておくのにも便利です。

Gruntタスクで出し分けする

$ grunt uglify:dev

DEVタスクを実行させます。
出力後のコードはたぶんこんな感じになります。

index.min.js
console.log("hello!"),console.info("console.info"),!0&&console.debug("console.debug");

細かいとこは uglify のバージョンで変わりそうですが、3つの console があることには変わりないと思います。

$ grunt uglify:app

APPタスクを実行させてみましょう。

index.min.js
console.log("hello!");

デバッグ用のコードがきれいに取り除かれて、ただの console.log のみになっているはずです。

変数による出し分けよりもはるかに安全で、無駄なコードもなくなるのでおすすめです。

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
What you can do with signing up
27
Help us understand the problem. What are the problem?