no-image

MacにyarnでGulpをインストールする

MacでSassを使うためにyarnを使用してタスクランナーのGulpをインストールしました。

インストールについて調べていたら、以下の見解もあったので、それらを見ると確かにグローバルにインストールせずにプロジェクトローカルにだけインストールするのが良さそうとも思ったんですが、それは実際に使ってみてから今後検討することにしました。

記事によってはnpm install -g gulp-cliとグローバルにGulpを導入する手順を解説しているところもあります。2017年現在、それは少数派です。この記事で説明しているように、グローバルにはGulpをインストールせずローカルだけにインストールするのがフロントエンド界隈では一般的です。

引用:絶対つまずかないGulp入門。- ICS MEDIA

-gを使ってインストールするnpmモジュールは個々のプロジェクトが依存することの無い疎な状態であるべきだと私は考えます。もっと具体的に言うと、ローカルモジュールの実行の為にグローバルモジュールを実行するのは問題であると言えます。これはnpmモジュール全てに言えると思います。

引用:gulp-cliはインストールすべきじゃないと、思うよ – Qiita

グローバルにモジュールをインストールさせる風潮ってどうなんだよ!

引用:別に $ npm install -g gulp しなくても大丈夫って話。 – Toro_Unit 

開発環境

  • Mac OS X(El Capitan) 10.11.6
  • node.js v9.5.0
  • npm 5.6.0

事前に用意しておく必要があるもの

  • node.js
  • npm

npmでyarnをグローバルインストール

yarnをグローバルインストールするために、以下のコマンドを実行しま、バージョンを確認します。

yarnとは

YarnはFacebook、Google、Exponent、Tildeによって開発された新しいJavaScriptパッケージマネージャーです。公式発表に記載されているように、Yarn開発者が直面したnpmの問題解決を目的としています。

引用:Yarnとnpmの違い:JavaScriptパッケージマネジャーを比較する – WPJ

Gulpとは

タスクランナーの一つ。タスクランナーを使うとこのようなウェブ制作での煩雑な処理が全て自動で行われるため、開発の工数の短縮につながります。また、一度定義したタスクやインストールしたプラグインを開発者間で共有でき、チーム内で一定の品質を保った開発ができるようになります。

引用:絶対つまずかないGulp入門。- ICS MEDIA

yarnでGulpをグローバルインストール

gulpのグローバルインストール

gulpをグローバルインストールするために、以下のコマンドを実行し、グローバルバージョンを確認します。無事、最新版がインストールされました。

yarnでGulpをローカルインストール

プロジェクトディレクトリの作成と移動

gulpを使用したいプロジェクトディレクトリを作成するため、以下のコマンドを実行して作成したディレクトリに移動します。

package.jsonの作成

プロジェクトのパッケージ管理ファイル【package.json】を作成するために、プロジェクトディレクトリで以下のコマンドを実行します。特に指定がない場合は【-y】のオプションで一気に作成してしまいます。

【package.json】の内容を確認するため、以下のコマンドを実行します。

gulpのローカルインストール

gulpをローカルインストールするために、プロジェクトディレクトリで以下のコマンドを実行し、ローカルバージョンを確認します。無事、最新版がインストールされました。

package.jsonの確認

再度【package.json】の内容を確認するため、以下のコマンドを実行します。

新しく以下の3行が追加されていました。

Gulpタスクの実行

gulpfile.jsの作成

gulpのビルド設定ファイル【gulpfile.js】を作成するため、以下のコマンドを実行します。

【gulpfile.js】に【vi】コマンドで以下の内容を記述します。

gulpの実行

gulpを実行する時のコマンドは【gulp タスク名】になります。【Hello gulp】と表示する【hello】タスクを実行するため、以下のコマンドを実行します。

タスク名を指定しなかった時は【default】に指定しているタスクが実行されます。