whiskers
メニュー
blog

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

    • Ryuichi Nonaka
    この記事は書かれてから1年以上経過しており、内容が古い場合があります。

    はじめに

    この記事はGulp.js（全俺） Advent Calendar 2014です。

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

    準備

    まず、ローカルサーバーにアクセスした時に表示させるindex.htmlを作っておきます。

    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ディレクトリを指定していないので、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は明日に回すことにします。

    シリーズ

    1. これからはじめるGulp（0）：アドベントカレンダースケジュール
    2. これからはじめるGulp（1）：bundler, rbenv, nodebrewでGulp環境を作ってみる
    3. これからはじめるGulp（2）：gulp-sassを使ってSCSSをコンパイルするタスクを作ってみる
    4. これからはじめるGulp（3）：gulp.watchでファイルの変更を監視しタスクを実行する
    5. これからはじめるGulp（4）：gulp-connectモジュールを使ったローカルサーバの起動
    6. これからはじめるGulp（5）：gulp-connectモジュールを使ったLiveReload
    7. これからはじめるGulp（6）：gulp-plumberとgulp-notifyを使ったデスクトップ通知
    8. これからはじめるGulp（7）：require-dirモジュールを使ったタスク単位のファイル分割
    9. これからはじめるGulp（8）：delモジュールとvinyl-pathsモジュールを使ったファイルの削除
    10. これからはじめるGulp（9）：Ruby版Sassが使えるgulp-ruby-sassへの乗り換え
    11. これからはじめるGulp（10）：deprecatedになっていたgulp-connectからgulp-webserverへ乗り換える
    12. これからはじめるGulp（11）：ブラウザ間でスクロールやクリック操作を同期できるBrowserSync
    13. これからはじめるGulp（12）：gulp-imageminプラグインを使ったJPEG,PNG,GIF,SVGの最適化
    14. これからはじめるGulp（13）：gulp-changedプラグインで変更されたファイルだけを処理させる
    15. これからはじめるGulp（14）：gulp-cachedプラグインで変更されたSCSSファイルだけを処理させる
    16. これからはじめるGulp（15）：gulp-responsiveプラグインを使ったレスポンシブイメージ作成の自動化
    17. これからはじめるGulp（16）：gulp-image-resizeプラグインを使ってサムネイルやレスポンシブイメージを作る
    18. これからはじめるGulp（17）：SketchTool（Sketch 3 command line tool）を使ったアートボード・スライスの書き出しとgulp-execプラグインを使ったSketchtoolの呼び出し
    19. これからはじめるGulp（18）：SketchToolで何ができるのかコマンドと主要なオプションを使ってみる
    20. これからはじめるGulp（19）：gulp-sketchとgulp-execを使ったSketch 3デザインデータの画像書き出し
    21. これからはじめるGulp（20）：Node.jsのChild Processモジュールを使ってgulpからjekyllのbuildコマンドを実行する
    22. これからはじめるGulp（21）：gulp-awspublishプラグインを使ったAmazon S3への静的Webサイトパブリッシュ
    23. これからはじめるGulp（22）：gulp-iconfontとgulp-sketchを使ったアイコンフォント作成の自動化
    24. これからはじめるGulp（23）：gulp-consolidateでgulp-iconfontで作ったアイコンフォントのシンボル一覧HTMLを作る
    25. これからはじめるGulp（24）：gulp.spritesmithプラグインでSpriteイメージを作る
    26. これからはじめるGulp（25）：Hologramとgulp-hologramでスタイルガイドを作る
    27. これからはじめるGulp（26）：Sketch3のサブディレクトリ書き出しに対応したgulp-sketchを試す

    関連記事

    Browserify と browserify-shim でグローバルオブジェクトを扱う

    • Browserify, Gulp

    Middleman 4 の External Pipeline に対応した Skeleten（テンプレート）「middleman-tail」 を作った

    • Middleman 4, Gulp

    gulp-sass で Font Awesome を導入する方法（Bourbon, Neat 対応）

    • Font Awesome, Gulp, Sass

    Middleman 4 の External Pipeline を活用した Sass のプリコンパイルと Browserify のバンドル

    • Middleman 4, Gulp, Sass, Browserify

    Middleman 4 の External Pipeline（外部パイプライン）を試す

    • Middleman 4, Gulp, Browserify

    コメント・フィードバック