フロントエンド開発環境の導入
今さらながらフロントエンド用の環境をいろいろ導入してみました。
具体的には以下のようなもの。
- Nodist
- (Windows用)Node.jsのバージョン管理
- Node.js
- サーバサイドJavaScript環境
- npm
- バックエンドパッケージ管理
- bower
- フロントエンドパッケージ管理
- gulp
- タスクランナー
各種導入方法
Nodist導入
NodistのGithubからインストーラを落として、実行。
Node.js、npm導入
Nodistをインストールすると、Node.jsの最新版がインストールされた状態になっている。
特定のバージョンを入れたい場合は、nodist + バージョン番号でインストールし、nodist バージョン番号で使用するバージョンを切り替える。
npmについてはNode.jsと一緒にインストールされる。
bower、gulp導入
npmでグローバルにそれぞれをインストール。
npm install -g bower
npm install -g gulp
gulpのプロジェクトへの導入
gulpは使うプロジェクトのローカルに導入する必要があるみたいなので、プロジェクトのルートディレクトリに移動し、npm install gulpでインストール。
詰まったところ
公式インストーラは罠
公式が悪い、ということではないです。
むしろ、ちゃんと動くんですが、Nodistでバージョン管理をしたい場合は既にインストールしているものをアンインストールする必要があります。
アンインストールする場合、Windowsの[コントロールパネル]-[プログラム]-[プログラムと機能]からのアンインストールが必要です(インストールディレクトリにアンインストーラはないです)。
アンインストールするだけだと消えないファイルもあるので、インストールディレクトリやユーザーディレクトリ以下のAppData\Roamingの下のnode_modules等のフォルダも削除したほうがいいです。
環境変数の設定
Nodistのインストーラで環境変数をある程度は設定してくれます。
しかし、npmでグローバル環境にインストールしたパッケージはNode.jsの各バージョンフォルダ以下にインストールされるので、そちらへのパスも通す必要があります。
環境変数のPathに%NODIST_PREFIX%\v-x64\バージョン番号を追加します。
ローカルにいっぱいパッケージが入る
これは解決できてないですが、gulpをローカルにインストールしようとしたときに、gulp以外のパッケージも自動的に入ってしまい、ファイルが大量に増えます。
入ってるパッケージ情報を見る限り、Nodistでデフォルトで入っているパッケージが入ってるっぽいです。
(恐らく)不要なパッケージはできればローカルに入れたくないんですが、なんか方法はないものか…。
なんか調べてたら、npm3以降では依存関係のパッケージがnode_moddules以下に配置されるようになり、そのせいでいっぱいパッケージが入っているように見えるらしいです。
依存関係があるということはどれも必須なパッケージなので、そのままにしておきましょう。