Gulpにモジュール(プラグイン)をインストール・アンインストールする方法

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

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

著者:bouya Imamura