Web制作の効率を上げることができる「Gulp」について書いています。インストール方法やシンプルなタスクの実行方法については、以下のページに書きました。機会がありましたらご参考ください。

今回はGulpのモジュール(プラグイン)をインストールする方法を書きました。

Gulpのモジュールについて

Gulpのモジュールをインストールすることで、様々なタスクを実行できるようになります。例えば以下のようなこと（一部）です。

• CSSをインラインに書き出してくれる
• 画像ファイルの容量を削減してくれる
• SVGスプライトを作成してくれる
• gzip圧縮してくれる

こんなことができるなんて、便利ですよねぇ。

モジュールのインストール

それでは、さっそくモジュールをインストールします。コマンドプロンプト（ターミナル）を起動して、gulpをインストールしたフォルダまでcdコマンドで移動し、以下のコマンドを実行します。

npm install モジュール名 --save-dev

「モジュール名」はインストールしたいモジュール名を指定しましょう。そのまんまの意味ですね。モジュールは開発する時だけに使うもので、依存関係のあるものをインストールするため「‐‐save‐dev」のオプションをつけておきます。

モジュール名ってどうやって調べるの？

どんなモジュールがあるのか調べたい時は「gulp.js plugin registry」で確認しましょう。（2016/02/16確認時点では2166個あります。とてもたくさんありますね）

というわけで、例えば「gulp-gzip」というモジュールをインストールしたい場合は以下のコマンドを実行します。

npm install gulp-gzip --save-dev

インストールが完了したら、モジュールの保存先を確認しましょう。

インストールしたモジュールはどこに保存されているの？

インストールしたモジュールは「node_modules」フォルダ内に保存されています。例えばWindows環境でデスクトップにある「htdocs」内にモジュールをインストールした場合は、「htdocs」内に「node_modules」フォルダが見つかります。

「node_modules」フォルダ内にインストールしたモジュールが見つかる

インストールしたモジュールを確認するコマンドがあるよ

コマンドプロンプト（ターミナル）でインストールしたモジュールを確認する方法もいくつかあります。以下のコマンドを実行すると、インストールしたモジュールが一覧で表示されます。

npm list --depth=0

コマンドでどんなモジュールがインストールされているのか確認するのもいいかもですね。

コマンドでインストールしたモジュールを確認する

モジュールのバージョンもわかりますしね。

モジュールのアンインストール

必要ないモジュールをアンインストールする場合は、インストールした時と同様にコマンドプロンプト（ターミナル）を起動して、gulpをインストールしたフォルダまでcdコマンドで移動し、以下のコマンドを実行します。

npm uninstall モジュール名 --save-dev

モジュール名にはアンインストールしたいモジュール名を指定します。インストール時に付けた「‐‐save‐dev」オプションも付けます。

まとめ

Gulpのモジュールについての概要とインストール・アンインストール、インストール済みのモジュール確認用のコマンドなどについて書きました。

次回以降は具体的にモジュールの使い方について少しずつまとめていきますので、興味がありましたらまた読みに来てください。