HTML
JavaScript
Node.js
flow

flowをWindowsでつかってみる +gulpで監視

More than 1 year has passed since last update.

flowを使ってみたい人生だった

紆余曲折あってflowをつかってみたくなりました。しかし、全然動かずいろいろ教えていただいたところ、

  • OCaml で書かれてて・・・とにかくwindowsでは動かすのはできない
  • こちらをつかうんだ

とのことでした。
windows向けのflowがあります。
http://www.ocamlpro.com/pub/ocpwin/flow-builds/
しかし、調べてみるもイマイチ使い方や環境構築方法がわからず悪戦苦闘しました。それに仕事の都合上windows以外を使うわけにはいかなかったのでいろいろと調べて動かすことができました。

flowのインストール

こちらのサイトにアクセスして、ダウンロードをおします。
http://www.ocamlpro.com/pub/ocpwin/flow-builds/
すると

  flow-0.19.1-windows-20151211 ┬ flow.exe
                   ├ README.txt
                                └ test.js

の3ファイルがあります。
試しに、コマンドプロンプトを開いてこのディレクトリまでcdして

  flow init

と打ってみてください。

この時、フォルダーの中にフォルダーがあるので、しっかりとflow.exeを参照できる階層まで降りてきてくださいね!。

するとフォルダー内に.flowconfigファイルが生成されます。

  flow-0.19.1-windows-20151211 ┬ flow.exe
                   ├ README.txt
                                ├ test.js
                                └ .flowconfig

次に

flow check

と打ってください。
すると

test.js:5
  5: foo('Hello, world!');
     ^^^^^^^^^^^^^^^^^^^^ function call
  3:   return x * 10;
              ^ string. This type is incompatible with
  3:   return x * 10;
              ^^^^^^ number


Found 1 error

というエラーがflowから吐かれます。
以上でflow単体でのインストールを動作確認は終了です。

Gulpで監視させる

コマンドプロンプトで

  npm init
  npm install --save gulp

としてgulpをインストールして、gulpfile.jsを作成します。

var gulp = require('gulp');

gulp.task('check',function(){
  return gulp.run('flow.exe check').exec();
});

gulp.task('watch',function(){
  gulp.watch('./*.js',['check'])
});

gulp.task('default',['watch'],function(){});

package.jsonのスクリプトを

{
  "name": "flow-0.19.1-windows-20151211",
  "version": "1.0.0",
  "description": "Flow compiled on Dec 04, 2015, commit 97f864abeb1a9866d4daf8662e9a6185046880e4",
  "main": "test.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "gulp":"gulp"
  },
  "author": "",
  "license": "",
  "dependencies": {
    "gulp": "^3.9.1"
  }
}

とします。
フォルダ構成は

  flow-0.19.1-windows-20151211 ┬ flow.exe
                   ├ README.txt
                                ├ test.js
                                ├ .flowconfig
                                ├ node_modules
                                ├ package.json
                                └ gulpfile.js

となります。
コマンドプロンプトで、

npm run gulp

と打つことで、

[12:45:46] Starting 'watch'...
[12:45:46] Finished 'watch' after 25 ms
[12:45:46] Starting 'default'...
[12:45:46] Finished 'default' after 52 μs

と監視が走ります。
初めてのことだったので、もっといい方法などございましたら是非お教えいただけますと幸いです!