既存の gulp 環境データをローカルで動かすまでのログ

• 参考：Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ
• 参考：【gulp】初めてでもできるgulpの導入ととりあえず使ってみるまで

とりあえず必要な node.js 導入後、ターミナルにて

$ node -v

でバージョン確認できたら完了

gulpをグローバルインストール

node.jsがインストールされていたら npm コマンドが使えるので、
従来は下記のように入力しインストールするが若干変わったらしく・・・

$ npm install -g gulp

以下でインストールする。

$ npm install --global gulp-cli

※ちなみにgulp導入済みだった場合は、衝突を防ぐため下記を実行で一旦gulpを削除してからインストールをした方が良いようです

$ npm rm --global gulp

最後に下記コマンドでバージョンが表示されれば、各プロジェクトにgulpをインストールする準備完了

$ gulp -v

作業ディレクトリごとにgulpをローカルインストール

まず npm で cd コマンドを使い作業環境に移動するのですが、作業ディレクトリをターミナルアイコンにドラッグして起動すると移動済み状態で開始するというのを知ってからは後者の方法で進めています。

下記コマンドで npm セッティング。設定内容はとりあえず全部 Yes ということで -y をつけると自動で進むらしい。

$ npm init -y

package.json が作成されるので、ようやく gulp のローカルインストールへ。
下記コマンドで現在の作業ディレクトリに gulp 関係のファイルがインストールされます。

$ npm install gulp --save-dev

インストール後、gulpfile.js というのを作りいろいろ記述していくようなのですが、今回は既存環境の実行だったのですでに存在していました。

gulpを走らせる

既存の gulpfile.js ということで、下記コマンドを実行すれば良いはずだったんですが

$ gulp

すぐにプラグイン不足ということに気づき、gulpfile.js に記載されているプラグインをインストールしていきます。
プラグインのインストールコマンド

$ npm install プラグイン名 --save-dev

プラグインのアンインストールコマンド

$ npm uninstall プラグイン名 --save-dev

下記記述方法で一括インストール可能

$ npm install --save-dev プラグイン名 プラグイン名 ...

ただ、どうしても imagemin-pngquant というプラグインが下記エラーでインストールできず

npm ERR! pngquant-bin@3.1.0 postinstall: `node lib/install.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the pngquant-bin@3.1.0 postinstall script.
npm ERR! This is most likely a problem with the pngquant-bin package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node lib/install.js
npm ERR! You can get their info via:
npm ERR!     npm owner ls pngquant-bin
npm ERR! There is likely additional logging output above.

npm ERR! System Darwin 15.4.0
npm ERR! command "node" "/usr/local/bin/npm" "install" "imagemin-pngquant" "--save-dev"
npm ERR! cwd /Users/XXXX/XXXX/XXXX/XXXX
npm ERR! node -v v0.11.11
npm ERR! npm -v 1.3.25
npm ERR! code ELIFECYCLE
npm ERR! 
npm ERR! Additional logging details can be found in:
npm ERR!     /Users/XXXX/XXXX/XXXX/XXXX/npm-debug.log
npm ERR! not ok code 0

よくよく読んでいるとnodeとかnpmが古いんじゃないかと思い下記サイト様を参考にアップデートしました。

• 参考：Node.js と npm のアップデート

imagemin-pngquant のインストールが完了し、再び下記コマンドで無事にgulp環境が動いて終了です。

$ gulp

今回の教訓はエラーちゃんと読め！でした。