タイトル長いですが。

これまでGUIアプリで操作してきたことをコマンドラインで操作出来るようにするMacでのセットアップメモ。
いつも忘れるので、現時点での覚え書きです。
自分の手順だけをざっくり書くので、わからなかったりエラーが出たらその内容で検索して調べてください。

2018.11.7 update

やることリスト

  1. Xcode(iPhoneやiPadのエミュレーターなど)
  2. Homebrew(パッケージ管理ツール)
  3. Node.js、Grunt、gulp.js
  4. Sass + Compass(cssプリプロセッサ)
  5. Jekyll + bundler(スタティックウェブサイト)
  6. Git(バージョン管理)
  7. wp-cli (WordPressをコマンドラインから操作)
  8. Virtualbox、Vagrant(仮想マシン・サーバー)
  9. bash-completion(ssh実行時のホスト名の補完など)

スポンサーサイト

1. Xcode(iPhoneやiPadのエミュレーターなど)

Xcodeは App Store から検索してインストールしておく。
続いてコマンドラインツールを入れる。

でダイアログが出る。

xcode-select--install

「インストール」をクリック後は規約などのダイアログが出るのでよく読んで進めること。

2. Homebrew(パッケージ管理ツール)

http://brew.sh/index_ja.html

※3. 以降の操作をアプリなどで行う場合は不要。

Homebrew のインストール

(2015.10.6追記:インストール時のパスが変わったようです)

バージョンチェック

Homebrew の状態チェック

ここで Warning などのエラーメッセージがある場合はつぶす。
なお、Xcodeを起動したことがない場合やCommand Line Tools がインストールされていない場合もここで警告が出る。

さらに Homebrew でインストールしたパッケージがある場合、それを優先するようにパスを通しておく。
(Facebookで教えてもらいました。thx. 宮 @miya0001 さん)
~/.bash_profile に追記、なければ新規作成。

保存したら

や、ターミナルの終了・再起動後にもう一度 $ brew doctor

3. Node.js、Grunt、gulp.js

Node.js
http://nodejs.org/

nodebrew
https://github.com/hokaccha/nodebrew

Grunt
http://gruntjs.com/

gulp.js
http://gulpjs.com/

※ CodeKit などのアプリを使う場合はいらない。

node.js のインストール
ここで、node.js のバージョン管理ができる nodebrew を使うと後々楽。
既に Homebrew で node.js を入れていた場合は先にアンイントール brew uninstall node しておくこと。

~/.bash_profile に追記、なければ新規作成。

保存したら

バージョンチェック

nodebrew 経由で Node.js をインストール。(例は最新安定版)

ここでディレクトリが見つからないと言われたら作っておくこと

使うバージョンを指定

Node Packaged Modules(grunt, grunt-cli, grunt-init, gulp)のインストール

バージョンチェック

sudo しないと npm コマンドが使えないのはたいていパーミッションが原因なので、そこを見直すこと。

4. Sass + Compass(cssプリプロセッサ)

Sass
http://sass-lang.com/install

Compass
http://compass-style.org/

※ CodeKit などのアプリを使う場合はいらない。

Sass(Compass)には Ruby が必要だが、公式にMacはOS付属(プリインストール)のRubyでOKと書いてある。

Mac
If you prefer the command line over an application then getting Sass set up is a fairly quick process. Sass has a Ruby dependency but if you’re using a Mac, congratulations, Ruby comes pre-installed.

Ruby のバージョンチェック

※2015.10.20追記:Mac OS X El Capitan の場合、SIP/rootlessの影響があるのインストールディレクトリを変更したほうが良い。

アップデートは

Sass のインストール

バージョンチェック

Compass のインストール(RubyGemのアップデートはSassで行ったので割愛)

バージョンチェック

5. Jekyll + bundler(スタティックウェブサイト)

Jekyll
https://jekyllrb.com/

6. Git(バージョン管理)

Mac OS X やアプリケーションに内蔵されているが、最新版を使いたい時は HomeBrew でインストール・管理するように。

※ SourceTree などのクライアントソフトを使っても良い。
なお、SourceTree は環境設定でアプリ内蔵の Git かシステムの Git かを選択できる。

SourceTree
http://www.sourcetreeapp.com/

Git のインストール

バージョンチェック

7. wp-cli (WordPressをコマンドラインから操作)

wp-cli
http://wp-cli.org/

※ WordPressをやらない、あるいはコマンドラインで操作を行わないなら必要ない。

wp-cli のインストール

この節の参照

8. Virtualbox、Vagrant(仮想マシン・サーバー、検証用)

Virtualbox
https://www.virtualbox.org/

Vagrant
http://www.vagrantup.com/

Vagrant を使うにはあらかじめ Virtualbox が必要なので上記のサイトからダウンロードしてディスクイメージを展開してインストール。

Vagrant のインストール
http://downloads.vagrantup.com/

※使いたいVagrantファイルによってVirtualbox、Vagrantのバージョンが決まっている場合があるので、先にそれらの説明を読むこと。

ダウンロードしたディスクイメージを展開してインストール。
バージョンチェック

vagrant-hostsupdater をインストール(VCCW利用時は必須)

なお、Vagrant のプラグインは

でアップデート可能。

次にVagrantファイルをclone
使いたいVagrantファイルによってclone元が異なる。
今回はWordPressに特化したもののみ。LAMP環境とかも探せばあるんじゃないかな。

VCCW(vagrant-chef-centos-wordpress)の場合
http://vccw.cc/

この後サイトから.zipをダウンロードして解凍する。

clone が終わったら vccw-x.x.x に移動して

で仮想環境が立ち上がる。

複数のWordPress開発環境を作りたいときは、 WP-CLIでVCCW環境をほいほい作る を参考に。

9. bash-completion(ssh実行時のホスト名の補完など)

Bashの補完機能($ cd <TAB>などで候補が出てくる機能)を拡張するシェルスクリプト集。
具体的には ssh コマンド実行時のホスト名の補完など。

インストール

インストール途中に出てくる説明通りに、完了したら ~/.bash_profile に以下を追記

おまけ

Homebrewでインストールしたものをまとめてアップデート管理するようにユーザーホームに brew.sh というファイルを作っておく。

実行は

で上記コマンドが走るのでたまにやること(sudo しているので途中でパスワード聞かれる)。

追記:gettext はアップデートするとシンボリックリンクが外れてしまいます。
(This formula is keg-only, so it was not symlinked into /usr/local.(以下略))
gettext に限りませんが、OS Xに含まれているライブラリによってはこのような表記が出ますので、再度 $ brew link が必要です。

追記2:定期的にアップデートしてるなら cleanup した方がいいよ、と教えてもらったので上記のgistにはそれを追記してあります

MacでWebサイトデザイン・コーディングするための、黒い画面と仲良くなりながらの環境構築手順メモ」への1件のフィードバック

Comments are closed.