【gulp】CoffeeScriptとBrowserSync導入をメモメモ

gulp

kouraku

2015.06.19

みなさま、はじめまして。
三度の飯より嫁が好き、今年1月に入社したアラフォールーキーkourakuです。よろしくお願いします。

最近、gulpの環境構築を進めていたりするので、色々と忘れないうちにメモしておこうと思います。
（40に近づくにつれ物覚えが悪くなってきて困ります。。。）

今回はgulpの初歩編、だけどメチャメチャ使える
「CofeeScriptでコードを書く準備」と「Browsersyncの導入」についてメモメモ。

※前提：gulpインストール済
※gulpのインストールについては、公式サイトやその他紹介サイト等をご参照ください。

まずはCoffeeScriptを使いたい

CoffeeScript公式サイト

gulpの良いところは、処理が速いというのもありますが、何と言ってもコードの見通しの良いところでしょうか。そこをさらにCoffeeScriptを使って書いたりすると、まるでプロパティを設定する感覚でタスクが作れてしまいます。

では早速、次のコマンドを叩いてCoffeeScriptを使うためのプラグインをインストールします。

$ npm install coffee-script --save-dev

※「$」はコマンドラインを表す記号ですので、実際の入力は不要です。

$ npm install gulp-coffee --save-dev

インストールが完了したら、続いてCoffeeScriptを使えるようにするための準備をします。
まずは、gulpfile.jsの中身を以下の様に書きます。

[gulpfile.js]
require('coffee-script/register');
require('./gulpfile.coffee');

2行目に設定したファイルが実体ファイルになります。
ここでは分かりやすくgulpfile.coffeeという名前にして、同名のファイルを作成します。

ちなみに、この段階でディレクトリはこんな感じなっています。

┬ [node_modules] ─── plugin
├ gulpfile.coffee
├ gulpfile.js
└ package.json

はい、これでCoffeeScriptを使う準備が整いました。
続いてBrowserSyncを使えるようにします。

BrowserSyncとは

BrowserSync公式サイト
 BrowserSync公式紹介動画

ローカルサーバを起動してくれて
同一ネットワーク上にある全端末のブラウザを同期してくれて
ファイル監視もしてくれて
ファイルに更新が入れば勝手にリロードしてくれる

など、便利な機能を一挙に提供してくれる優れものです。
複数のブラウザで同時チェックや、PCとスマホ同時に確認なんかもできてしまいます。

また、今年の初旬から「UI」といった新機能が備わりました。

ネットワーク状況（Local/External）
接続端末情報
環境設定
閲覧履歴
スマホ等外部端末をDeveloperツールで確認
CSS OutlineやDepth Outlineを確認
回線速度設定

など、素敵な感じに仕上がってきています。詳細については、公式サイトなどご覧ください。

BrowserSyncを導入する

ということで、BrowserSyncを使うための準備をします。
まずは次のコマンドを叩いてインストールします。

$ npm install browser-sync --save-dev

インストールが終わったら、次はタスクを作ります。
先ほど作成したgulpfile.coffeeを使って、以下の様にコードを書きます。

[gulpfile.coffee]
gulp = require 'gulp'
browserSync = require 'browser-sync'

# 基本パス設定
paths =
	pub: 'htdocs/'

# BrowserSyncの設定
gulp.task 'browser-sync', ->
	browserSync.init
		server:
			# ルートを指定します
			baseDir: paths.pub
		# gulp起動時に開くページを指定します
		startPath: 'index.html'
		# ポートを指定します（デフォルトは3000）
		port: 3040
		# External IPでブラウザを開けます（スマホで確認する時に重宝）
		open: "external"
	return

# ファイル監視
gulp.task 'watch', ->
	gulp.watch [
		paths.pub+'**/*.js'
		paths.pub+'**/*.html'
		paths.pub+'**/*.css'
	],['reload']
	return

# リロード
gulp.task 'reload', ->
	browserSync.reload()
	return

# 以下コマンド -----------------------------

gulp.task 'default', [
	'browser-sync'
	'watch'
]

HTMLやCSS、JavaScriptファイルなどの置き場として、ディレクトリhtdocsを作成しました。
ここまでのディレクトリ構成はこんな感じです。

┬ [htdocs] ────── HTMLやCSS、JavaScriptファイル
├ [node_modules] ─── plugin
├ gulpfile.coffee
├ gulpfile.js
└ package.json

htdocs配下に適当にHTMLファイルを配置した上で、

$ gulp

とコマンドを叩くと、以下のようなログが流れ、ブラウザが起動します。

$ gulp
[15:56:34] Using gulpfile C:\gitlab\gulp-sample01\gulpfile.js
[15:56:34] Starting 'browser-sync'...
[15:56:36] Finished 'browser-sync' after 2.47 s
[15:56:36] Starting 'watch'...
[15:56:36] Finished 'watch' after 24 ms
[15:56:36] Starting 'default'...
[15:56:36] Finished 'default' after 5.74 μs
[BS] Access URLs:
 -------------------------------------------------
       Local: http://localhost:3040/index.html
    External: http://127.0.0.10:3040/index.html
 -------------------------------------------------
          UI: http://localhost:3001
 UI External: http://127.0.0.10:3001
 -------------------------------------------------
[BS] Serving files from: htdocs/

これで、BrowserSyncの機能が使えるようになりました。
設定した内容でブラウザも開いています。
そして、HTML、CSS、JSを修正すると自動的にリロードが入るのも確認できます。
UI機能も活用すれば、PC・スマホの確認がとてもスムーズに進みますね！

今回のサンプルデータ