2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Node 12 以降の環境で Gulp 3系を動かす

Posted at

Gulp 3系がサポートされなくなってから結構たちましたが、3系環境の案件を保守する事例はまだ少なくないです。ただ、 Node 12 以降では正常に動作しないので、ほとんどの場合エラーになるかと思います。
なので単純にマシンに Node 11 を入れ直せば一応は動くんですが、代わりに最近の NPM が動かなくなってしまいます。(案件ごとに Node を都度入れ直さないといけない感じになってしまいます。)

バージョンを切り替えられるようにする

Node を都度入れ直すのはかなり手間だし複数案件やってるとき作業止まってしまうので、自分は Node バージョンを切り替える様にしています。ちなみに以前は n を使用していたんですが、Catarina から $PATH env がおかしくなって Node 自体が使い物にならなくなりました。
/usr/local/bin/n のシンボリックリンクと、 /usr/local/lib/node_modules/n/bin/n を削除して対処するはめになりました。

これはイシューにも上がってて、まだ解消されてないので、いったん n はもうやめて別のにしました。
切り替えツール系に、 nodebrew と nodenv があって(他にもあるかもですが)、nodenv を入れます。前にも使ったことはあるんですがちょっと面倒だったので、今回手順をのこしています。
※ちなみに違いとしては、どちらもプロジェクトごとに切り替えられるには切り替えられるんですが、nodebrew は nodebrew use v11.0.0 みたいな感じで都度都度コマンド叩く必要があるのに対して、nodenv は .node-version ファイルをプロジェクトフォルダに生成でき、切り替えコマンド不要で Node バージョン切り替えできるという感じです。(グローバルも変えられます)

手順

nodenv を ~(ホームディレクトリ) にクローン

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

※ nodenv 自体は本来、マシンの Node 環境構築に利用するものらしいです。

nodenv にパスを通す

% echo 'export PATH="$HOME/.nodenv/bin:$PATH"' >> ~/.zshrc
% echo 'eval "$(nodenv init -)"' >> ~/.zshrc

※ bash の場合(Catarina未満)は下記

$ echo 'export PATH="$HOME/.nodenv/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(nodenv init -)"' >> ~/.bash_profile

node-build をクローン

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

※ node-build は Node の各バージョンのビルダーらしいです。

ちなみに自分はここでパーミッションで弾かれてしまいました。
なので sudo つけて再度。

% sudo git clone https://github.com/nodenv/node-build.git ~/.nodenv/plugins/node-build

※ 記事によっては /usr/local/src にクローンしてるケースも有りました。OS古い場合は下記コマンドが良いかもしれません(未検証)。

% git clone https://github.com/nodenv/node-build.git /usr/local/src
% nodenv init
% PREFIX=/usr/local /usr/local/src/node-build/install.sh

※ nodenv init はシェルの再起動→nodenv再ロード

使用する Nodeバージョンを選んで利用可能にしておく

11.15.0(Node 11系の最新)と、12.14.0(執筆時点の LTS)をインストールしておく。
~/.node-gyp にインストールされる)

% nodenv install 11.15.0
% nodenv install 12.14.0

ちなみにインストール可能なバージョンのリストを下記コマンドで表示できる

% nodenv install -l

実際に切り替える

グローバルのバージョン指定をする場合は下記コマンド。
ただ、すでにLTSを入れているので自分は特にしなかった。

% nodenv global 12.14.0

ローカルのバージョン指定は下記コマンド。

% nodenv local 11.15.0

-> .node-version ファイルがプロジェクトに作成される

Gulp 3系を走らせてみる

そのまえに、一回 npm i してしまってるプロジェクトの場合は、(cd でプロジェクトに移動した上で)node_modules と NPM キャッシュの削除をしておく。

% rm -rf node_modules
% npm cache clean --force

ローカルの Node バージョンを nodenv local 11.15.0 などで Node 12 以前にしている状態でモジュールのインストールを実施。

% npm i

package.json の start スクリプトを追記。(すでにあったら何もしない)

"scripts": {
  "start": "gulp"
}

npm start で、正常にGulpが走れば、一通り成功。

% npm start

参考

nodenv を使って Mac に Node.js の環境を構築する

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?