Flyとは
https://github.com/flyjs/fly
Node.js製のビルドシステムです。
gulp, Gruntなどと同じような事ができます。基本的なビルドシステムとしての機能を提供し、サードパーティのライブラリをもりもり入れていくことでできることの幅を増やしていく。というところも同じような感じです。
ただ大きくgulp, GruntとことなっていることとしてはFlyの場合、ES6のGeneratorを使って書いていくところです。
また、ES7で導入されるとされている『async/await』を使った記法も使えるようです。
早速適当な構成で試してみた
今回やってみたのは以下の様なこと
- src/にES6でコードを書いている
- src/に書いているコードをES5にコンパイルしてlib/に置く
- lib/に置かれたコードをbrowserifyでビルドしてbuild/に置きたい
- タスクが完了時に通知をしたい
- src/に置かれたファイルの変更を検知して自動的に↑の手順を実行させたい
まぁよくありそうなユースケースです。
必要なライブラリのインストール
npm install --save-dev fly
npm install --save-dev fly-notify
npm install --save-dev fly-browserify
npm install --save-dev fly-babel
タスクは『flyfile.js』という名前で書く
flyfile.js
const paths = {
// ES6で書かれたソースコードはここに置かれる
src: ['src/**/*.js'],
// ES6で書かれたソースコードはここにES5で出力される
lib: ['lib/**/*.js'],
// テストコードがはここに書かれている
test: ['test/**/*.js'],
dist: {
lib: 'lib',
build: 'build',
}
}
/**
* デフォルト(タスクを指定しなかった場合に実行されるタスク)
* ES6で書かれたソースを監視して何か変更があった場合に自動的にビルドを行う
*/
export default function* () {
yield this.watch(paths.src, ['build'])
}
/**
* 本システムでのbuildと呼ばれる工程をすべて行う
*/
export function* build () {
yield this.start(['to5', 'browserify'])
}
/**
* ES6で書かれたコードをES5にコンパイルする
*/
export function* to5 () {
yield this.clear(paths.dist.lib)
yield this
.source(paths.src)
.babel({
stage: 0, sourceMaps: true
})
.notify({
title: 'Fly build',
message: "done to5"
})
.target(paths.dist.lib)
}
/**
* ES5のコードに対してBrowserifyでビルドする
*/
export function* browserify () {
yield this.clear(paths.dist.build)
yield this
.source(paths.lib)
.browse()
.concat('app.js')
.notify({
title: 'Fly build',
message: "done build"
})
.target(paths.dist.build)
}
実行してみる
# 適当にタスクを指定して実行
./node_modules/.bin/fly to5
# デフォルトのタスクを実行
./node_modules/.bin/fly
# 定義されているタスク一覧
./node_modules/.bin/fly --list
# タスク定義ファイルを指定して実行
./node_modules/.bin/fly --file filename.js
おまけ
参考のサンプル実装がみたい
Flyのリポジトリに色々のっているので参考になる
https://github.com/flyjs/fly/tree/master/examples