Gruntやgulp等に続くタスク自動化ツール「Fly」の導入手順

「Fly」というGruntやgulp等同じタスクランナー&ビルドツールが出ているという話を聞き、とりあえず試しておこうと思い、まだ資料等が少なかったので、ついでに導入手順と記述方法を簡単にまとめてみました。

現在、自身ではgulpを使用しているのですが、似ている部分も多く、gulp等を使用した経験があれば導入は難しく無いと思われます。最近開発されたばかりなのでパッケージはGruntやgulp程出ておりませんが、気になる方は導入して使って見ると良いかもしれません。

Flyとは？

「Fly」はNode.js製のタスク自動化ツールです。Gruntやgulpと同じ立ち位置のタスクランナー&ビルドツールとなり、gulpなどと同様にパッケージをインストールすることで、様々な機能をタスクとして組むことが出来ます。設定ファイル（flyfile.js）はES6で記述していきます。

日本語ドキュメントが用意されているので、比較的わかりやすくなっていると思います。基本的な詳細は省いているので、導入前に一度、Fly Document（日本語）に目を通しておくと良いと思います。

Fly参考文献

• Fly GitHub Repository
• Fly Document
• Fly Document（日本語）

導入手順

下記はMacのターミナルで実行する前提で記載してあります。Windows機で下記の操作を行う場合にはsudoを抜かし、コマンドラインを管理者権限から起動して、実行してください。

基本的な導入手順はGruntやgulpと大きくは変わらないので、どちらかを使ったことある人なら導入は簡単に行えると思います。

• 導入には事前にNode.jsが入っている必要があります。
• Node.jsのv0.11以上が必要となるので導入前に確認してください。

1. Flyをインストール

初めに「Fly」コマンドをターミナル（もしくはコマンドライン）で使用出来るようにするように「Fly」をグローバルインストールします。

$ sudo npm install fly -g

2. ディレクトリを作成してpackage.jsonを作成

次に、環境構築したい箇所にディレクトリを作成し、ディレクトリに移動後、「package.json」を作成します。

$ cd ディレクトリ/
$ sudo npm init

npm initを実行すると幾つか質問されますが全てEnterでスルーしても問題はありません。可能であればname等は設定しておいた方が良いと思いますが、必要な場合のみ記述する形で問題ないと思います。

package.jsonを作成しておくと、その後、開発用パッケージが追加されているpackage.jsonがあるディレクトリでsudo npm installを実行することで必要なパッケージを全てDLすることが出来ます。

3. カレントディレクトリに「Fly」をインストール

$ sudo npm i fly -D

-Dは--save-devの略です。-Dをつけることで、packege.jsonに開発用パッケージとして追加されます。

4. 使用したいパッケージをインストール

$ sudo npm i fly-sass -D

5. カレントディレクトリ内にflyfile.jsを制作してタスクを記述

gulpの様に上でパッケージを読み込む必要はありません。

export default function* () {
  yield this.clear("test/style.css")
  yield this
    .source("sass/*.scss")
    .sass({
      outputStyle: "compressed",
      includePaths: ["sass"]
    })
    .target("dist/css")
}

個別のタスクとして記述する。

export function* タスク名 () {
  yield this.clear("test/style.css")
  yield this
    .source("sass/*.scss")
    .sass({
      outputStyle: "compressed",
      includePaths: ["sass"]
    })
    .target("dist/css")
}

6. 起動する

デフォルトタスク

$ fly

個別タスク

$ fly タスク名

flyfile.jsの記述方法

flyfile.jsの簡単な記述方法の説明です。

Flyで使える機能

Flyには最初から下記の機能が準備されています。

複数実行

複数のタスクをまとめて指定することが出来ます。

export default function* () {
  yield this.start(['task', 'task'])
}

監視

指定したディレクトリもしくはファイルが更新された際にタスクを実行するように指定できます（実行順は記述順ではありません）。

export default function* () {
  yield this.watch('directory', ['task'])
}

タスクは複数をまとめて指定することも出来ます（実行順は記述順ではありません）。

export default function* () {
  yield this.watch('directory', ['task', 'task'])
}

削除

指定したディレクトリもしくはファイルを消すことが出来ます。

export default function* () {
  yield this.clear('directory')
}

サンプルコード

監視と複数実行を組み合わせたサンプルコードです（実際一つのタスクだけを監視して実行するのみの場合にはyield this.startは不要だと思います）。

下記の記述では、SCSSファイルをCSSにコンパイルします。SCSSを更新した場合には「Fly」が起動中は自動でSCSSファイルをCSSにコンパイルします。

const paths = {
  sass: ['sass/*.scss'],

  watch: {
    sass: ['sass/**/*.scss']
  },
  
  dist: {
    sass: 'dist/css'
  }
}

export default function* () {
  yield this.watch('paths.watch.sass', ['build'])
}

export function* build () {
  yield this.start(['sass'])
}

export function* sass () {
  yield this
    .source("paths.sass")
    .sass({
      outputStyle: "compressed",
      includePaths: ["sass"]
    })
    .target("paths.dist.sass")
}