これからはじめるGulp #4：gulp-connectモジュールを使ったローカルサーバの起動

Gulp - Solo Advent Calendar 2014

野中龍一

2014.12.04

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

前回のこれからはじめるGulp #3：gulp.watchでファイルの変更を監視しタスクを実行するで変更を監視してタスクを実行できるようになりました。今回は監視と平行して走らせるgulp-connectを使ったローカルサーバの起動を試します。

準備

ローカルサーバにアクセスした時に表示させるindex.htmlを作っておきましょう。ローカルサーバのrootディレクトリはprodです。

index.htmlを作る

srcディレクトリにindex.htmlを作ります。このHTMLはローカルサーバー起動時にprodディレクトリにコピーします。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Gulp Hello World</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

<h1>Hello World</h1>
  
</body>
</html>

gulp-connectのインストールと読み込み

gulp-connectを--save-devを付けて開発用としてインストールします。

$ sudo npm install --save-dev gulp-connect
Password:
gulp-connect@2.2.0 node_modules/gulp-connect
├── connect-livereload@0.3.2
├── event-stream@3.1.7 (duplexer@0.1.1, stream-combiner@0.0.4, from@0.1.3, pause-stream@0.0.11, map-stream@0.1.0, split@0.2.10, through@2.3.6)
├── tiny-lr@0.0.7 (debug@0.8.1, faye-websocket@0.4.4, qs@0.5.6, noptify@0.0.3)
├── gulp-util@2.2.20 (lodash._reinterpolate@2.4.1, minimist@0.2.0, through2@0.5.1, vinyl@0.2.3, chalk@0.5.1, dateformat@1.0.11, multipipe@0.1.2, lodash.template@2.4.1)
└── connect@2.17.3 (parseurl@1.0.1, response-time@1.0.0, connect-timeout@1.1.0, cookie@0.1.2, debug@0.8.1, cookie-signature@1.0.3, pause@0.0.1, fresh@0.2.2, vhost@1.0.0, qs@0.6.6, basic-auth-connect@1.0.0, on-headers@0.0.0, bytes@1.0.0, serve-favicon@2.0.0, morgan@1.1.1, errorhandler@1.0.1, cookie-parser@1.1.0, csurf@1.2.0, method-override@1.0.2, body-parser@1.2.2, compression@1.0.2, type-is@1.2.0, express-session@1.2.1, serve-index@1.0.3, multiparty@2.2.0, serve-static@1.1.0)

インストールが終わったらgulpfile.jsファイルに読み込みます。

var gulp    = require('gulp');
var sass    = require('gulp-sass');
var connect = require('gulp-connect');

...

copyタスクを作る

今回ローカルサーバのrootディレクトリにprodディレクトリを指定します。srcディレクトリに保存されているindex.htmlをprodディレクトリにコピーしなければHTMLを表示できません。そこで前回作成したgulpfile.jsをベースにcopyタスクを追加します。

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function(){
  gulp.src('./src/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./prod/css'));
});

//copyタスクをここに追加

gulp.task('watch', ['sass'], function(){
  var watcher = gulp.watch('./src/scss/*.scss', ['sass']);
  watcher.on('change', function(event) {
    console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
  });
});

gulp.task('default', ['sass']);

copyタスク

copyタスクはstream内でSassなどのモジュール（.pipe(sass())）を指定せず、gulp.dest()で保存先だけ指定します。Grantの場合はgrunt-contrib-copyモジュールを使って実現しますが、Gulpはメソッドだけで実現できるんですね。

gulp.task('copy', function(){
  gulp.src('./src/*.html')
    .pipe(gulp.dest('./prod'));
});

copyタスクを試す

copyタスクを単体で実行してprodにHTMLがコピーされることを確認します。

$ gulp copy
[21:33:27] Using gulpfile ~/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/gulpfile.js
[21:33:27] Starting 'copy'...
[21:33:27] Finished 'copy' after 4.85 ms

$ tree prod
prod
├── css
│   └── style.css
└── index.html

prodにindex.htmlがコピーされました。

監視対象にHTMLを追加する

前回作成したwatchタスクにcopyタスクを追加します。イベントリスナーを使ったログ表示はわかりにくくなってしまうため削除しておきます。

gulp.task('watch', ['sass', 'copy'], function(){
  gulp.watch('./src/scss/*.scss', ['sass']);
  gulp.watch('./src/*.html', ['copy']);
});

この時点でgulpfile.jsはこのようになります。

var gulp    = require('gulp');
var sass    = require('gulp-sass');
var connect = require('gulp-connect');

//sass
gulp.task('sass', function(){
  gulp.src('./src/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./prod/css'));
});

