7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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

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

7
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?