こんにちは。エンタープライズストラテジーサービスグループの柳井です。
この記事は、「ネクストスケープ クラウド事業本部 Advent Calendar 2017」 17日目の記事です。
ネスケラボには初登場です。最近のプロジェクトでやってみたことを自分の備忘録もかねて記事にしたいと思います。
ビルドから、デリバリーまでのタスクを自動化できるタスクランナーのGulp、便利ですよね。皆さんつかっていますか？
Gulpについては詳しく触れませんが、Gulpでビルド周りがタスク化されたプロジェクトをVSTSビルドに移行してみたので、その時の手順などをご紹介したいと思います。
ビルド定義の作成
BuldsのDefinitionsから新しいビルド定義を作っていきます。
新規でビルド定義を作るときは、すでに既存のテンプレートが多数用意されておりますので、そちらをベースにすると簡単に作成できます。
Gulpを利用するためのテンプレートも用意されておりますので、検索窓でGulpと入れて検索してみましょう。
テンプレートを選ぶと、すでに最低限必要な構成が定義された状態で開きます。
Gulp実行に必要なnpm installとrun gulp task が入っていますね。
あとは必要な項目を埋めていくだけでビルド定義ができちゃいます。
簡単ですね。
AgentにHostedを選択し、ソースのリポジトリを指定します。
ではGulpを動かすための設定をしてみましょう。
今回のプロジェクトディレクトリ構成は以下のようになっています。
project-a
├── gulpfile.js
├── package.json
└── src
npm installを選びます。ここではnpm installするパッケージファイルを指定します。package.jsonファイルがある場所を指定します。
次に Run gulp task を選び、Guipfileの場所と実行するタスク名を指定します。
以上でビルド定義ができました。簡単ですね。
実行してみましょう。
ビルド定義の実行
Save & Queueで保存して実行してくれます。
保存だけしたい場合、Saveを選べばOK
手動で実行する場合、以下のダイアログが表示されますが、そのままQueueで実行します。
実行中のビルドは以下のような画面で進捗を確認できます。
実行結果や、エラーが出た場合の原因調査などをしたい場合、同じ画面からログが確認できます。Logから確認しましょう。
デバッグ情報を出力したいときはビルド定義の「Variables」に「system.debug」を登録し、値に「true」を入れます。
ビルドが成功すると以下のようになります。
ビルドされたファイルの確認
Gulpを実行するだけなら、ビルドタスクはnpm install と Run Gulp task だけで十分ですが、ビルド定義にはその結果を出力するタスクが必要です。
テンプレートから定義を作成したときに、自動的に追加された「Archve Files」「Publish Artifacts:drop」はその一連のタスクを実行してくれます。
Archive filesはファイル圧縮、Publish Artifactsはビルド成果のファイルを出力します。
出力されたファイルは、ビルド実行結果画面の「Artifacts」から確認できますので、一度チェックしておくとよいですね。
実行後は、念のためローカルで実行されたGulpと同じことができているか確認しましょう。
その他
今回は詳しく書きませんが、ビルド実行が正常に終了したら、次にリリースプロセスにつなげることができます。
トリガーの設定もできるので、ソースが変更されたら自動でビルド～テスト～リリースなんてことも可能です。
設定も豊富になって、複雑なビルド＆リリースプロセスもこなせるようになっていますので、ぜひ活用したいですね。
まとめ
- ビルド定義はテンプレートを使うと簡単に設定できる
- npm installにpackage.jsonファイルがある場所を指定
- Run gulp taskにはGuipfileの場所と実行するタスク名を指定
- エラーが出た場合はLogを確認
- デバッグ情報を出したいときはVariablesにsystem.debugを追加し、trueを指定
- ビルドの成果はビルド結果画面からArtifactsから確認
