@nqounetです。

タイトルのとおり、grunt serve:distで確認できる公開用のサイトで、デバッグ情報を出力しないようにするのに良い組み合わせがありました。

インストール

インストールするのは以下の2つです。

bowerとnpmでインストールします。

bowerInstallが使える場合はついでにやっておきましょう。使えない場合は手動でloglevelを追加する必要があります。

1
2
3

bower install -S loglevel
npm install -D grunt-remove-logging
grunt bowerInstall

loglevel

loglevelはconsole.debug('foo')とか書いているものをlog.debug('foo')と書くことができます。

そして、log.setLevel('debug')というふうに、ログの出力するレベルを簡単に切り替えられるようになります。

デバッグなどでログを出力する時によく使う手法なのですが、これまでは自作のスクリプトを使っていました。

ライブラリがあればこちらを使うのが便利そうです。

grunt-remove-logging

デバッグ情報はリリース版には不要なので、リリース時には削除しておきたいですよね。

通常の場合は、そこでlog.setLevel('info');とかにするわけですが、デバッグ出力の命令文自体を削除できるのであれば、そうするほうが良いに決まっています。

設定は今回の場合はこんな感じでタスクを追加すればいけます。

1
2
3
4
5
6
7
8
9

removelogging: {
    options: {
        namespace: ['log'],
        methods: ['setLevel', 'trace', 'debug']
    },
    dist: {
        src: ".tmp/concat/scripts/*.js"
    }
},

namespaceとmethodsの組み合わせで削除しているようなので、消そうと思えばなんでも消せそうですね。消しませんが。

実行するタイミングはuglifyの直前あたりが良さそうです。今のbuildタスクはこんな感じです。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

grunt.registerTask('build', [
    'clean:dist',
    'useminPrepare',
    'concurrent:dist',
    'autoprefixer',
    'concat',
    'cssmin',
    'removelogging',
    'uglify',
    'copy:dist',
    'replace',
    'modernizr',
    'rev',
    'usemin',
    'htmlmin'
]);

uglifyの後だと、スクリプトの書き方によってはnamespaceが変わっている場合があったり、削除されることで文法エラーが発生する場合（何故かセミコロンがカンマに変わっていたりする）があるので、uglifyよりは先に処理する方が無難だと思います。