Mac
homebrew
nodebrew
gulp
vue-cli

Mac OSX homebrewで導入したもの備忘録


備忘録 Macにインストールしているもの

色々開発用にMacに入れたもので手順が煩雑になりがちなものがあったので備忘録として残します。


  • homebrewでよく使うコマンド

  • 準備編

  • 汎用的にOSXで使うもの

  • 開発用に使うもの


homebrewでよく使うコマンド

# brew

$ brew list
$ brew search
$ brew doctor
$ brew install
$ brew uninstall
$ brew upgrade

#brew cask
$ brew cask list
$ brew cask search
$ brew cask install
$ brew cask uninstall
$ brew cask upgrade
$ brew cask cleanup



準備編


Xcode

Apple製の統合開発環境

# Homebrewをインストールするのに必要

$ xcode-select --install



Homebrew

MacOS用パッケージマネージャ


  • アプリのインストールをターミナルからできるようにする

  • UI系のインストールはbrew-cask

  • フォントのインストールも可

# Homebrewをインストールする

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

# GUI系のアプリをインストールできるようにする
$ brew install caskroom/cask/brew-cask

# フォントのインストールをできるようにする
$ brew tap caskroom/fonts

# java8をインストールするために必要
$ brew tap caskroom/versions



汎用的にOSXで使うもの


karabiner-elements

英字配列を使っているので・・・

$ brew cask install karabiner-elements



qlmarkdown

クイックルックでマークダウンの中身が確認できるやつ

$ brew cask install qlmarkdown



font-source-han-code-jp

$ brew cask install font-source-han-code-jp 



開発用に使うもの


Netbeans

phpの統合開発環境

# Android studioのインストールにも必要

$ brew cask install java8

# とりあえずphp版をインストール
$ brew cask install netbeans-php



VisualStudioCode

テキストエディタ(メイン装備)

# VS Code をインストール

$ brew cask install visual-studio-code



Pycharm CE

PythonのIDE 無料版

$ brew cask install pycharm-ce



Sequel Pro

SQLクライアント: A5:SQLがwindowsのみ対応なので代わりに使用

# Sequel Proをインストール

$ brew cask install sepuel-pro



SourceTree

gitクライアント: GUIでgitが使える

(インストールしてみたがgitコマンドのほうが便利だと気づいたのでほぼ使ってない)

※Mac版はssh鍵の認証がwindows版と異なるので注意

# Sourcetreeをインストール

$ brew cask install sourcetree

#.sshディレクトリをつくる
$ mkdir .ssh

#.sshは隠しフォルダーになるのでfinderで見えるようにする
$ defaults write com.apple.finder AppleShowAllFiles TRUE
$ killall Finder

# ssh鍵のパーミッションを変更
$ chmod 700 .ssh
$ chmod 600 ~/id_rsa



VirtualBox

VMを立てる

Vagrantで使う

$ brew cask install virtualbox



Vagrant

仮想環境を作る

$ brew cask install vagrant



Ansible

環境構成ツール

$ brew install ansible



Docker for Mac (kitematic)

コンテナ

$ brew cask install docker

$ brew cask install kitematic



FlieZilla

ファイル転送

追記: brewでインストール出来なくなった模様

$ brew cask install filezilla



bash-completion

bashのtab補完を効かすやつ

bash_profileに追記が必要

# GUIじゃないのでcaskじゃないよ

$ brew install bash-completion

# 設定ファイル的なものにをvimで開く
$ vim ~/.bash_profile

# .bash_profileに追記

if [ -f $(brew --prefix)/etc/bash_completion ]; then
. $(brew --prefix)/etc/bash_completion
fi

# profile再読み込み

$ . ~/.bash_profile



postman

GUIでAPIにアクセス出来るので・・・

$ brew cask install postman



prepros

タスクランナーの設定が面倒くさいけどscssが使いたい時に入れてしまったやつ

$ brew cask install prepros


Plant UML

# インストール

$ brew cask install java // -> open JDKを入れる
$ brew install graphviz
$ brew install plantuml

# visual studio code のプラグインをインストール


Node.js (global)


