読者です 読者をやめる 読者になる 読者になる

I'm kubosho_

思想の固まり

Visual Studio でも Gulp が使いたい!

Visual Studio でも Grunt もしくは Gulp が使いたいと思い、いろいろ試行錯誤した結果 Task Runner Explorer に落ち着いたので利用方法やなぜそれを選んだかを書いていきます。

なぜ Grunt もしくは Gulp を使いたくなったか

Visual Studio だけで開発を完結させたかった

LESS を CSS にコンパイルするのに PreprosKoala を今まで使ってきましたが、Visual Studio 上で開発している以上、Visual Studio 上で拡張機能をインストールして Grunt/Gulp のタスクを実行できるようにすれば、Visual Studio だけで開発が完結できて良いと感じたためです。

CSS 側の問題

先ほど挙げた Prepros や Koala には無い機能を使いたくなってきたためです。Prepros と Koala 共に Autoprefixer の機能はありますが、それ以外にも以下のことをやりたくなりました。

  • CSS のコード品質を高める CSSLint
  • CSS のコード整形をおこなう CSSComb
  • CSS のコード解析をおこなう StyleStats

JavaScript 側の問題

E2E テストをしたくなってきたためです。

具体的には最近 TypeScript で書かれたコードをリファクタリングすることが増えていますが、リファクタリング後のコードが元通りに動いているのかどうかをなるべく労力をかけずに確認したいと思ったからでした。

ただし、単体テスト的なことをしようとすると、TypeScript の内部モジュールを使っているために、テストコードから実際のコードが使えず、テストができないという事態になっているため、実際のコードを気にせず動作が正しいのか確かめられそうな E2E テストをしようと思いました。

上記二つのことを一つのツールでおこなえるようにするために、Grunt もしくは Gulp を使おうと思い、検討した結果 Gulp を選択しました。

Gulp にした理由

Gulp に慣れ親しんでいる

一年前くらいから Gulp を使い続けて、体に馴染んでいるというのが一つの理由です。

Grunt は死にかけている

Grunt は長らく更新がなく、これ以上の機能追加・改善が期待できない状況となっています。

Gulp と比較すると issue や Pull Request が溜まっているのも気になります。

Grunt の状況

現在の Grunt のバージョンが 0.4.6 ですが、このバージョンに更新された日時が 2014/6/19 ともうすぐ一年が経過しそうです。

Bumping version to 0.4.6-0. · gruntjs/grunt@c5ae240

一応 Pull Request はマージされていますが、機能追加はなく、既存のファイルに対して軽微な修正が入っているのみとなっています。

それらの修正はリリースされているバージョンには反映されていない状況となっています。

Gulp の状況

一方 Gulp は gulp/CHANGELOG.md at master · gulpjs/gulp を見ると分かるように Babel のサポートが追加されたり、様々な修正が入っています。またそれらの追加や修正はリリースされているバージョンに入っています。

その他にもバージョン 4.0 が別ブランチで開発されています

とはいえ Gulp もダメなところがあると考えています。

Gulp で微妙と感じているところ

Gulp プラグイン(が依存しているライブラリ)は古くなる場合がある

Gulp だけでなく Grunt もそうですが、それぞれのために作られたプラグインは古くなる場合があります。

特に Grunt は Plugins - Grunt: The JavaScript Task Runner を見る限り、最終更新日が一番新しくても三ヶ月前という状況です。

一方の Gulp は npmsearch - node.js Package Search Utility を見る限り、Grunt よりは最終更新日が新しいです。

とはいえ、例えば koistya/gulp-csscomb は CSSComb の最新バージョンが 3.1.5 なのに対し、gulp-csscomb は 3.0.3 を使っていたりします。プラグインを使う人が依存しているライブラリを更新して、オプションも更新されていたら Gulp プラグイン側も更新して…ということをやれば良いとは思いますが、若干の面倒臭さを感じてしまいます(とはいえ Pull Request はしたほうが良いのですが…)。

Grunt/Gulpで憔悴したおっさんの話 - MOL にある以下の一文が響きます。

普通に元のコマンド叩けよって思うんです。

それでも Gulp を使う理由

ここまで書いて、npm の run-script でビルドの処理を書いたほうが良いのではと思った人もいるかもしれません。または Makefile を使うのもありではと思うかもしれません。

しかし、どちらも Visual Studio 上から使えないため、若干面倒になります。Makefile に関しては Windows では何らかの UNIX 系コマンドが使えるようになるツールをインストールしないと使えないので、さらに面倒です。

なるべく Visual Studio 内で完結させたいと思った結果、拡張機能をインストールすれば使える Gulp を使おうと思いました。

Visual Studio で Gulp を使う

Grunt Launcher

最初に触ってみたのは Grunt Launcher でした。拡張機能の名前と反して Grunt だけでなく Gulp や Bower も扱うことができます。

gruntfile.js や gulpfile.js をソリューションエクスプローラー上で右クリックすると、定義しているタスクを使うことができます。どんな感じかはリンク先のスクリーンショットを見るのが分かりやすいと思います。

gruntfile.js や gulpfile.js をどのディレクトリに置いていても使えるのと、右クリックから実行できるのは手軽でよかったのですが、次に紹介する Task Runner Explorer を使ってみたところ「Visual Studio との連携が Grunt Launcher のほうが弱い気がする」と感じました。

Task Runner Explorer

出力ウインドウ内ではなく、専用のウインドウで Gulp などで定義しているタスクを実行できたり、ビルド前や後などに任意のタスクを実行できるのも良いと感じました。

f:id:kubosh0:20150605001442p:plain

あとは Visual Studio 2015 に統合されるので、今後更新がされなくて死んでいくという事態も防げそうです。

ただ Task Runner Explorer は gulpfile.js や gruntfile.js を置く場所に制限がある、つまりプロジェクトルート(*.csproj)がある場所と同じ場所に gulpfile.js を置かないといけないところが、Grunt Launcher と比べるとダメなところかなと思います。

まとめ

タスクランナーを使いたい場合、Makefile がそのままでは使えないという Windows の制約と、npm run-script は Visual Studio に統合できないということを考えると、Grunt もしくは Gulp を使って Visual Studio 上で Task Runner Explorer を使うというのが比較的良いのなという考えです。