//copy
gulp.task('copy', function(){
  gulp.src('./src/*.html')
    .pipe(gulp.dest('./prod'));
});

//watch
gulp.task('watch', ['sass', 'copy'], function(){
  gulp.watch('./src/scss/*.scss', ['sass']);
  gulp.watch('./src/*.html', ['copy']);
});

gulp.task('default', ['sass']);

watchタスクをチェックする

watchタスクを実行して、HTMLの変更を監視しcopyタスクが実行されるか確認します。

$ gulp watch
[21:48:10] Using gulpfile ~/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/gulpfile.js
[21:48:10] Starting 'sass'...
[21:48:10] Finished 'sass' after 5.39 ms
[21:48:10] Starting 'copy'...
[21:48:10] Finished 'copy' after 1.25 ms
[21:48:10] Starting 'watch'...
[21:48:10] Finished 'watch' after 7.3 ms
[21:48:14] Starting 'sass'...
[21:48:14] Finished 'sass' after 1.28 ms
[21:48:17] Starting 'copy'...
[21:48:17] Finished 'copy' after 1.59 ms

問題なさそうです。

serveタスクを作る

まずは、ローカルサーバーを立ち上げるだけのタスクを作ります。

  gulp.task('serve', function(){
  connect.server();
});

serveタスクを追加したgulpfile.jsはこうなります。

var gulp    = require('gulp');
var sass    = require('gulp-sass');
var connect = require('gulp-connect');

//sass
gulp.task('sass', function(){
  gulp.src('./src/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./prod/css'));
});

//copy
gulp.task('copy', function(){
  gulp.src('./src/*.html')
    .pipe(gulp.dest('./prod'));
});

//watch
gulp.task('watch', ['sass', 'copy'], function(){
  gulp.watch('./src/scss/*.scss', ['sass']);
  gulp.watch('./src/*.html', ['copy']);
});

//server
gulp.task('serve', function(){
  connect.server();
});

gulp.task('default', ['sass']);

ローカルサーバーを起動する

serveタスクを起動してみます。rootディレクトリをprodにしていないので、gulpfile.jsが置かれているディレクトリがrootになります。

$ gulp serve
[11:36:46] Using gulpfile ~/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/gulpfile.js
[11:36:46] Starting 'serve'...
[11:36:46] Finished 'serve' after 22 ms
[11:36:46] Server started http://localhost:8080

ローカルサーバーが起動したのでhttp://localhost:8080にアクセスしてみます。 rootディレクトリにindex.htmlがないのでディレクトリとファイルの一覧が表示されるはずです。

ディレクトリ一覧の中にあるprod（http://localhost:8080/prod/）をクリックすると冒頭で作成したindex.htmlが表示されるはずです。

ローカルサーバーを停止する

ローカルサーバーを止めるにはcontrol + Cを打ちます。

[11:36:46] Starting 'serve'...
[11:36:46] Finished 'serve' after 22 ms
[11:36:46] Server started http://localhost:8080
^C[12:01:47] Server stopped

rootディレクトリを指定する

rootディレクトリを指定するにはgulp-connectのserveメソッドにオプションを与えます。

gulp.task('serve', function(){
  connect.server({
    root: './prod'
  });
});

これでhttp://localhost:8080にアクセスした時にprodがrootディレクトリになりprod/index.htmlが見られるようになります。

defaultタスクで必要なタスクをすべて実行する

最後にwatchタスクとserveタスクをgulpコマンドだけで実行できるようにdefaultタスクを調整します。

gulp.task('default', ['sass']);

sassタスクが設定されていますがこれをwatchとserveに書き換えます。

gulp.task('default', ['watch', 'serve']);

gulpfile.js

gulpfile.jsは最終的にこのようになります。

var gulp    = require('gulp');
var sass    = require('gulp-sass');
var connect = require('gulp-connect');

//sass
gulp.task('sass', function(){
  gulp.src('./src/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./prod/css'));
});

//copy
gulp.task('copy', function(){
  gulp.src('./src/*.html')
    .pipe(gulp.dest('./prod'));
});

//watch
gulp.task('watch', ['sass', 'copy'], function(){
  gulp.watch('./src/scss/*.scss', ['sass']);
  gulp.watch('./src/*.html', ['copy']);
});

//server
gulp.task('serve', function(){
  connect.server({
    root: './prod'
  });
});

gulp.task('default', ['watch', 'serve']);

実行

defaultタスクを試してみます。defaultタスクは省略できるのでgulpコマンドのみで行えます。