Node.js(本体)



  • Node.js : webpackとかgulpなどを使うときに必要なもの


  • npm : パッケージ(追加機能)を管理するためのもの


  • nodebrew : Node.jsの特定のバージョンでしか動作しない場合があるのでバージョンを指定してインストールを出来るようにするためのもの

# Homebrewでnodebrewをインストール

$ brew install nodebrew
$ nodebrew setup

# パスを通す
$ echo "export PATH=\$HOME/.nodebrew/current/bin:\$PATH" >> ~/.bash_profile

# bash_profileを変更したので再読み込み
$ source ~/.bash_profile

# latestをインストール
$ nodebrew install-binary latest

# Warning: such file or directory ←このエラーがでたら
$ mkdir -p ~/.nodebrew/src
$ nodebrew install-binary latest

# バージョン一覧を確認
$ nodebrew list

# 使いたいバージョンを有効化する
$ nodebrew use v9.2.0



Gulp



  • Gulp(タスクランナー) : Sassのコンパイルなどを自動化するツール


  • gulp-sass : node-sassを実行するためのモジュール


  • gulp-autoprefixer : cssにプレフィックスをつけるためのモジュール


  • gulp-sourcemaps : .mapファイルを生成するモジュール


  • gulp-plumber : gulpがエラーで終了するのを防止するモジュール


  • gulp-notify : gulpのエラー内容を通知するモジュール

# プロジェクトのディレクトリを掘る

$ mkdir hoge

# プロジェクトのディレクトリへ移動
$ cd hoge/

# moduleをインストールして、 package.jsonを生成する
$ npm init

# gulpをローカルにインストール
$ npm install --save-dev gulp

# ローカルのgulpをaliasで使えるようにする
$ echo "alias gulp='./node_modules/.bin/gulp'" >> ~/.bash_profile

# エイリアスを使ってインストールされているか確認
# ※プロジェクトにインストールしたのでディレクトリに注意
$ gulp -v

# gulpfile.jsを作る←これにタスクを記述していく
$ touch gulpfile.js

# gulpのプラグインを入れていく
# 引き続きプロジェクトのディレクトリ
$ npm install gulp-sass --save-dev
$ npm install gulp-autoprefixer --save-dev
$ npm install gulp-sourcemaps --save-dev
$ npm install gulp-plumber --save-dev
$ npm install gulp-notify --save-dev

'use strict';

const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const sourcemaps = require('gulp-sourcemaps');
const plumber = require('gulp-plumber');
const notify = require('gulp-notify');
const SCSS_SRC = './src/sass/**/*.scss';
const CSS_DEST = './public/assets/css/';
const scss_options = {
outputStyle: 'compressed',
};
const prefix_options = {
browsers: ['last 6 version', 'ie >= 9'],
cascade: false,
};

var notifyMsg = {
errorHandler: notify.onError("ERROR: <% error.message %>")
};

gulp.task('build:scss', function() {
gulp.src(SCSS_SRC)
.pipe(plumber(notifyMsg))
.pipe(sourcemaps.init())
.pipe(sass(scss_options))
.pipe(autoprefixer(prefix_options))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(CSS_DEST));
});

gulp.task('scss:watch', function() {
gulp.watch(SCSS_SRC, ['build:scss']);
});

gulp.task('default', ['scss:watch']);

# プロジェクトのディレクトリに移動

$ cd hoge/

# Gulp 開始
$ gulp

# Gulp 停止
ctrl + C # コマンドではなくキー入力



yarn

# nodebrewでnode.jsを管理しているので同梱版はNG

$ brew install yarn --ignore-dependencies


firebase

# 入れ方はあとで思い出す


vue-cli

# グローバルインストールする

$ yarn global add @vue/cli

# プロジェクトを作る
$ vue create [project_name]
// -> 色々聞かれるので答えながら決める

# 使い方メモ
$ cd [project_name]
$ yarn run serve


あとがき

Gulpnpm でインストールしてるのに何故 vue-cliyarn なのか?

それはちまちま書き残していて、まとめるタイミングが1年以上ずれているからである。

フロント系のツールは移り変わりが早くて参ってしまう・・・。