copy_people copy_things copy_matter copy_heart copy_txt ttl_topics ico_blank ico_facebook ico_twitter ico_hatebu ico_index

2017/12/19

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

INDEX

    昨今、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ファイルをダブルクリックで中身が実行されるようになりました。

    参考

    CONTACT

    お仕事のご相談や、弊社についてのご質問や
    ご要望など、お気軽にお問い合わせください。

    View