VSTSでビルド定義を作成する

今回はVSTSを利用して簡単なビルド定義を作ってみます。

# VSTSとは
[Visual Studio Team Services](https://www.visualstudio.com/ja/team-services/)の略称。

- Version Control System(VCS)の提供
- 継続的インテグレーション
- Release Management
- チームのタスク管理
- Agileな開発をサポートするツールの提供

上記のような開発関連のサポートをするサービスを提供してくれます。


# VSTS上でビルド定義を作ってみる

## 事前準備
1. VSTSのアカウント作成
2. VSTS上でのプロジェクト作成
3. VSTS上のVCSにソースをpush


今回はサンプルとして以下のようなプロジェクトを利用します。

```
$ tree -L 3 -I 'node_modules'
.
├── gulp
│   ├── config.js
│   └── tasks
│       └── test.js
├── gulpfile.js
├── package.json
└── src
    ├── MyAzureFunctions
    │   ├── function.json
    │   └── index.js
    ├── host.json
    └── test
        └── MyAzureFunctionsTest.js
```

## ビルド定義のページへ移動

1. Build定義のページへ移動 <br>
左上のプルダウンメニューから作成したプロジェクトを選択。
タブメニューから`Build & Release > Build`を選択。 
<img width="750" alt="スクリーンショット 2016-12-14 5.55.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/145717/66cb90cb-b05e-ed98-3d33-376927e74de1.png">
<br>

1. 新しいビルド定義を作成<br>
`New`をクリックし、新しいビルド定義を作成します。
<img width="750" alt="VSTS-Build.png" src="https://qiita-image-store.s3.amazonaws.com/0/145717/5ccf110d-bf36-cc6e-41ca-747039832a2c.png">
<br>
`Empty`を選択
<img width="602" alt="スクリーンショット 2016-12-14 5.38.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/145717/a3127d21-6725-3e5f-7479-76026481d15b.png">
<br>
作成したソースがpushしてあるリポジトリを選択し、`Create`
※`Default agent queue`は`Hosted`を選択してください。
これでビルド定義の箱が完成です。
<img width="599" alt="スクリーンショット 2016-12-14 5.39.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/145717/60d15681-13c3-d466-ae7b-a83af45d70ef.png">
<br>

1. ビルドの中身を定義<br>
箱が完成したので、中身を作っていきます。
`Add build step...`をクリックすると、色々とでてきます。
<img width="750" alt="スクリーンショット 2016-12-14 5.40.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/145717/4bb1fb78-de34-bab4-c689-6109cf7835e6.png"><br>
<img width="649" alt="スクリーンショット 2016-12-14 5.40.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/145717/6d37cc94-9259-5ec0-20c4-09dc00d65ad1.png">
<br>
`Gradle`や`gulp`など様々なビルドステップが定義できるので色々とはかどりそうです。
今回は超簡単に`npm`と`gulp`のステップを定義してみました。
最後に`save`で保存します。<br>
<img width="750" alt="スクリーンショット 2016-12-14 5.41.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/145717/9c8a6d12-a9f9-fc7c-e8ec-8f05b126f8b5.png">
<br>
`npm`は単純にinstallコマンドだけ実行しています。
`gulp`は以下のtestコマンドを実行するようにしました。
※本来はここでminifyとかコンパイルのステップを入れるべきでしょう。

```gulpfile.js
var requireDir = require('require-dir');

requireDir('./gulp/tasks', {recurse: true});

```
```./gulp/tasks/test.js
var gulp = require('gulp');
var mocha = require('gulp-mocha');
var config = require('../config').test;

gulp.task('test', function() {
  gulp.src(config.src, {read: false})
  .pipe(mocha({reporter: 'nyan'}))
});

```

## 実行してみる
`Queue new build...`をクリックし実行します。
<img width="750" alt="スクリーンショット 2016-12-14 5.44.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/145717/555f4726-20a4-9ebe-a6ec-99aa77a712dc.png">

任意の設定を変更し、`OK`を選択
※`Queue`は`Hosted`で大丈夫です。
<img width="497" alt="スクリーンショット 2016-12-14 5.44.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/145717/a13a9505-27ff-68a4-68ee-7366995e2da0.png">
<br>
ビルドが成功すると以下のような画面が表示されます。
お疲れ様でした。
<img width="750" alt="スクリーンショット 2016-12-14 6.35.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/145717/3271c532-0839-3654-61ed-85a6d504d90d.png">


# 最後に

仕事でVSTSを利用してタスク管理やソースコードの管理などをしています。
ビルドなどはほぼ運用の方に任せっきりだったので、簡単ではありますが触ってみました。
VSTS上からReleaseの管理もできるので、今後はAzureへのビルドからデプロイまで管理できるような仕組みをつくれたらなー。。。

ここまで読んでくださりありがとうございます！