gulpを初めてインストールするときの基本的な手順。初心者でも大丈夫。

150624_010

2016/09/26 gulpグローバルインストールのコードを修正しました。

※本記事はWindows環境でのインストール手順ですが、Mac環境でもほぼ変わりません。
コマンド入力が若干異なるだけです。

目次

  1. Node.js をインストール
  2. gulp をグローバルインストール
  3. package.json を生成
  4. gulp をローカルインストール
  5. gulpfile.js を手動で作成

 

1. Node.js をインストール

150624_011

まず最初に、公式サイト から最新バージョンをダウンロードしてインストールする。

次にコマンドプロンプトを立ち上げ、

と入力。
コマンドプロンプトとは、プログラム検索で「cmd」と打てば表示される、通称「黒い画面」のこと。

cmd

バージョンが表示されれば、Node.jsのインストールは完了している。

150624_012

Node.js とは?

サーバーサイドJavaScriptの実行環境です。2009年にRyan Dahl氏によって開発され、Google Chrome用JavaScript実行エンジン(V8)で動作します。
http://www.atmarkit.co.jp/ait/articles/1501/09/news040.html

 

2. gulp をグローバルインストール

150624_013

gulp のグローバルインストールとは?

PC上でgulpを使えるようにするためのインストールを行う、という意味。

コマンドプロンプトで、

と入力。
終了したら続いて、

と入力。
バージョンが表示されれば、gulpのグローバルインストールは完了している。

150624_014

npm とは?

「Node Package Manager」の頭文字をとったもので、Node.js上で動作するパッケージ管理ツールのこと。Node.jsをインストールすると、npmも自動的にインストールされる。
https://www.npmjs.com/

 

3. package.json を生成

package.json とは?

プラグインのバージョンやその他の情報を、自動的に読み書きする制御ファイル。これがないとgulpは動作しない。

まず、htmlファイルを置く任意のディレクトリ(フォルダ)を手動で作成する。デスクトップでも普段コーディング作業をする場所でも、PC上ならどこでもOK。

例として「keitahirai」というフォルダを、デスクトップに作成した。

150624_015

コマンドプロンプトで、

と入力し、続けてフォルダをドラッグアンドドロップする。
※cd の後には半角スペースが1つ必要。

するとコマンドプロンプトがデスクトップにある「keitahirai」を認識した。

150624_016

150624_017

続けて、

と入力し、Enterキーを連打。
最後に、

と聞いてくるので、Enterキーを押して完了。
フォルダ「keitahirai」を確認すると、「package.json」が生成された。

150624_018

 

4. gulp をローカルインストール

ローカルインストール とは?

ディレクトリごとにインストールすること。

ディレクトリ「keitahirai」用のgulpをインストールする。
コマンドプロンプトに戻り、

と入力。
画像のように警告を表示するが、問題ないので無視。

終了すると「node_modules」というフォルダが作られ、中にはプログラムファイル群が生成されている。これでgulpのローカルインストールは完了。

150624_019

150624_020

 

5. gulpfile.js を手動で作成

gulpfile.js とは?

プラグインを動かすコードを記述する、gulp専用のJavaScriptファイル。

エディタで新規ファイルを作成して、

と記述、「gulpfile.js」という名前で新規保存する。
保存場所は「keitahirai」直下。

150624_021

以上により、「keitahirai」でgulpを使用する準備が整いました。
ちなみに3~5は、プロジェクト案件ごとに行う必要があります。

私はgulpの存在を知ったとき、上記のファイル生成を全部自動的にやってくれるものだと思い込んでいた…(;´Д`)

コメントを投稿する

※メールアドレスは私にだけ届き、サイトには表示されません。
※「送信する」ボタンは、一度だけクリックしてお待ちください。