[gulp] ローカルサーバー編

2016-08-25

gulpを使ってローカルサーバーを起動してみる

今回はgulpを使って、ローカル環境でサイトの表示を確認してみる。具体的には下記のようなテスト環境が実行できるようにしてみる。

プロジェクトのappフォルダを公開フォルダとしてサーバを起動する。
サイトにはphpファイルが含まれている。phpも動くサーバを起動する。
srcフォルダのcoffeeファイルやscssファイルを更新したら、ブラウザを自動でReloadさせる。

上記を実現するのに、この記事ではbrowser-sync、gulp-connect-phpを利用する。なお、gulp自体の設定については下記の記事参照。

gulpの初期設定

フォルダの構成

project_folder
├── 📁app     ★ここを公開する
├── 📁gulp
│   ├── config.coffee
│   └── 📁tasks
│       ├── server.coffee
│            :
├── gulpfile.coffee
├── 📁node_modules
├── package.json
└── 📁src

サーバスクリプト

インストールするnpmモジュール

スクリプトの実行に必要なnpmモジュールをインストールしておく。

npm i fs gulp-connect-php browser-sync -D`

gulp/tasks/server.coffee

 1gulp = require('gulp')
 2browserSync = require('browser-sync').create()
 3php = require('gulp-connect-php')
 4config = require('../config')
 5
 6gulp.task 'php', ->
 7  php.server({
 8    base: 'app'
 9    port: 8000
10  })
11
12gulp.task 'connect', ->
13  browserSync.init({
14    baseDir: 'app'
15    proxy: 'localhost:8000'
16  })
17
18gulp.task 'reload', ->
19  browserSync.reload()
20
21gulp.task 'server', ['php', 'connect'], ->
22  gulp.watch(config.src + '/**/*.coffee', ['coffee'])
23  gulp.watch(config.src + '/**/*.scss', ['sass'])
24
25  gulp.watch(config.dest + "/**/*", ['reload'])

まずポート番号8000で起動するphpタスクを作成している。
続いて、baseDir(公開フォルダ)をappとしたbrowserSyncのタスクを作成する。タスク名はconnect。ブラウザからの要求がphpファイルであった場合、proxyの設定により、内部的にポート8000で通信を行う。browserSync自体は初期設定でポート3000で起動する。
reloadタスクはブラウザをリロードさせるためのタスク。browserSync.reload()を実行するだけで、簡単にリロードさせることができる。
最後にserverタスクを作成する。このタスクが実際にgulpコマンドで実行するタスクとなる(他のタスクは直接実行することはない)。gulp serverを実行すると、phpとconnectタスクが実行される。
serverタスクの中身にはファイルの変更を監視するスクリプトを書くことができる。coffeeファイルの変更があればcoffeeを、scssファイルの変更があればsassを実行するようになっている。
coffeeやsassが実行されると、appフォルダの中身が変わる。appフォルダの中身が変わるとreloadを実行するようになっている。

server実行

 1$ gulp server
 2[hh:mn:ss] Requiring external module coffee-script/register
 3(node:2591) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
 4[hh:mn:ss] Using gulpfile project_folder/gulpfile.coffee
 5[hh:mn:ss] Starting 'php'...
 6[hh:mn:ss] Finished 'php' after ## ms
 7[hh:mn:ss] Starting 'connect'...
 8[hh:mn:ss] Finished 'connect' after ## ms
 9[hh:mn:ss] Starting 'server'...
10[hh:mn:ss] Finished 'server' after ### ms
11PHP 5.6.24 Development Server started at Thu Aug 25 hh:mm:ss yyyy
12Listening on http://127.0.0.1:8000
13Document root is project_folder/app
14Press Ctrl-C to quit.
15[BS] Proxying: http://localhost:8000
16[BS] Access URLs:
17 -------------------------------------
18       Local: http://localhost:3000
19    External: http://###.###.###.###:3000
20 -------------------------------------
21          UI: http://localhost:3001
22 UI External: http://###.###.###.###:3001
23 -------------------------------------

上記を実行すると、デフォルトのブラウザでhttp://localhost:3000が開く。
- ちなみに、http://localhost:3001にアクセスすると、browserSyncの管理画面が開く。
srcフォルダが更新されると、ブラウザは自動でリロードされる。
終了する場合はCtrl+Cを押す。