ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

Homebrew(nodebrew)経由でnode.jsインストール、gulp環境を構築する方法

2018年6月20日
logo_homebrew_gulp_node

macにgulp環境を構築する際に、Node.js、gulpとインストールしますが、その手順を毎回忘れてしまうので備忘録として残しておきます。

流れとして、

1、Homebrewをインストール(mac用のパッケージマネージャー)
2、nodebrewをインストール(Node.jsのバージョン管理ツール)
3、環境パスを通す(コマンドを他のディレクトリからでも実行可能にする)
4、Node.jsをインストール
5、gulpをインストール

といった手順になります。

ちなみに、Node.jsはオリジナルのサイト(https://nodejs.org/ja/)からもインストールすることができるが、それはやめておいた方がよいです!!

なぜなら、オリジナルサイトからNode.jsをインストールすると、バージョンの切り替えが簡単にできないから(僕が知らないだけかも?)。

gulpを使用したフロントエンド開発を行う際に、プロジェクトによってNode.jsバージョンが違うことはよくあるので、プロジェクトごとにバージョンを切り替えられるようnodebrewなどのバージョン管理ツール経由でNode.jsをインストールすることをオススメします。

前置きが長くなってしまいましたが、早速Homebrew(nodebrew)を使ってNode.jsのインストール、gulp環境の構築をしていきましょう!

Homebrewをインストールする

homdebrew

https://brew.sh/index_ja.html

上記ページから、以下のコマンドをコピーし、ターミナルで実行します。

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

インストール後、

brew -v

を実行し、Homebrewのバージョンが表示されればOK◎!

スポンサードサーチ

nodebrewをインストールする

次に、nodebrewをインストールします。

nodebrewをインストール

brew install nodebrew

nodebrewのバージョン確認

nodebrew -v

nodebrewのバージョンが確認できればこちらもOK◎!

環境パスを通す

nodebrewのコマンドを他のディレクトリからも実行できるように設定します。
bash(Mac標準シェル)を使用している場合は以下のコマンドを実行します。

echo ‘export PATH=$HOME/.nodebrew/current/bin:$PATH’ >> ~/.bash

すると、/Users/※userName/.bash 内に、記述が追加されているかと思います。
こうすることで、.bash_profileに他のディレクトリからでもアクセスできるようにすることができます。

※.bash
↑隠しファイルが表示されていない場合は、こちらの参考ページから隠しファイルを表示する設定を行います。

https://qiita.com/TsukasaHasegawa/items/fa8e783a556dc1a08f51

スポンサードサーチ

Node.jsをインストール

logo_node

インストールできるバージョン確認

nodebrew ls-remote

最新版をインストール

nodebrew install-binary latest

インストールするバージョンを指定

nodebrew install-binary {version}

インストール済みのバージョン一覧を確認

nodebrew ls

インストールしたバージョンを使用する

nodebrew use v10.0.0

Node.jsのバージョン確認

node -v

上記コマンドでNode.jsをインストールし、node -vでv10.0.0(例)と表示確認できれば完了です!

しかし、-bash: node: command not found と、nodeコマンドが見つからないよ!と言われることがありますが、これはパスの記述はしたが読み込まれていないということらしい。

/Users/※userName/.bash_profile

この、.bash_profileを開き、以下の記述を追加します。

if [ -f ~/.bashrc ] ; then
. ~/.bashrc
fi

.bash_profileが存在しない場合は、以下のコマンドで作成し、上記の記述をコピペします。

>> ~/.bash_profile

ターミナスを再起動し、node -vを実行すると無事Node.jsのバージョンが確認できるはずです!
詳しい説明はページ下部に参考サイトを記載していますので、そちらをご確認ください。

gulpをインストール

logo_gulp2

最後に、gulpをインストールします。
gulpはグローバルとローカル2箇所にインストールが必要となります。

gulpをグローバルにインストール

npm install -g gulp

gulpをローカルにインストール(プロジェクトフォルダ内にて)

npm install gulp –save-dev

gulp -vコマンドを実行し、バージョンが確認できればOK◎!

以上で、Homebrew(nodebrew)経由でnode.jsインストール、gulp環境を構築することができたかと思います。

参考サイト:

■-bash: node: command not foundの対処法
http://kinacom.hatenablog.jp/entry/2015/05/28/180523
■bashの設定について分かりやすいページ
http://www.stdio.jp/entry/mac/terminal-setting#bash%E3%81%AE%E8%A8%AD%E5%AE%9A
■MacにNode.jsをインストール
https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09

関連記事

  • Gulpがインストールできない!!そんな時の原因と対処法 – windows2016年10月4日 Gulpがインストールできない!!そんな時の原因と対処法 – windows
  • 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法2019年6月17日 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法
  • コピペでOK! jQueryで上下連動タブの切り替えをする方法2019年1月27日 コピペでOK! jQueryで上下連動タブの切り替えをする方法
  • javascriptでjQueryの$(this).addClass()と同じ扱いを再現する方法(クリックした要素編)2019年1月27日 javascriptでjQueryの$(this).addClass()と同じ扱いを再現する方法(クリックした要素編)
  • js不要!cssのみで『無限ループスライダー』を作成する方法2019年2月24日 js不要!cssのみで『無限ループスライダー』を作成する方法

スポンサードリンク

  • 最近の投稿

    • 【基礎】Vue.jsの『コンポーネント』とは?【基礎】Vue.jsの『コンポーネント』とは?2019年6月25日
    • 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法2019年6月17日
    • コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法2019年3月8日
    • 【Mac】vscodeの拡張機能を一括インストールする方法【Mac】vscodeの拡張機能を一括インストールする方法2019年3月8日
    • js不要!cssのみで『無限ループスライダー』を作成する方法js不要!cssのみで『無限ループスライダー』を作成する方法2019年2月24日
    • jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法2019年1月30日
    • 【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法2019年1月30日
    • 【css】文字(テキスト)にborderをつけるように縁取りをする方法【css】文字(テキスト)にborderをつけるように縁取りをする方法2019年1月30日
  • カテゴリー

    • AMP (2)
    • android (1)
    • atom (2)
    • css (25)
    • facebook (1)
    • font (1)
    • form (1)
    • FTP (1)
    • git (3)
    • gulp (3)
    • html (2)
    • IE (1)
    • instagram (1)
    • iphone (3)
    • jquery (13)
    • js (5)
    • Mac (10)
    • Photoshop (5)
    • SourceTree (5)
    • Subversion (1)
    • twitter (1)
    • Vue.js (3)
    • Webフォント (1)
    • windows (2)
    • WordPress (7)
    • お知らせ (1)
    • サクラエディタ (1)
    • セキュリティ (1)
    • パララックス (1)
    • 便利ツール (6)
    • 差分チェック (1)
    • 日記 (4)
  • アーカイブ

  • タグ

    android atom background-image before break-all clcl clipmail counter-increment cssハック facebook git github html IE11 instagram iphone ipアドレス linear-gradient Math.random mCustomScrollbar Noto Sans Japanese select snapwidget SourceTree table tool transform transition twitter url改行 windows word-break お問い合わせ コピペ サクラエディタ スクロールバー タスクバー テキストエディタ パッケージ フォーム プラグイン 埋め込み 擬似クラス 改行コード 純正ボタン

    Copyright © 2016 ヤビブロ All Rights Reserved.