GruntやGulpのタスクは、基本的にコマンドラインを使って実行します。しかし、 IDE WebStormを使うとUI上から手軽にタスクの実行・停止・再起動が行えます。

UI上でタスクの実行を管理できるメリット

プロジェクトが膨大になるにつれて、タスクの量も増えていきます。WebStormのUIを使うとどんなタスクが登録されているかがわかりやすくなり、管理しやすくなります。また、コマンドラインに疎いチームメンバーがいる場合も、Gulpの環境構築さえできていればボタン一つでタスクの実行ができるため手軽です。

タスクの実行方法

それでは実際にWebStormでタスクを実行する方法を見ていきましょう。今回はGulpの例で説明しますが、Gruntの場合も同じです。

■ 手順

Gulpのタスクが定義されたプロジェクトをWebStormで開きます。
gulpfile.jsの箇所で右クリックし、コンテキストメニューから[Show Gulp Tasks]を選択します。
[View]→[Tool Windows]→[Gulp]と選択すると、UI上にGulpの実行パネルが表示され、あらかじめ登録しておいたタスクが①の箇所に表示されます。
①の箇所のタスク名をダブルクリックするか、②の上部の実行ボタンをダブルクリックすると、指定したタスクが実行されます。

タスクの停止・再実行方法

watch中など実行途中のタスクは、②の箇所の上部ボタンで再実行、下部ボタンで停止ができます。

最後に

プロジェクト引き継ぎ時など、誰かが定義したタスクの名前をコマンドラインから打ち込むのは意外に面倒なものです。タスクの量が多い場合はなおさらです。そんなときはWebStormのUIを使って上手にタスクを管理しましょう。

参考
Gulp Tool Window