Skip to content

Windows10にgulpをインストール

今回は、Node.js 4.4.7 と npm 2.15.8 を使い、gulpのインストールと動作確認を目標に進めます。

(前回:nodist v0.8.0をアンインストールし、Node.jsをインストール

前回までの状況は以下のようになっています。

ちなみにターミナルはGit Bashを使っていますが、コマンドプロンプトでも問題ないと思います。

ここからgulpをインストールしていきます。

公式のドキュメントは以下です。

https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md

グローバルにgulpをインストール

「グローバルに」というのは、「Windowsに」というような意味です。

それに対して、後ほど出てくる「ローカルに」というのは、「プロジェクトに」というような意味になります。

まずは、gulpを実行するための gulp CLI をグローバルにインストールします。

gulp CLIが入ったようです。

プロジェクトフォルダで初期設定

次に、プロジェクト内のgulpをインストールするフォルダに移動し、インストールの準備をします。

自分は、下記のようなディレクトリ構造でプロジェクトを作ろうと思っているので、「gulp」フォルダまで移動し、initコマンドを打ちます。

このとき、エクスプローラでgulpディレクトリを開いておくと、package.jsonというファイルが作成されるのを確認することができます。

このとき、ディレクトリ名(この場合、”gulp”)とパッケージ名が同じだとエラーが起こるので、”flocss”としてます。

そのほかは、何も入力せずEnterを押していけば大丈夫です(後ほどwarningが出ますが、あまり気にしなくてよさそうです)。

最後は、ctrl-c を押さないといつまでたってもコマンドが解放されませんでした。なぜだろう。

ともあれ、gulpディレクトリにpackage.jsonが作成されていればOKです。

このpackage.jsonは、プロジェクトにインストールするgulp関連のファイル一覧が記録されていくものになります。

詳しいことは省きますが、これがあるおかげで複数人での開発でも環境を統一することが簡単になるようです。

ローカルにgulpをインストール

ローカルにインストールするコマンドは、npm install –save-dev gulp です。

グローバルにインストールしたときと比べ、ちょっとずつ違いますね。

グローバル:
npm install –global gulp-cli
ローカル:
npm install –save-dev gulp

インストールするものがgulp CLIからgulpに変わり、オプションも変わっています。

–save-dev というのは、インストール内容をpackage.jsonにも記入する、というようなオプションのようです。

warningがいっぱい出ましたが、npm initしたときにいろいろ空のままにしたのが影響していそうです。

ともあれgulpはインストールできたのでよしとします。

ちなみにpackage.jsonのあるgulpディレクトリには、node_modulesというディレクトリと、その中にgulpというディレクトリができています。

gulpfile.jsの作成と、gulpの実行

このファイルは、どのようにタスクを実行するかを記述するファイルです。

package.jsonがインストールしたものの記録、gulpfile.jsはそれをどう使うかのプログラムという感じです。

package.jsonと同じ階層にgulpfile.jsを作成します。

動作確認のためなので、中身は下記のようなものでよいです。

TESTと出力するプログラムです。

いよいよgulpを実行します。コマンドは、gulpです。

gulpfile.jsを使い、defaultが始まり、「TEST」とログを出力し、defaultを終了する、というタスクが完了したようです。

次は、Sassのコンパイルなど、実際のgulpらしい動きをできるようにしていきたいと思います。

(次回:gulpでSassのコンパイルを自動化する

Comments are closed.