上からマリコ、いまさらGulp(1) - エンジニアうまの日記

静的サイトジェネレーターもいいが、
やはりタスクランナーのほうが今回の案件にマッチしそうだったので、しぶしぶ、いまさらGulpについて調べてみました。

Gulp.jsとは？

Node.jsのStreamAPIを利用したビルドシステム。ローカル環境で動くサーバーサイドJavascript環境(Node.js)のStreamAPIを利用してビルドする。

なにができるのか？

・JSの圧縮
・SASSのコンパイル
・ファイルの監視/自動化
・ライブリロード
など

Node.jsのインストール

Node.jsを利用したビルドシステムのため、当然Node.jsをインストールする必要がある。
https://nodejs.org/en/

package.jsonを作成する

package.jsonはprojectのpackageを管理するためのファイル。
CocoapodでいうところのPodfile的なものだと解釈しています。

作り方は２通りあって、ひとつ目は自分でこつこつ書くこと。ふたつ目はプロジェクトのディレクトリまで移動して以下のコマンドを叩くことです。

npm init

このコマンドを叩くと、対話形式でpackage.jsonが生成されます。
ここもCocoapodと大差無いですね。

gulpをインストールする

gulpのインストールは通常、ローカルとグローバルの両方にインストールする必要がある。
グローバルにインストールされたgulpは、ローカルにインストールしたgulpを実行するのが役割です。

グローバルな場所にgulpをインストールします。(グローバルインストール)

npm install -g gulp

プロジェクトのフォルダに移動し、gulpをインストールします(ローカルインストール)

npm install -D gulp

するとプロジェクトの内部に、node_modulesというフォルダが現れています。
そして、package.jsonには以下のフィールドが追加されました。

"devDependencies": {
    "gulp": "^3.9.1"
}

.gitignoreを設定しよう(任意)

package.jsonのある場所まで移動して、ターミナルにて"npm install" を叩けば、
"devDependencies"や"Dependencies"に記述されているパッケージがインストールされ、
パッケージ群(node_module)が生成されます。そのためgitで管理する場合、node_module以下はコミットする必要がないと考えてもいいと思います。

//.gitignore

node_modules

タスクを走らせてみよう

さあここまできたら、やっとタスクが走らせられる。

gulpfile.jsを作ろう

プロジェクトのルート階層にgulpfile.jsを作成します。
このファイルの中にタスクの中身を書いていきます。

Run!Run!Run!

ターミナルで以下を叩きましょう

gulp

これでやっと僕もガルパー(gulper)です。そんな言葉はあるのかな。