記事:SublimeText3のキーバインドでGulpなどのコマンドを実行する方法のイメージ画像

SublimeText3のキーバインドでGulpなどのコマンドを実行する方法

web制作

Writing:
カッシー

この記事はSublimeTextのkey buind(ショートカットキー)にコマンドプロンプトの起動とタスクランナーなどのコマンドの実行をボタン一発でやってしまうと幸せになれるという業務効率化の話です。

ウェブ制作においてタスクランナーを使用することはもはやデファクトスタンダード、ラソナでもGulpやMiddlemanを使った作業の効率化が行われています。
しかしタスクランナーを実行するためにはターミナルやコマンドプロンプトを立ち上げてコマンドを打ち込まなければならないのですが慣れてくるとこれがだんだん面倒になってきます。

いままで
コマンドプロンプト起動 -> 任意のディレクトリに移動 -> コマンドを打ち込む

面倒!遅い!

これから
ショートカットキーぽち~

簡単!早い!

プロとアマチュアの違いはスピード!

頻度の高い作業ほど効率化することで年間で見ると凄いコストカットになります。
さらに自動化することでムラと無駄を無くすことが出来るのもおすすめなポイントです。

美しい作業フローで快適なコーディングライフ手に入れましょう。

必要なツールなど

筆者がWindowsユーザーなのでWindows環境での内容になりますが基本的にはMacも同じです。
下記ツールはインストール済みという前提です。
各ツールの設定を説明するととても長くなってしまうので割愛します。初見の人ごめんなさい。
ラソナに入社すれば先輩からもろもろ共有されますが学生さんが独学でマスターしてたりするとCoolです。

・SublimeText3
ラソナで使用しているメインエディターです。

・Shell Turtlestein (SublimeText プラグイン)後述の”subprocess_in_cwd”を使うために必要。
参考 http://indeep.xyz/sublime-text-run-conemu-in-the-current-folder/

・node.js
Gulpを動かすために必要です。

・Gulp
node.jsで動くタスクランナーです。

・ConEmu
コマンドプロンプトの代替ツールです、Gulpコマンドなどを実行するために使いますが必須ではない。

key buind設定手順

1.SublimeTextを起動
この説明ではgulpコマンドを走らせる構成なのでカレントディレクトリにgulpfile.jsがあるようにする。
私はプラグインのProject Managerを使って作業フォルダ(プロジェクト)をぱぱっと切り替えてます。
カレント

2.ツールバーのPrefernces -> Key Buindings – User を開いて Key buindを追加する

[
	{
		"keys": ["f5"],
		"command": "subprocess_in_cwd",
		"args": {
		  "cmd": ["C:\\Program Files\\ConEmu\\ConEmu64.exe","gulp"]
		}
	}
]

Key buindの設定はJSON形式で記述します。
“keys”はどのキーを押したらという設定。
“subprocess_in_cwd”は、サブプロセスを起動します。 Shell Turtlestein の拡張機能です。
“args”に定義されたツールを起動したあと続けて”gulp”コマンドを実行します。

key buindは奥が深いのでいろいろ試してみると良いでしょう。
基本 http://qiita.com/shibainurou/items/dc18f2dfc91e36adb208
一つのkey buindで複数のコマンドを実行 http://qiita.com/sachaos/items/35031984bdec2f1aae12

使い方

sublimeTextを開いた状態でkeysに登録したキーを押す。

ポイント

SublimeTextプラグインのプロジェクトマネージャー(プロジェクトフォルダの管理をするプラグイン)でgulpfile.jsのあるフォルダをルートにしておくと便利なのでおすすめです。

これでSublimeTextでf5キーを押せばConEmuが立ち上がりGulpのタスク(gulpfile.jsに定義されたタスク)が実行されます。

key buindで設定するとおすすめなコマンド

bower i
npm i
gulp build

などなどよく使うコマンドを登録していけば捗ります。いろんな使い方が出来そうですね。

SublimeTextにはbuildツールがありますがgulpをメインで使っている場合はgulpfile.jsに記述するのでこの方法が簡単ですね。