今までタスクランナーは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にあったものをダウンロード展開するとインストールされます。
きちんとインストールされたかを確認するためには以下のコマンドをターミナル/コマンドプロンプトへ入力し、バージョンが表示されるか確認します
1 |
$node -v |
バージョンが表示されればインストールできています。
node.jsをインストールすると、一緒にnpmもインストールされます。
npmのバージョンも確認しておきましょう。
1 |
$npm -v |
npmはこのあとyarnをインストールする際に使用します。
yarnをインストール
以下のコマンドを入力してyarnをインストールします
1 |
$npm install -g yarn |
-gとするこでグローバルでインストールすることができます
インストールされたか確認しましょう
1 |
$yarn -v |
package.jsonを作る
package.jsonとはタスクの処理に必要なパッケージの情報を記載したり、処理自体を記載するファイルになります。
タスク処理させたいソースを置いてるディレクトリへ移り以下のコマンドを実行し、package.jsonを制作します。
1 |
$yarn init |
プロジェクトの名前など色々聞かれますが、全てエンターでokです。
yarn initをしたディレクトリに自動的にpackage.jsonファイルが生成されます。
必要なパッケージをインストールする
タスク処理に必要なパッケージをインストールしていきましょう。
たとえばpug/scssをコンパイるしたい場合は以下の2つのコマンドを実行します。
1 |
$yarn install --save-dev node-sass |
1 |
$yarn install --save -dev pug |
これで、pugとsassをコンパイルするために必要なパッケージがインストールされます。
ちなみにこちらは以下のように繋げて書くことができます。
1 |
$yarn install --save -dev node-sass pug |
パッケージをインストールすると、package.jsonの中のdevDependenciesの中に、インストールしたパッケージ名が追加されます。
スクリプトを書く
行いたいタスク処理をpackage.jsonのscriptsエリアに記載しましょう。
scssのコンパイルの場合、以下のように書きます。
1 |
タスク名:"node-sass コンパイルしたいscssファイルのパス -o アウトプット先のパス" |
yarnを実行する
yarnを実行するには以下のコマンドを入力します。
1 |
yarn タスク名 |
以上!
コメント