AtomエディターからGulpタスクを実行する「gulp-control」

GulpをAtomから起動・停止可能にするパッケージ「gulp-control」を紹介します。

https://atom.io/packages/gulp-control

「gulp-control」パッケージの特徴

まずは「gulp-control」パッケージの特徴とメリットの紹介から。

導入が簡単!

インストールし有効化するだけで、プロジェクトフォルダ直下のgulpfile.jsを読み込んでくれます。特別な設定は一切不要です。

AtomのタブでGulpを管理できる

「gulp-control」パッケージで提供されるタスク管理画面は、Atom上で一つのタブとして表示されます。
動作状況なども表示されるため、Gulpタスク実行時に他のアプリケーションに移る必要がなくなります。

GUIで直感的、かつコマンドを覚えないで済む

Gulpの取っ付きにくさの要因の一つに、Gulpが基本的にはコマンドラインで使用するツールであることが挙げられます。
「gulp-control」パッケージで表示されるタスク管理画面では、起動/停止させたいタスク名をクリックするだけで動作させることが可能です。
直感的であることはもちろん、タスクが増えれば増えるほど、コマンドを覚える必要がないというメリットが大きくなります。

「gulp-control」パッケージの導入方法

次に、「gulp-control」パッケージの導入の仕方を紹介します。とはいえ、やることはほとんどありません。

Gulpの設定

特に何もする必要はありません。

Atomの設定

パッケージをインストールし、有効化させるだけでOK。
ツールバーを使用している場合、ショートカットのボタンを追加しておくとさらに快適なので個人的にオススメ。

Gulpタスク管理ファイルの設置場所について

「gulp-control」は、現在開いているプロジェクトフォルダのgulpfile.jsを読み込みます。
そのため、プロジェクトフォルダ直下にgulpfile.js及びその関連ファイルを用意しておく必要があります。

-- /project
   |-- /node_modules
   |-- gulpfile.js
   |-- package.json
   |-- etc...

ファイルを読み込めると、以下のようにタスクが一覧で表示されます。

まとめ

AtomからGulpを操作できることももちろんですが、何よりも便利なのがタスクをクリックだけで実行できること。打ち間違いなどのケアレスミスも減ります。
Atomにはコマンド操作を可能にするパッケージもありますが、GUIという点だけでも「gulp-control」パッケージは非常に有用です。ぜひお試しを。