Windowsユーザーである私が、MacBookの開発環境構築にチャレンジした記録です。
もし、間違っているところがあれば、ご指摘・ご教示いただけると幸いです。
前提
OS: macOS Sierra 10.12.1
主な用途： Webサイト制作、CMS構築
当人スキル：
WindowsではGUIツールと仲良しだった。
でも昔触ったLinuxコマンドやviコマンドのことが忘れられない。
Macのショートカットが覚えられないけど、ターミナルを使いたいからがんばる。
やったこと
以下をインストールしました。
環境構築系
- Homebrew（パッケージ管理システム）
- nodebrew（Node.jsのバージョン管理システム）
- Node.js(javascript実行環境)
- Git(バージョン管理システム)
- gulp(タスクランナー)
- MySQL(データベース)
GUIなツール
- PhpStorm(IDE)
- CotEditor（テキストエディタ）
- Kobito（マークダウンエディタ）
- FileZilla（FTPクライアント）
- MAMP（ローカル開発環境）
今回は、環境構築のために、ターミナルと対話を重ねたことを書いていきます。
npmを使うためにやったこと
色々とインストールするにはnpmが便利、ということで、Node.jsをインストールする方法を調べていたら、nodebrewを使ってインストールすると、後々良いらしいことがわかりました。Node.jsのバージョンを管理できるそうで、Windowsでいうところのnodist的な位置付けかと。
Homebrewをインストール
そのnodebrewをインストールするために、Homebrewなるものがあると知りました。Macのパッケージ管理システムとのこと。同じ用途では、MacPortsというツールが有名なようですが、後発優位なのかHomebrewを勧める記事をよく見かけました。
homebrewとは何者か。仕組みについて調べてみたという記事で、homebrew＝「自家醸造」という意味だと知りました。
公式ページによると、
Homebrew は、Apple が用意していないあなたの必要なものをインストールします。
とのこと。だから自家醸造なんですね。コンセプトが素敵です。
ロゴをよく見ると、ビールにりんごが浸かっていて、かわいらしいです。
公式サイトトップに書いてあるコマンドでインストールしました。
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
インストール後、不具合がないかを調べるコマンドが、
$ brew doctor
というのも、遊び心があってよいです。
「問題ないよ」と言われたので、次。
nodebrewをインストール
Homebrewから、nodebrewをインストールします。
$ brew install nodebrew
で、できました。
Githubのnodebrewのページを見たら、Homebrewがなくてもインストールはできるようですが、Homebrewだと、上記コマンド一発なので楽でした。
パスを通す
で、このままNode.jsをインストール！ と思ったら、先にパスを通す必要がありそうです。
私の場合、パスを記述する.bash_profileというファイル自体がなかったため、
$ vi ~/.bash_profile
で、編集モードに入り、
export PATH=$HOME/.nodebrew/current/bin:$PATH
と記述して保存。
その後、ターミナルから
$ source ~/.bash_profile
と打つことで、パスが追加された.bash_profileが作成されました。
パスの設定についてはこちらのページの説明で理解が深まりました。
Node.jsをインストール
そして、ようやくNode.jsをインストール。
$ nodebrew install-binary stable
そして、
$ nodebrew use stable
と指定することで、Node.jsを使用できるようになりました。
今回は、stable（安定版）をインストールしましたが、latest（最新版）やバージョンを指定することも可能なようです。インストールされているNode.jsのバージョンと、使用されているバージョンは、
$ nodebrew list
で確認できました。
(参考記事)
Node.jsをMacにインストールしてnpmを使えるようにする
Gitをインストール
Node.jsをインストールした理由は、npmでGitをインストールするためでした。
しかし、手順を調べていくうちに、
「Macには標準でGitが入っていますが」
という言葉に遭遇。
恐る恐る、git --versionと打ってみると・・・ちゃんとバージョンが表示されました。
ま、まぁ、gulpとか入れるし、npmだけの用途でNode.jsを入れたわけじゃないから・・・と思い直し、いっそのことHomebrewでGitを管理することにしました。
$ brew install git
で、インストールできました。
参考にさせていただいた記事には、パスの優先順位を変更する必要があるという記載がありましたが、私の環境ではGitが存在する/user/local/bin/がパスの前方に記述されていたため、ターミナルを再起動しただけで、今回インストールしたGitを見にいくようになりました。
PhpStorm内で利用するGitのパスは、Preference->VersionControl->Gitから変更しました。
(参考記事)
HomebrewでGitをインストールする
なんかやばいらしいのでgitのバージョン上げる
gulpをインストール
色々と自動化したいので、gulpをインストールします。
グローバルにインストール
$ npm i -g gulp
ローカルにインストール
プロジェクトのディレクトリに移動し、
$ npm init
で、package.jsonを作ります。
そして、以下のコマンドで、ローカルにインストール。
$ npm i -D gulp -s
node_modules/ディレクトリができました。
オプションに-sを指定しているのは、package.jsonに依存ファイルとして追記するためです。
パッケージのインストール
$ npm i -D [パッケージ名] -s
で、使用したいパッケージをインストール。
グローバルでインストールするか悩ましくもありましたが、
今後、プロジェクトを作るときは、package.jsonからインストールする予定なので、
-Dをつけてローカルにインストールすることにしました。
今回インストールしたのは以下の通り。
- gulp-sass
- gulp-sourcemaps
- gulp-postcss
- autoprefixer
- gulp-plumber
- imagemin-pngquant
- gulp-imagemin
- browser-sync
gulpにやってもらいたいことを指定
gulp.jsファイルを作り、やってもらいたいことを指定します。
$ vi gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var plumber = require('gulp-plumber');
//sass
gulp.task('sass',function(){
return gulp.src('scss/*.scss')
.pipe(sourcemaps.init())
.pipe(plumber({
errorHandler: function(err) {
console.log(err.messageFormatted);
this.emit('end');
}
}))
.pipe(sass({style : 'expanded'}))
.pipe(
postcss([
autoprefixer({
browsers: ['last 2 version','ie 9'],
cascade: false
})
])
)
.pipe(sourcemaps.write())
.pipe(gulp.dest('css'));
});
//watch
gulp.task('watch', function () {
gulp.watch('scss/*.scss', ['sass']);
});
gulp.task('default', ['sass', 'watch']);
試行錯誤しながら、sassのコンパイル、ソースマップの出力、ベンダープレフィックスの付与を自動でやってくれるタスクを作りました。
画像の圧縮と、ブラウザのauto reloadも予定してましたが、力尽きたのでいつの日か。
(参考記事)
フロントエンド開発の３ステップ（npmことはじめ）
MySQLをインストール
Homebrewで、MySQLもインストールします。
$ brew install mysql
インストールが完了したら、
$ server.mysql start
で起動。
$ mysql_secure_installation
で、表示される質問に対して答え、セキュリティの設定をします。
ローカルの開発環境ですが、念のため全て「y」（Yes)にしました。
$ mysql -uroot -p
パスワードを訊かれるので、mysql_secure_installationで設定したパスワードを入力し、接続確認ができました。
(参考記事)
MacでHomebrewを使ってMySQLをインストールする
MacにMySQLをインストールして触ってみる
後からMAMPをインストールしたので、被っちゃったけど、まぁいいか。