はじめに

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

gulp-vaporというnpmパッケージがあるので、そちらを使います。

環境

	バージョン
macOS	10.12
node	v6.5.0
npm	3.10.3
Vapor Toolbox	v1.0.2

前提

すでにVaporのプロジェクトがある前提で進めていきます。
Vaporプロジェクトの作り方はドキュメントをご参考ください。

手順

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

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

▶︎ gulpのインストール

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

$ npm install -g gulp

▶︎ `package.json`の作成

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

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

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

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

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"
}

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

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

▶︎ `gulpfile.js`の作成

次のようにgulpfile.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のドキュメントでは、この記述がなく、デフォルトでswift buildコマンドが設定されているようです。

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

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

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

- #2 について

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

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

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

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

$ 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です。

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

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

$ 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

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