全て与えられてきた新人が自力でフロントエンド環境構築[2]


おさらい

この記事はmacbook airでフロントエンド環境構築を行った経緯を記しています。
「全て与えられてきた新人が自力でフロントエンド環境構築[1]」から読んでいただけると幸いです。
今回も私なりに噛み砕いて、頑張って書いていこうと思います。

この記事のゴール

EJS,scssを使ってコーディングしたい
→ EJSからhtmlに、scssからcssに変換(コンパイル)しなければならない。
→ コンパイルする方法の一つに、Gulpのプラグインを使う方法がある。
→ まず、Gulpの実行環境を整えよう!

ゴールに向けて必要なこと

[1] OSのアップデート
[2] xcodeのインストール(homebrewのインストールの為)

[3] homebrewのインストール(nodebrewのインストールの為)
[4] nodebrewのインストール(node.jsのインストールの為)
[5] node.jsのインストール(Gulpのインストールの為)
[6] Gulpのインストール
[7] Gulpのプラグインを使うための設定
[8] ゴール!

Gulpの実行環境を作るために、前記事で[2]までの手順を終えています。
今回の記事では、[3]以降の手順について記述します。

[3] homebrewのインストール

homebrewとは

homebrewとは、MacのOS上で働くパッケージ管理ツールです。
パッケージ管理ツールとは、パッケージの導入(インストール)と削除(アンインストール)、ソフトウェアやライブラリとの依存関係を管理するものだそう。

パッケージとは
ソフトウェアに関する複数のファイルををまとめたもの

ライブラリとは
凡庸性の高いプログラムの集まり。
ライブラリのみでは動かず、他のプログラムに呼び出されて使われることが多い。

インストール作業

前記事でXcodeのCommand Line Toolsが入手出来たので、homebrewをインストールする準備が出来ました。
ターミナルで、下記コマンドを入力しましょう。
(2018年12月現在のhomebrewのサイトhttps://brew.sh/index_ja.htmlのスクリプトを使用しています)

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

homebrewインストールのための上記コマンドを入力すると、さらに入力を求められます。

Press RETURN to continue or any other key to abort
==>

→ Enterで進みます。

Password:

→ OSのパスワードを入力、Enterで進みます。

==> Installation successful!

と出たら、インストール完了!

インストールしたhomebrewをチェック

次に、インストールしたhomebrewに問題がないか確認します。

$ brew doctor

と入力し、

Your system is ready to brew.

と出れば問題ありません。
これで、nodebrewをインストールする準備ができました!

[4] nodebrewのインストール

nodebrewとは

nodebrewとは、node.jsのバージョン管理ツールです。
Node.jsのバージョンをプロジェクトによって変えたり、最新のバージョンにアップデートする作業を簡単にしてくれます。