タスクランナーの一つであるgulp（ガルプ）。使い出すとすごく便利で今ちょっと手放せない開発ツールの一つなんですが、使ってない人からすると、導入コストとか学習コストが気になって、まだ手を出してないという方もいますよね。なので、今回導入用の記事を書いたので、ちょっと気になってるという方、試してみたかったという方に役立てばいいなと思います。

1. 1.タスクランナーとは？ gulpで何ができるのか？
2. 2.gulpに必要な環境を整える – Node.jsのインストール
3. 3.gulpに必要な環境を整える – package.jsonの作成
4. 4.gulpに必要な環境を整える – gulpfile.jsの作成
5. 5.gulp-ejsを使った開発環境
6. 6.gulp-ejsに入れているパッケージリスト
7. 7.使い方 例：BrowserSync（ブラウザーシンク）
8. 8.最後に

タスクランナーとは？ gulpで何ができるのか？

コーディングをしているとHTMLやCSSファイルの編集をして、ブラウザでプレビューをみて、スマートフォンで確認して、画像のサイズを圧縮して、というふうに色々なことをするのですが、タスクランナーはそういった様々な処理（タスク）を自動化して走らせることを指します。

タスクランナーであるgulpには、様々ことを行うためのパッケージが色々と用意されています。

• Sassファイルのコンパイル
• CSS及びJavaScriptファイルの圧縮
• ブラウザーシンク
• ベンダープレフィックスの自動付与
• などなど

目的にあったパッケージをインストールし、設定ファイルにやりたいことをかいておけば、あとはgulpを実行するだけでそれらを使うことができます。

これらが

これで解決！

インストールするパッケージはpackage.jsonというファイルに記述しておくことで、インストールをコマンド一発で出来ます。
そのため、プロジェクトごとに、あれをインストールして次はこれをインストールして・・・といった、手間が省けるので非常に楽です！

package.jsonさえあれば、どこでもだれでも同じ開発環境を整えられる（要インターネット回線）ので、同じプロジェクトの開発メンバーで環境を合わせるのもスムーズです。

個人で使う場合でも、会社のPCと自宅のPCで同じ環境を整えたりするのに便利ですね。

2.gulpに必要な環境を整える – Node.jsのインストール

gulpを動かすには必要なパッケージが幾つか存在するので、まずはそれらをインストールしていきます。

まずは、Node.js！
Node.jsはサーバーサイド環境のJavaScriptです。Webサーバーやネットワークプログラムの記述を意図しています。 – wikipediaより

インストールには公式サイトからダウンロードできるので、そちらからインストーラーをダウンロードし、インストールします。

インストールできたかを確認するには、ターミナル等のコマンドラインで

node -v

と実行し、バージョンが表示されればインストールが無事完了しています。

Windowsの場合はPathを通す必要があるので、コントロールパネルのシステムから環境変数の設定を編集しましょう。おそらく何らかの変数値がすでに入っているかと思うので、最後の;の後ろにC:¥Program Files¥nodejs と言った形で追加すれば、先ほどのバージョン確認も通るかと思います。

3.gulpに必要な環境を整える – gulp.jsのインストール

gulp.jsをグローバルにインストールします。（グローバルにというのは、どこからでも扱えるという意味で、端末のどこの場所からでもgulpを使えるようにインストールするということです。）

インストールするには、コマンドラインから行います。

npm install -g gulp

パッケージからのインストールを行うので、Macをお使いの場合はsudoをつけてインストールしてください。

sudo npm install -g gulp

4.gulpに必要な環境を整える – package.jsonの作成

プロジェクト開発用のフォルを作成し、コマンドラインにてそのフォルダに移動します。フォルダはどこでも構いません。

僕はMAMPのhtdocsフォルダの中に開発中のフォルダをいつも作るので、そこにtestフォルダを作成します。

cd /Applications/MAMP/htdocs

mkdir test

cd test

これでコマンドライン上でtestフォルダの中を見ていることになります。その状態で、下記コマンドを実行します。

