More than 5 years have passed since last update.

初めてのGulp入門 ~インストール編~

Last updated at 2017-04-02Posted at 2017-04-02

##前提条件

下記はすでにインストールしていると仮定

また、下記の記事を完了していることを想定
http://qiita.com/y_sekitoba/private/f0d50afe3884bd22f6d5

##Gulpとは?

Gulpを簡単に言うと「面倒な作業を自動化するもの」です。

具体的には下記のようなことを自動で実行することが可能です。
※下記はあくまでGulpで自動化できることのほんの一部です

上記のようなことはもちろん手動でもできます。
しかし、Gulpを導入することでそれらを全て自動化することで作業の効率化が図れます。

##下準備

これからGulpをインストールしていきますが、その前に下準備をしていきます。

まずは下記のコマンドを実行してpackage.jsonというファイルを作成します。

// 今回作業するディレクトリを作成
$ mkdir gulp_lesson

// 該当ディレクトリへ移動
$ cd gulp_lesson

// package.jsonを作成
$ npm init -y

これで、package.jsonの作成が完了しました。

###◆package.jsonとは?

package.jsonとは簡単に言うと「プロジェクトでどんなパッケージを使用しているかを記述しているファイル」です。
詳しい使い方は今回は割愛しますが、このファイルを利用することで複数人で同じ環境で作業することを容易にできるようになります。

その他にも使い方は数多くありますので、気になる方は調べてみてください。
今回は、こういうものがあるという認識だけ持っていただければ大丈夫です。

##Gulpのインストール

では早速、Gulpをインストールするところまで説明していきます。

インストールには下記の3ステップを実行することで完了します。
※公式を参照

// ステップ1
$ npm install gulp-cli -g

// ステップ2
$ npm install gulp -D

// ステップ3
$ touch gulpfile.js

では、上記で何をしているのかを説明していきます。
※npmのオプションやグローバルインストールに関しては下記のページを参照してください。
http://qiita.com/y_sekitoba/private/f0d50afe3884bd22f6d5

###◆ステップ1

ステップ1では下記のコマンドを実行しています。
※このステップは最初の1回のみ実行すればOKです。

$ npm install gulp-cli -g

これは、npm(ノードパッケージマネージャ)を利用して「gulp-cli」というパッケージをグローバルインストールしています。

gulp-cliというパッケージに関してはおまじないのようなものとして覚えておいていただく程度で大丈夫です。

※実際にはgulp-cliというパッケージの主な機能はnode_modules配下のgulpコマンドへパスを通すということをしています。気になる方はご自身でも色々調べてみてください。

###◆ステップ2

ステップ2では下記のコマンドを実行しています。
※今回のディレクトリ以外でもGulpを利用したい場合はこのステップから始めてください。

$ npm install gulp -D

これは、npm(ノードパッケージマネージャ)を利用して「gulp」というパッケージを-Dオプションを利用して対象のディレクトリにインスートルしています。

下記のコマンドを実行してGulpのインストールが成功しているか確認します。

// 下記のコマンドでバージョンの情報などが表示されればOK
$ gulp -v

これで、対象のディレクトリにGulpのインストールが完了しました。

####補足

ネット上でGulpのインストール系の記事を探すと下記のようにしているものも出てきますが、現在Gulpの公式ページでは今回のインストールの仕方が掲載されています。

$ npm install -g gulp

上記のコマンドは、「 Gulpパッケージそのものをグローバルインストールする 」という方法を取っています。
この方法でもGulpを利用することはできますが、諸々と問題が発生することが多いです。

###◆ステップ3

ステップ3では下記のコマンドを実行しています。

$ touch gulpfile.js

これは、touchコマンドを利用して「gulpfile.js」というgulpの設定ファイルを作成しています。

ここで作成した、「gulpfile.js」にはGulpの設定を記述していきます。

##Gulpを実際に利用するには？

現状、Gulpパッケージのインストールが完了している状態のはずです。

ここからは、プラグインというものを利用してGulpで作業(タスク)の自動化をしていきます。
※Gulp単体では最初に説明した自動化を実行することができません。

実際に、次回では「gulp-sass」というプラグインを利用しながらgulpfile.jsの書き方なども説明していきます。