gulp.js 一番簡単なサンプルを作って覚えよう！

gulp（ガルプ）を使うことが一般的になってきました。
私も仕事でgulpを使う機会が多くなってきたので基本的な使い方を書き留めておこうと思います。

良ければ見ていってください。

gulp（ガルプ）って何だろう？

ガルプ、ガルプと良く聞きますよね。
一般的に「タスクランナー」と表現されていますが、ピンと来ないかもしれません。

私の主な使い方としては次のような感じです。

• sassのコンパイル（sass⇒css）
• jsxファイルのコンパイル（jsx⇒js）
• ファイルの更新監視
• コマンドの実行

他にも色々とできますが、簡単に言えば、普段いちいち手でコマンドを打っていることを裏で自動的に行なってくれる縁の下の力持ちというイメージですね！

実際はgulp自体に機能はあまり無く、様々なプラグインを利用して処理を自動化していくイメージです。

 

gulpとNode.jsの関係

gulpとNode.jsの関係は切っても切り離せません。
例えるならNode.jsがOS、gulpはソフトウェアといった感じですね。
そのため、gulpを使うためにはNode.jsが必要になってきます。

 

gulpをインストールしてみよう！

何はともあれgulpをインストールしてみましょう！
まずはOSにあたるNode.jsからインストールする必要があります。

Node.jsのインストール

詳しい方はコマンドから、良くわからない方はダウンロードしてインストールしましょう。
ダウンロードはこちらからできます。

gulp.jsのインストール

Node.jsがインストールできると、「npm」というコマンドが使えるようになります。

gulpも「npm」コマンドでインストールするのですが、その前にプロジェクト領域を作成しましょう。
gulpはプロジェクトごとにインストールするのが一般的なようです。

今回は「gulp-test」というディレクトリを作成して、その中で制作を進めていきます。
ディレクトリ構成は次のとおりです。

 

gulp-test/
├ dist/
│　└ css/
└ src/
└ css/

 

Node.jsでは基本的にプロジェクト単位でモジュールをインストールしていきます。

モジュールをインストールするためには、ターミナルからプロジェクトのディレクトリに移動して「npm」コマンドを実行します。
Windowsならコマンドプロンプト、Macならターミナルを起動してください。

では、cdコマンドで「gulp-test」へ移動して、gulpをインストールしましょう

2行目でgulpをインストールしています。
インストールにはNode.jsのコマンドである「npm」コマンドを使用します。
「Node」コマンドにしてくれると直感的で分かりやすかったんですけどね。
「–save-dev」は今回は気にしなくて大丈夫です。

gulpが正常にインストールされると「node_modules」ディレクトリ作成されているはずです。
この中にgulpが使用する、ものすごく沢山のモジュールがインストールされています。

これはgulpに関係の無いモジュールがインストールされた訳ではなく、全てgulpが使用するモジュールになります。

これらのモジュールを１つ１つ把握する必要はありませんので、気にしなくて大丈夫です。
後で何のモジュールを入れたのか忘れてしまっても、別のコマンドで調べることができるので安心してください。

これでgulpのインストールは完了です。
でも、これだけでは何もできないので次に「gulp」の「タスク」を作ってみましょう。

今回作成するタスク

今回はcssを圧縮するタスクを作ってみましょう。

cssの圧縮とはスペースや改行を削除してファイルの容量を少しでも減らすことです。
ファイルの容量が少しでも軽いとサイトの表示が高速になるので重要ですよね。

例えば次のようなイメージです。

圧縮前

圧縮後

gulp-clean-cssのインストール

さっそくタスクを作りたいのですが、gulp自身にはCSSを圧縮する機能がありません。

そこで、CSSを圧縮してくれるモジュールをインストールする必要があります。
使うモジュールは「gulp-clean-css」です。
モジュールをインストールするには「npm」コマンドですね。

これでタスクを作る準備は整いました。

 

タスクを作ってみよう

gulpのタスクは「gulpfile.js」というファイルを作り、その中に記述していきます。
※ファイル名はルールで決まっていますので、間違えると動作しなくなります。

「gulp-test」の直下に「gulpfile.js」というファイルを作りましょう。

 

gulp-test/
├ dist/
│　└ css/
│ src/
│　└ css/
└ gulpfile.js

 

「gulpfile.js」には次のプログラムを記載しましょう。

難しく感じるかもしれませんが、１つずつ見ていけば理解できます。

 

1〜2行目
インストールしたモジュール「gulp」「gulp-clean-css」を読み込んでいます。
インストールしたモジュールはオブジェクトに入れて使用していきます。

 

4〜8行目
これが今回作成したタスクです。
1つずつ説明していきますね。

 

4行目
「minify-css」という名前でタスクを作成しました。
各タスクには名前を付けて、必要な時に呼び出されて実行されます。
関数と同じようなものですね。

 

5行目
「gulp」は1行目で「gulp」モジュールです。
「gulp.src」でタスクの実行対象を記述しています。
CSS圧縮というタスクを作るので、圧縮前のファイルがどこにあるかをタスクに教えてあげる必要があります。
今回はCSSを「gulp-test/src/css」の中に作成しようと思いますので、それを記述します。
「*.css」としておけば、ファイル名を固定せずに済むので便利です。
また、例えば「gulp-test/src/css」の中に複数のCSSファイルがあっても全てのファイルが処理対象になります。
数百個のCSSを一気に圧縮！ということも出来ます。

 

6行目
「cleanCSS」は2行目で読み込んだ「gulp-clean-css」モジュールです。
ここでCSSを圧縮しています。
「.pipe」は処理を繋げる時に使用します。
今回だと5行目で対象となったCSSファイルに対してCSS圧縮処理をするよ！というイメージですね。

 

7行目
「gulp-dest」はファイルの出力処理です。
6行目で圧縮されたファイルを「gulp-test/dist/css」へ出力するという意味になります。

 

10行目
gulpのデフォルトタスクです。
「gulp」のタスクを実行するためには、「gulp」というコマンドを実行します。
その「gulp」コマンドが実行された時に最初に呼び出されるタスクが「default」になります。
C言語でいう「main」のようなイメージでしょうか。
ここに「minify-css」と記載しておくことにより「minify-css」タスクが実行されます。
つまり「gulp」コマンドを実行すると「minify-css」タスクが実行されることになります。

これでタスクの作成はOKです。
後はタスクを実行するだけなのですが、肝心の圧縮前のCSSの作成がまだなので、ちゃちゃっと作成してしまいましょう。

 

圧縮前のCSSを作成する

CSSの内容は何でもOKですが、作成場所だけは「gulp-test/src/css」の中にしましょう。

 

gulp-test/
├ dist/
│　└ css/
│ src/
│　└ css/
│　　　└ style.css　（新しく作成する）
└ gulpfile.js

 

内容は何でもOK

タスクを実行してみよう

いよいよタスクを実行してみましょう！
といっても「gulp-test」ディレクトリで「gulp」と実行するだけでOKです。

 

結果を確認する

圧縮されたCSSを見てみましょう。
うまくタスクが作成できていれば「gulp-test/dist/css」にCSSができているはずです。
できていれば、中身も見てください。
ちゃんと圧縮されたCSSになっているはずです。

圧縮後のCSSイメージ

 

今回は簡単なサンプルを作成しました。
gulpは工夫やアイデア次第で、様々なモジュールを組み合わせて便利な開発環境を作成することができます。

別の機会もう少し踏み込んだ記事も書いていきますね。