必要なプラグインはpackage.jsonに書く
さて、ここまでで準備はできたので、実際にプロジェクトの中でgulp.jsを動かしてみましょう。ここでは、仮にindex.htmlとcssだけで構成されたシンプルなサイトを考えます。
※ サンプルプロジェクトをこちらからダウンロードできます。
ファイル構成は次のとおりです。CSSで@importを使うとブラウザでの読み込みに時間がかかるので、そこを最適化するというケースです。
ファイル構成
Node.jsの作法として、ローカル用のgulpを含め必要なモジュールは、あらかじめpackage.jsonというファイルに書いておきます。逆に、package.jsonさえあればnpmが必要なモジュールを自動的にインストールしてくれるので、いつでも環境を復元できます。
{
"devDependencies": {
"gulp": "*",
"gulp-autoprefixer": "*",
"gulp-cssimport": "*",
"gulp-minify-css": "*",
"gulp-rename": "*"
},
"engines": {
"node": ">=0.10.0"
},
"private": true
}
gulpはローカル用のgulp.js、それ以外のgulp-で始まる行はプラグインです。"*"の部分には、バージョン番号を指定することも可能です。"*"にしておくと最新版が使われます。
今回使用しているプラグインとその機能は次のとおりです。
| プラグイン名 | 機能 |
|---|---|
| gulp-autoprefixer | CSSベンダープリフィックスの自動調整 |
| gulp-cssimport | CSSの@import部分の埋め込み |
| gulp-minify-css | CSSのミニファイ |
| gulp-rename | ファイルのリネーム |
※ gulpのプラグインは700以上公開されています。プラグインは、公式サイトのプラグインページ内で検索できます。
上記のファイルをpackage.jsonとして保存したら、プロジェクトフォルダのルートで次のようにコマンドを打ちましょう。
$ npm install
すると、node_modulesというフォルダが作成され、必要なモジュールがその中に配置されます。
