フロントエンド開発日記。
先日はディレクトリ構成とCSS設計方針について紹介しました。
前回の記事はこちら
今回は、gulp編。
すっかりフロントエンド（特にHTML/CSSコーダー）にとってはデファクトと思われるのでご存じの方もいるかもですが、「なんぞそれ」という方のためにご紹介します。
gulpって？
gulpはNode.js製の「タスクランナー」と呼ばれるもので、フロント周りの手動でやるといろいろ面倒な作業を自動化してくれます。
例をあげますと、
– SassをCSSにコンパイルしてくれる
– jsを縮小化してくれる
– 複数のjsを一枚にまとめてくれる
– 画像のサイズ圧縮をしてくれる
– アイコンフォントを自動生成できるようにしてくれる
– ファイルの変更を検知してブラウザを自動リロードしてくれる
などなど。正直探せば様々な機能が出てきますので、紹介できないほどです。
基本は、
gulp × 何らかの処理を行ってくれるプラグイン
という構成で使用します。
説明ばかりだとわかりづらいので、実際に導入手順を見ながら、どういうものか確認して行きましょう。
**************************************************
1．Node.jsのインストール
gulpはNode.js製ですので、もちろんインストールが前提となります。
– Macの場合
Homebrewが入っていれば簡単です。入れてない方はググって入れてみてください。
brew install node
また、Node自体のバージョン管理をしたい場合は、nodebrewやnvmなどがありますので、各自お好みで。
– Windowsの場合
インストール用のバイナリが配布されているので、そちらを使いましょう。「Node.js」と検索すれば、公式にヒットします。
現在（2017年9月8日）のステーブル版は v6.11.3 になるので、これを入れるのが良いと思われます。
Macと同様Node自体のバージョン管理をしたい場合は、nodistというツールがあるので、そちらを使いましょう。
また、Windowsでは、Linux（ぽい）コマンドが使えなくてなかなかぐぬぬなので、Gitをインストールし、Gitbash上での作業となります。
– Linuxの場合
各OSのパッケージマネージャーを使用してインストールするのが手っ取り早いです。
* Debian系
sudo apt-get install nodejs
* Redhat
sudo yum install nodejs
インストール時点ではエイリアスがnodejsになっていたはずなので、.bashrcをゴニョゴニョするなどして、nodeでアクセスできるようにしましょう。
2．npm の初期化
npmとは、Nodejs製のプラグイン類の依存関係を解決してくれるパッケージマネージャーです。
今後付き合いが長くなるので、覚えて帰ってください。
まず、任意のプロジェクトディレクトリを作ります。
mkdir project_dir
プロジェクトディレクトリに移動し、npmを初期化します。
cd project_dir
npm init
対話形式でいろいろ聞いてきますが、とりあえずはEnter押し続けてOKです。
これで package.json という、npmを使用したプロジェクトを管理するためのファイルができているはずです。
ls -l
※package.jsonがディレクトリ下にいればOK
3．gulpのインストール
次にgulpを入れていきます。ただし、gulpはプロジェクトだけでなく、グローバル領域にもインストールが必要なので、2回に分けてのインストール作業が必要です。
(1) グローバル環境へのインストール
下記のコマンドを叩いて、グローバル環境にインストールしてください。
npm install -g gulp
(2) ローカル（プロジェクト）環境へのインストール
次に、プロジェクトディレクトリに移動し、プロジェクトにもgulpをインストールします。
cd project_dir
npm install –save-dev gulp
「–save-dev」オプションを付けることで、package.jsonに必要なモジュールとして追記され、今後の使いまわしやチーム内でのパッケージの共有が便利になります。処理が終わったら、次のコマンドを実行し、追記が行われたか確認してください。
cat package.json
以下のような記述があればOKです。
// 前略
“devDependencies”: {
“gulp”: “^3.9.1”
}
}
// 以下略
以上で、ローカル及びグローバル環境にgulpがインストールされ、gulpを使用する準備が整いました。
次回からは実際にタスクを使用していくための準備とgulpfile.js（gulpタスクを登録するための設定ファイル）の記述方法を紹介していきます。
