Blog

2017/12/19

開発環境構築を楽にしたい

Tags

Written by

BACK

昨今、nodeやらgrunt/gulpと開発環境を作るにもひと手間かかります。
ちょっと更新だけ引き継ぎたい、なんて時に、この「ひと手間」がハードルに。

そこで、開発環境の引き継ぎを楽にする環境をつくりました。

概要

今回使用するのは、こちらの3点。

「nodenv」を使用して、作業者間によるNode.jsのバージョンの違いを防ぎ、
「npx」を使用して、各環境に依存せず、
「.command」を使用して、ダブルクリックで開発環境を整える
ことが、今回の目標です。

「nodenv」

「nodenv」はNode.jsのバージョン管理マネージャーのひとつです。

nodenvは各開発環境毎にNode.jsを適用します。
また、「.node-version」というファイルをつくり、これに指定されたバージョンにNode.jsを自動的に切り替えます。
これによって、作業者によるNode.jsのバージョンの違いを防ぐことができます。

「npx」

「npx」について、詳しくはこちら。

npxを使用することで、グローバルにgulp(gulp-cli)がインストールされていない環境でも、gulpを使用できます。

「.command」

「.command」は、いわゆる「バッチファイル」と言われているもの、Windowsでいうと「.bat」ファイルです。
ダブルクリックで中の記述が実行されます。

.command を使用して、ダブルクリックで開発環境が整うようにすることが、今回の目標です。

1.nodenv、Node.jsのインストール

(1)nodenvインストール

$ git clone git://github.com/nodenv/nodenv.git ~/.nodenv

nodenvをホームディレクトリにクローンします。

$ vi ~/.bash_profile
$ source ~/.bash_profile

nodenvをクローンした後、nodenvにパスを通します。
内容はこちら。

export PATH=”$HOME/.nodenv/bin:$PATH”
eval “$(nodenv init -)”

次に、node-buildというnodenvのプラグインをインストールします。

$ git clone https://github.com/nodenv/node-build.git ~/.nodenv/plugins/node-build
$ nodenv init

インストール後、nodenvを再ロードして反映します。

(2)Node.jsインストール

$ nodenv install --list

インストールできるバージョンを確認します。

$ nodenv install 9.2.0
$ nodenv rehash

指定のバージョンをインストール、反映します。

ここまでではインストールされたのみで、有効になってはいません。

(3)各プロジェクト毎にNode.jsを有効にする

プロジェクトのワークスペースに移動します。

$ node -v
v8.9.1

私のグローバルのnodeのバージョンはv8.9.1です。

$ nodenv local 9.2.0

ここに、nodenvで先ほどインストールした v9.2.0 を適用します。

$ ls -la
total 8
drwxr-xr-x   3 username  group  102 12 19 12:30 .
drwxr-xr-x  19 username  group  646 12 19 12:27 ..
-rw-r--r--   1 username  group    6 12 19 12:30 .node-version
$ cat .node-version
9.2.0
$ node -v
v9.2.0

.node-version が作成されます。
.node-version にはバージョンが書かれているだけですが、nodenvは .node-version がある場合そのバージョンのNode.jsを使用するように切り替えます。

2.「.command」の作成

作成した「.command」は3種。
(1) nodenv install
(2) npm install
(3) gulp watch

.commandファイルのベースはこちら。

#!/bin/sh
cd `dirname $0`
(ここに実行したいコマンドを書く)
killall Terminal

こちらの記事(これは便利!Macで複数のファイルやアプリを1クリックで起動するバッチ(command)ファイルを作る方法)を参考にさせていただきました。

(1) nodenv install

01-nodenv.command

#!/bin/sh
cd `dirname $0`
nodenv install 9.2.0
nodenv rehash
killall Terminal
$ node -v
nodenv: version `9.2.0' is not installed (set by /Users/username/workspace/sample/.node-version)

.node-versionに指定されているNode.jsがインストールされていない場合は、エラーになります。
この場合に、01-nodenv.commandでインストールします。

(2) npm install

02-install.command

#!/bin/sh
cd `dirname $0`
npm install
killall Terminal

(3) gulp watch

03-gulp.command

#!/bin/sh
cd `dirname $0`
npx gulp watch

ここで「npx」を使用します。
gulp watch の代わりに npx gulp watch を使用することで、
作業者の環境にgulp-cliがインストールされているいないに関わらず、gulpを使用できます。

watchを止めるときは、いつも通り[control]+[c]で停止します。

実行権限の付与

.commandファイルの権限を「rwxr–r–」にします。

$ chmod 744 *.command

以上で、.commandファイルをダブルクリックで中身が実行されるようになりました。

参考

Recommend