MacでSassを使うためにyarnを使用してタスクランナーのGulpをインストールしました。
インストールについて調べていたら、以下の見解もあったので、それらを見ると確かにグローバルにインストールせずにプロジェクトローカルにだけインストールするのが良さそうとも思ったんですが、それは実際に使ってみてから今後検討することにしました。
記事によってはnpm install -g gulp-cliとグローバルにGulpを導入する手順を解説しているところもあります。2017年現在、それは少数派です。この記事で説明しているように、グローバルにはGulpをインストールせずローカルだけにインストールするのがフロントエンド界隈では一般的です。
-gを使ってインストールするnpmモジュールは個々のプロジェクトが依存することの無い疎な状態であるべきだと私は考えます。もっと具体的に言うと、ローカルモジュールの実行の為にグローバルモジュールを実行するのは問題であると言えます。これはnpmモジュール全てに言えると思います。
グローバルにモジュールをインストールさせる風潮ってどうなんだよ！
Contents
開発環境
- Mac OS X（El Capitan） 10.11.6
- node.js v9.5.0
-
npm 5.6.0
事前に用意しておく必要があるもの
- node.js
- npm
npmでyarnをグローバルインストール
yarnをグローバルインストールするために、以下のコマンドを実行しま、バージョンを確認します。
|
1 2 3 4 5 6 |
# yarnのグローバルインストール $ npm install -g yarn # yarnのバージョン確認 $ yarn -v 1.3.2 |
yarnとは
YarnはFacebook、Google、Exponent、Tildeによって開発された新しいJavaScriptパッケージマネージャーです。公式発表に記載されているように、Yarn開発者が直面したnpmの問題解決を目的としています。
Gulpとは
タスクランナーの一つ。タスクランナーを使うとこのようなウェブ制作での煩雑な処理が全て自動で行われるため、開発の工数の短縮につながります。また、一度定義したタスクやインストールしたプラグインを開発者間で共有でき、チーム内で一定の品質を保った開発ができるようになります。
yarnでGulpをグローバルインストール
gulpのグローバルインストール
gulpをグローバルインストールするために、以下のコマンドを実行し、グローバルバージョンを確認します。無事、最新版がインストールされました。
|
1 2 3 4 5 6 |
# gulpのグローバルインストール $ yarn global add gulp # gulpのグローバルバージョン確認 $ gulp -v [22:14:21] CLI version 3.9.1 |
yarnでGulpをローカルインストール
プロジェクトディレクトリの作成と移動
gulpを使用したいプロジェクトディレクトリを作成するため、以下のコマンドを実行して作成したディレクトリに移動します。
|
1 2 3 4 5 |
# プロジェクトローカルディレクトリ作成 $ mkdir hello_gulp # プロジェクトローカルディレクトリへ移動 $ cd hello_gulp |
package.jsonの作成
プロジェクトのパッケージ管理ファイル【package.json】を作成するために、プロジェクトディレクトリで以下のコマンドを実行します。特に指定がない場合は【-y】のオプションで一気に作成してしまいます。
|
1 2 |
# package.jsonの作成 $ yarn init -y |
【package.json】の内容を確認するため、以下のコマンドを実行します。
|
1 2 3 4 5 6 7 8 9 |
# package.jsonの内容確認 $ less package.json { "name": "hello_gulp", "version": "1.0.0", "main": "index.js", "license": "MIT" } |
gulpのローカルインストール
gulpをローカルインストールするために、プロジェクトディレクトリで以下のコマンドを実行し、ローカルバージョンを確認します。無事、最新版がインストールされました。
|
1 2 3 4 5 6 7 |
# gulpのローカルインストール $ yarn add gulp # gulpのローカルバージョン確認 $ gulp -v [22:45:17] CLI version 3.9.1 [22:45:17] Local version 3.9.1 |
package.jsonの確認
再度【package.json】の内容を確認するため、以下のコマンドを実行します。
|
1 2 3 4 5 6 7 8 |
# package.jsonの内容確認 $ less package.json { "name": "docker-html_css", "version": "1.0.0", "main": "index.js", "license": "MIT" } |
新しく以下の3行が追加されていました。
|
1 2 3 |
"dependencies": { "gulp": "^3.9.1" } |
Gulpタスクの実行
gulpfile.jsの作成
gulpのビルド設定ファイル【gulpfile.js】を作成するため、以下のコマンドを実行します。
|
1 2 |
# gulpfile.js作成 $ touch gulpfile.js |
【gulpfile.js】に【vi】コマンドで以下の内容を記述します。
|
1 2 3 4 5 6 7 8 9 10 |
# gulpfile.jsの内容変更 $ vi gulpfile.js var gulp = require('gulp'); gulp.task('hello', function() { console.log('Hello gulp'); }); gulp.task('default', ['hello']); |
gulpの実行
gulpを実行する時のコマンドは【gulp タスク名】になります。【Hello gulp】と表示する【hello】タスクを実行するため、以下のコマンドを実行します。
|
1 2 3 4 5 6 7 8 9 |
# gulpタスク実行 $ gulp hello [22:52:50] Using gulpfile ~/Desktop/dev/hello_gulp/gulpfile.js [22:52:50] Starting 'hello'... Hello gulp [22:52:50] Finished 'hello' after 288 μs [22:52:50] Starting 'default'... [22:52:50] Finished 'default' after 46 μs |
タスク名を指定しなかった時は【default】に指定しているタスクが実行されます。
|
1 2 3 4 5 6 7 8 9 |
# gulpタスク実行 $ gulp [22:52:50] Using gulpfile ~/Desktop/dev/hello_gulp/gulpfile.js [22:52:50] Starting 'hello'... Hello gulp [22:52:50] Finished 'hello' after 288 μs [22:52:50] Starting 'default'... [22:52:50] Finished 'default' after 46 μs |