npm init

実行すると name: というのが現れて、キー入力出来る状態でとまります。これは、今回のプロジェクトの設定を行えるのですが、あとから変更もできますし、何を入力していいかわからない場合は、Enterキーで設定せずに送って行くことができます。

送って行くと最後に内容の確認が出力され、Is this ok? (yes)と聞いてくるので、Enterで確定すれば完了です。

フォルダの中にpackage.jsonが作成され、先ほどの内容確認で表示されたものが記載されています。編集はこのファイルをエディタで編集することが可能です。

5.gulp-ejsを使った開発環境

次は必要なパッケージをインストールしていくんですが、僕は自分が使う開発環境をパッケージにしてGithubにあげているので、それを元に解説していきます。いいなと思われた方は、これをダウンロードして、ご自身の必要な環境にあわせて、設定ファイルを編集したり、必要なパッケージを増やしたりすれば楽じゃないかな？と思います。（ただし、こちらはbowerというものも利用しているので、そちらのインストールも必要になります。）

このパッケージは、ちあきちゃん(@mellowchanter) blog: mellowchanterと共同開発です。

gulp-ejs
｜Github

6.gulp-ejsに入れているパッケージリスト

使い方 例：BrowserSync（ブラウザーシンク）

実際の使い方を説明したいと思います。全部というわけにも行かないので、今回はBrowserSync（ブラウザーシンク）で説明します。

BrowserSync（ブラウザーシンク）とは？

上記の表でも解説していますが、PCやスマートフォン、タブレットなどの様々なブラウザを同期させ、htmlやcssのファイルを編集→保存時にブラウザをリロードし、編集がリアルタイムに反映されるというものです。

同一ネットワーク内であれば、発行されるipアドレスでアクセスでき、PCはもちろん、スマートフォン、タブレットなど、様々な端末でもアクセスできるのが非常に便利です。ただしこれを行う場合、ファイアーウォールの解除などが必要になる場合があります。

パッケージのインストール

まず、パッケージをインストールします

npm install browser-sync --save-dev

先程と同様、Macの場合はsudoをつけてインストールしてください。

gulpfile.jsに設定を書く

var gulp = require( 'gulp' ),// gulpプラグインの読みこみ
    browserSync = require( 'browser-sync' ),// browser-syncのプラグインの読み込み
	paths = {
		rootDir : 'dev'
	}

gulp.task( 'browser-sync', function() {//'browser-sync'が実行時のタスク名なります。
	browserSync.init({
		server: {
			baseDir: paths.rootDir,//ルートとなるディレクトリを指定
		}
	});
});
//devフォルダ以下のファイルを監視
gulp.watch("dev/**", function() {
	browserSync.reload();// ファイルに変更があれば同期しているブラウザをリロード
});

gulpfile.jsの編集が終われば保存し、コマンドラインから実行します。実行には以下のコマンドを。

gulp browser-sync

実行すると下記のようにコマンドラインに表示されます

[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.48:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.48:3001
 -------------------------------------
[BS] Serving files from: dev

上記のhttp://192.168.1.48:3000が同一ネットワーク内からアクセスできるローカルサーバーのURLになり、PC、スマートフォン、タブレットなどからアクセスが可能です。

他のパッケージを導入したくなったら、このようにパッケージをインストールし、gulpfile.jsに追加することで機能を増やせます。

最後に

解説と導入、使い方などをざっと書きましたがいかがでしょうか？おそらく、gulpfile.jsの記述がややこしいかな？と思うのですが、ベースがJavaScriptということと、検索すれば色々と情報が出てくるので、導入が難しすぎるということはないかな？と思います。

自分にあう、もしくは、プロジェクトにあう開発環境を導入しましょう。そういうのを構築するのも楽しいんですよね。

今回の記事を書くのにあたり、下記サイト等参考にさせていただきました。

• gulp
• ブラウザ確認が一瞬！ Grunt・Gulpと始めるBrowserSync入門：ICS LAB

お役に立てたらお願いします🙇