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のモジュールについての概要とインストール・アンインストール、インストール済みのモジュール確認用のコマンドなどについて書きました。
次回以降は具体的にモジュールの使い方について少しずつまとめていきますので、興味がありましたらまた読みに来てください。
このページを共有する