【Server Side Swift】gulpでVaporのビルドを自動化【Vapor】

# はじめに

Vaporでの開発にgulpを組み合わせて、コードの変更を監視して自動でビルドが走るようにしてみたいと思います。

[gulp-vapor](https://www.npmjs.com/package/gulp-vapor)というnpmパッケージがあるので、そちらを使います。

# 環境
|  | バージョン |
|:-:|:-:|
| macOS | 10.12 |
| node | v6.5.0 |
| npm | 3.10.3 |
| Vapor Toolbox | v1.0.2 |

# 前提

すでにVaporのプロジェクトがある前提で進めていきます。
Vaporプロジェクトの作り方は[ドキュメント](https://vapor.github.io/documentation/)をご参考ください。

# 手順

## ▶︎ node.jsのインストール

nodeのインストール方法は割愛します。
以下のような記事などググって探していただければと思います。

http://www.hirooooo-lab.com/entry/development/install-node

## ▶︎ gulpのインストール

グローバルな環境にgulpをインストールします。

```bash
$ npm install -g gulp
```

## ▶︎  `package.json`の作成

Vaporのプロジェクトディレクトリに移動して、`npm init`でpackage.jsonの雛形を作ります。

```bash
$ cd /path/to/your/vapor/project
$ npm init
```

対話式に色々尋ねられますが、
最初のnameのみ入力して、他は基本Enterで大丈夫かと思います。

完了すれば次のようなファイルができるかと思います。

```json:package.json
{
  "name": "vapor-project",
  "version": "1.0.0",
  "description": "A basic vapor template for starting a new Vapor web application. If you're us    ing vapor toolbox, you can use: `vapor new --template=basic`",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
```

## ▶︎ モジュールのインストール

```bash
$ npm install --save-dev gulp
$ npm install --save-dev gulp-vapor
```


## ▶︎ `gulpfile.js`の作成

次のように`gulpfile.js`を作成し、プロジェクト直下に配置します。

```js:gulpfile.js
'use strict';

var gulp = require('gulp');
var vapor = require('gulp-vapor');

vapor.config.commands.build = 'vapor build'; // #1

gulp.task('vapor:start', vapor.start);
gulp.task('vapor:reload', vapor.reload);

gulp.task('watch', function() {
    // #2
    var target = [
        './Sources/**/*',
        './Resources/**/*'
    ];
    gulp.watch(target, ['vapor:reload']);
});

gulp.task('default', ['vapor:start', 'watch']);
```

### - #1 について

\#1の部分で、ビルドコマンドのカスタマイズができます。
[gulp-vaporのドキュメント](https://www.npmjs.com/package/gulp-vapor)では、この記述がなく、デフォルトで`swift build`コマンドが設定されているようです。

私の環境で`swift build`がうまく通らなかったので、`vapor build`で通すようにしました。
`swift build`でビルドが通るようなら、gulp-vaporのドキュメント同様にここの記述はなくてもいいと思います。

また、ドキュメントによると、この記述はビルドコマンドにオプションをつけたいときなどに活用するようです。
https://www.npmjs.com/package/gulp-vapor#configuration

```js
vapor.config.commands.build = 'swift build --some-flag'
```

### - #2 について

ここで、監視対象のフォルダやファイルを指定します。
こちらもドキュメントでは`Sources`フォルダ以下のファイルのみでしたが、`Resources`以下のファイルも監視するようにしました。

## ▶︎ Vaporアプリケーションの起動

事前準備は以上で完了です。
それでは、Vaporで作っているアプリケーションをgulpを通して起動させてみましょう。

起動はおもむろにgulpコマンドを打つだけです。

```bash
$ gulp
[14:18:15] Using gulpfile ~/path/to/your/vapor/project/gulpfile.js
[14:18:15] Starting 'vapor:start'...
[14:18:15] gulp-vapor: Starting Vapor
[14:18:15] Finished 'vapor:start' after 10 ms
[14:18:15] Starting 'watch'...
[14:18:15] Finished 'watch' after 43 ms
[14:18:15] Starting 'default'...
[14:18:15] Finished 'default' after 54 μs
Exists not stored
Database prepared
Server 'default' starting at 0.0.0.0:8080
```

こんな感じでVaporのアプリケーションが起動すればOKです。

## ▶︎ ファイルを変更してみる

アプリケーションが起動している状態で監視対象のファイルを変更してみましょう。

```bash
$ gulp
[14:18:15] Using gulpfile ~/path/to/your/vapor/project/gulpfile.js
[14:18:15] Starting 'vapor:start'...
[14:18:15] gulp-vapor: Starting Vapor
[14:18:15] Finished 'vapor:start' after 10 ms
[14:18:15] Starting 'watch'...
[14:18:15] Finished 'watch' after 43 ms
[14:18:15] Starting 'default'...
[14:18:15] Finished 'default' after 54 μs
Exists not stored
Database prepared
Server 'default' starting at 0.0.0.0:8080
##################################
# ここで監視対象のファイルを変更してみた 
##################################
[14:29:01] Starting 'vapor:reload'...
[14:29:01] gulp-vapor: Building Vapor
[14:29:14] gulp-vapor: Stopping Vapor
[14:29:14] gulp-vapor: Starting Vapor
[14:29:14] Finished 'vapor:reload' after 13 s
Exists not stored
Database prepared
Server 'default' starting at 0.0.0.0:8080
```

こんな感じでreloadが走り、勝手にビルドしなおしてくれます。


# 終わりに

これで、「コードを変更→`vapor build`→`vapor run serve`」という一連の流れを自動化することができました。

ただし、ブラウザのリロードはされないので、ブラウザのリロードが必要な変更は手動でリロードする必要があります。

# 補足
2016/09/24現在、Vaporの公式ドキュメントにはgulp-vaporについての記述はありません。
ただし、gulp-vaporのドキュメント作成をGithub上のissueとしてあげているようなので、もしかしたら公式的にドキュメント化される可能性もあります。
（https://github.com/vapor/vapor/issues/311）

その際にはそちらを参考にするのが確実かと思います。

# 参考

- gulp-vapor
    - https://www.npmjs.com/package/gulp-vapor
- gulpのインストール
    - http://qiita.com/kazukichi/items/884a1379eea5918689ed