$ gulp
[13:20:34] Using gulpfile ~/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/gulpfile.js
[13:20:34] Starting 'sass'...
[13:20:34] Finished 'sass' after 5.32 ms
[13:20:34] Starting 'copy'...
[13:20:34] Finished 'copy' after 1.46 ms
[13:20:34] Starting 'watch'...
[13:20:34] Finished 'watch' after 7.47 ms
[13:20:34] Starting 'serve'...
[13:20:34] Finished 'serve' after 10 ms
[13:20:34] Starting 'default'...
[13:20:34] Finished 'default' after 8.98 μs
[13:20:34] Server started http://localhost:8080

変更を監視してタスクを実行し、ローカルサーバーも起動できました。あとは変更された時にブラウザをリロードするLiveReloadですね。もう少しのところですがLive Reloadは明日に回すことにします。

これからはじめるGulp #4：gulp-connectモジュールを使ったローカルサーバの起動

はじめに

準備

index.htmlを作る

gulp-connectのインストールと読み込み

copyタスクを作る

copyタスク

copyタスクを試す

監視対象にHTMLを追加する

watchタスクをチェックする

serveタスクを作る

ローカルサーバーを起動する

ローカルサーバーを停止する

rootディレクトリを指定する

defaultタスクで必要なタスクをすべて実行する

gulpfile.js

実行

イベント

EVENT【5/14（火）】アノテーションの中途向けオンライン会社説明会を開催します

EVENT【5/23（木）】ユースケースに学ぶAWS運用のノウハウ～可視化から統制まで～

EVENT【5/16（木）】Snowflakeを触ってみよう！初めての方向けハンズオンセミナー

EVENT【4/18リモート】クラスメソッドのフリーランスエンジニア会社説明会〜AWS/システムアーキテクト/Android案件特集〜を開催します

EVENT【5/10（金）名古屋】クラスメソッドグループの会社説明会を開催します！

EVENT【4/19（金）】認証機能の開発工数削減をデモで体験！次世代認証基盤サービス『Auth0 by Okta』導入実践ウェビナー

EVENT【4/25（木）リモート】Google Cloudに携わるエンジニアのキャリア～クラスメソッド会社説明会～

EVENT【4/30（火）リモート】クラスメソッドの会社説明会を開催します

EVENT【5/9（木）】組織的なクラウド統制はじめの一歩

EVENT【4/24（水）リモート】会社員からフリーランスエンジニアへ、変化の時の体験談 [パネルトーク] フリーランストーク#10

これからはじめるGulp #4：gulp-connectモジュールを使ったローカルサーバの起動

はじめに

準備

index.htmlを作る

gulp-connectのインストールと読み込み

copyタスクを作る

copyタスク

copyタスクを試す

監視対象にHTMLを追加する

watchタスクをチェックする

serveタスクを作る

ローカルサーバーを起動する

ローカルサーバーを停止する

rootディレクトリを指定する

defaultタスクで必要なタスクをすべて実行する

gulpfile.js

実行

イベント

EVENT【5/14（火）】アノテーションの中途向けオンライン会社説明会を開催します

EVENT【5/23（木）】ユースケースに学ぶAWS運用のノウハウ～可視化から統制まで～

EVENT【5/16（木）】Snowflakeを触ってみよう！初めての方向けハンズオンセミナー

EVENT【4/18リモート】クラスメソッドのフリーランスエンジニア会社説明会 〜AWS/システムアーキテクト/Android案件特集〜 を開催します

EVENT【5/10（金） 名古屋】クラスメソッドグループの会社説明会を開催します！

EVENT【4/19（金）】認証機能の開発工数削減をデモで体験！次世代認証基盤サービス『Auth0 by Okta』導入実践ウェビナー

EVENT【4/25（木）リモート】Google Cloudに携わるエンジニアのキャリア～クラスメソッド会社説明会～

EVENT【4/30（火）リモート】クラスメソッドの会社説明会を開催します

EVENT【5/9（木）】組織的なクラウド統制 はじめの一歩

EVENT【4/24（水）リモート】会社員からフリーランスエンジニアへ、変化の時の体験談 [パネルトーク] フリーランストーク#10

関連記事

話題の日本酒「ソースコード」を読んで（飲んで）みた

ECMAScript의 해시뱅

ESLintでconsoleの使用をエラーにする

ドメイン駆動設計を実践して自分の LINE 環境をリファクタリングしてみた（実装編２）

EVENT【4/18リモート】クラスメソッドのフリーランスエンジニア会社説明会〜AWS/システムアーキテクト/Android案件特集〜を開催します

EVENT【5/10（金）名古屋】クラスメソッドグループの会社説明会を開催します！

EVENT【5/9（木）】組織的なクラウド統制はじめの一歩