【yarnとは？】タスクランナーはyarn（ヤーン）が便利！

今までタスクランナーはgulpを使っていましたが、yarnに手を出してみました。

 

yarnの環境構築の方法をまとめます。

yarnとは？

yarnとはgulpと同じ、jsで動くタスクランナーです。

2016年にFaceBookが公開したもので、npmと同じpackage.jsonがそのまま使用できます。

gulpはパッケージ管理機能を持たないので、パッケージ管理をnpmで行っていますが、yarnはパッケージ管理機能を持っています。

 

	パッケージ管理	タスクランナー
npm	○	×
gulp	×	○
yarn	○	○

yarnをインストールする

yarnはnode.jsで動いています。ですので、yarnを使うにはnode.jsがインストールされている必要があります。

node.jsをインストールしていない方ようにまずは、node.jsのインストール方法から解説します。

node.jsをインストール

node.jsはターミナル/コマンドプロンプトからインストールすることもできますが、こちらからダウンロード版を使ってインストールした方が簡単なのでおすすめです。

自分OSにあったものをダウンロード展開するとインストールされます。

きちんとインストールされたかを確認するためには以下のコマンドをターミナル/コマンドプロンプトへ入力し、バージョンが表示されるか確認します

バージョンが表示されればインストールできています。

node.jsをインストールすると、一緒にnpmもインストールされます。

npmのバージョンも確認しておきましょう。

npmはこのあとyarnをインストールする際に使用します。

yarnをインストール

以下のコマンドを入力してyarnをインストールします

-gとするこでグローバルでインストールすることができます

 

インストールされたか確認しましょう

 

package.jsonを作る

package.jsonとはタスクの処理に必要なパッケージの情報を記載したり、処理自体を記載するファイルになります。

タスク処理させたいソースを置いてるディレクトリへ移り以下のコマンドを実行し、package.jsonを制作します。

プロジェクトの名前など色々聞かれますが、全てエンターでokです。

yarn initをしたディレクトリに自動的にpackage.jsonファイルが生成されます。

必要なパッケージをインストールする

タスク処理に必要なパッケージをインストールしていきましょう。

たとえばpug/scssをコンパイるしたい場合は以下の2つのコマンドを実行します。

これで、pugとsassをコンパイルするために必要なパッケージがインストールされます。

ちなみにこちらは以下のように繋げて書くことができます。

パッケージをインストールすると、package.jsonの中のdevDependenciesの中に、インストールしたパッケージ名が追加されます。

スクリプトを書く

行いたいタスク処理をpackage.jsonのscriptsエリアに記載しましょう。

scssのコンパイルの場合、以下のように書きます。

yarnを実行する

yarnを実行するには以下のコマンドを入力します。

以上！