LoginSignup
2

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-12-12

おさらい

この記事は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のバージョンをプロジェクトによって変えたり、最新のバージョンにアップデートする作業を簡単にしてくれます。



Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2