はじめに
こんにちは！
テンダ仙台支店webデザイナーのYHです。
今回はGulpのインストールと自動化させるための設定ファイルの作成を見ていきましょう。
実際に使用するまでのお話です。
なお、本記事ではWindows環境での利用を想定しています。
Node.jsのインストール
GulpはNode.jsというプラットフォーム上で動作するため、まずはNode.jsをインストールします。
https://nodejs.org/en/
インストーラーをダウンロードして実行、インストールが終わったらコマンドプロンプトを起動します。その後、以下を入力して、バージョンが表示されれば完了です。
|
1 |
node -v |
npmの確認
Gulpはプラグインによって機能が追加されます。
プラグインのインストールはnpmを使用します。
npmとは「node package manager」の略称で、プラグインの管理を行うものです。
npmはNode.jsに含まれているので、すぐにインストールを確認できます。
コマンドプロンプトでバージョンを表示させてみましょう。
|
1 |
npm -v |
package.jsonの設定
npmで管理を行っていくためはpackage.jsonというファイルの作成が必要です。
今回はappというディレクトリを作って、その中に作成します。
コマンドプロンプト上でもディレクトリを移動しておきます。
|
1 |
cd hoge/app |
移動後、npm initと入力します。
|
1 |
npm init |
一問一答形式で質問が表示されますが、必要な箇所のみの回答でOKです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
Press ^C at any time to quit. package name: (hoge) hoge version: (1.0.0) description: hoge entry point: (index.js) test command: git repository: keywords: author: license: (ISC) About to write to hoge/app/package.json: { "name": "hoge", "version": "1.0.0", "description": "hoge", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } Is this ok? (yes) |
Gulpインストール
いよいよGulpをインストールします。プラグインだけでなくGulp本体もnpmを使用して管理します。
ローカルとグローバル、両方にインストールが必要ですので、以下を入力します。
グローバル
|
1 |
npm install gulp -g |
ローカル
|
1 |
npm install gulp --save-dev |
完了するとpackege.jsonには以下が追記されています。
|
1 2 3 |
"devDependencies": { "gulp": "^3.9.1" } |
※WARNINGが出る場合もありますが、Gulpのパッケージ内の問題によるもので、
今後のバージョンアップで修正される可能性があります。
インストールには影響がないので気にしなくてもよさそうです。
Gulpのインストールはこれで完了です。
次回はプラグインのインストールと自動化の設定を行いましょう。
他の記事
第1回「web制作が便利に！Gulpを知った気になれる記事」
第3回「Gulpを導入してみよう！その1」