これからはじめる Gulp シリーズこれからはじめるGulp（10）：deprecatedになっていたgulp-connectからgulp-webserverへ乗り換える

はじめに

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

前回のこれからはじめるGulp（9）：Ruby版Sassが使えるgulp-ruby-sassへの乗り換えでRuby版のSassを使う方法について紹介しました。今回は12月4日に紹介したgulp-connectがそもそも非推薦扱いとなっていたため後継のgulp-webserverに乗り換えてみたいと思います。

非推薦となったgulp-connect

Gulpには色々なプラグインがありますが非推薦となるプラグインがあるようです。理由は様々だと思いますがgulp-connectに関してはStreamに対応していなかったりと気になるところはありました。gulp.run()が非推薦となったことと同様にGulpのお作法に則っていないプラグインは非推薦となったり今後アップデートされないことになると思うので要注意です。

一つの指標としてそのプラグインが公式に認められているかどうか、公式のプラグイン一覧に掲載されているかで判断できます。今回乗り換えるgulp-webserverは公式のプラグイン一覧には登録されていませんが利用者も多く頻繁にアップデートされているようなのでこちらにしました。ちなみにgulp-webserverをフォークしたgulp-server-livereloadは公式のプラグインに登録されています。

このページGulp pluginsで検索して該当のプラグインが見つかれば公認のプラグインということです。

gulp-connectとgulp-webserverの違い

gulp-connectはタスク毎にconnect.reload()を指定していましたが、gulp-webserverは指定したGlobを監視してリロードしてくれるようです。

gulp-connectのアンインストール

$ sudo npm uninstall gulp-connect --save-dev
Password:
unbuild gulp-connect@2.2.0

読み込みとタスクを削除する

gulp-connectに関する記述を削除します。

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

...

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

また、Sassタスクに含まれているconnect.reload()も削除しておきます。

gulp.task('sass', function(){
  var srcGlob = paths.srcDir + '/**/*.scss';
  var dstGlob = paths.dstDir;
  var errorMessage = "Error: <%= error.message %>";
  var sassOptions = {
    bundleExec : true,
    style      : 'compressed',
    require    : ['bourbon', 'neat'],
    loadPath   : [
      'vendor/bundle/ruby/2.1.0/gems/bitters-0.10.1/app/assets/stylesheets'
    ]
  }

  gulp.src( srcGlob )
    .pipe(changed( dstGlob ))
    .pipe(plumber({
      errorHandler: notify.onError( errorMessage )
    }))
    .pipe(sass( sassOptions ))
    .pipe(gulp.dest( dstGlob ));
    //.pipe(connect.reload()); <-
});

gulp-server-livereloadのインストール

$ sudo npm install gulp-webserver --save-dev
Password:
gulp-webserver@0.8.8 node_modules/gulp-webserver
├── proxy-middleware@0.5.1
├── connect-livereload@0.4.1
├── open@0.0.5
├── watch@0.11.0
├── node.extend@1.1.3 (is@2.1.0)
├── through2@0.5.1 (xtend@3.0.0, readable-stream@1.0.33)
├── connect@3.3.3 (utils-merge@1.0.0, debug@2.1.0, parseurl@1.3.0, finalhandler@0.3.2)
├── serve-static@1.7.1 (utils-merge@1.0.0, escape-html@1.0.1, parseurl@1.3.0, send@0.10.1)
├── gulp-util@2.2.20 (lodash._reinterpolate@2.4.1, minimist@0.2.0, vinyl@0.2.3, chalk@0.5.1, lodash.template@2.4.1, multipipe@0.1.2, dateformat@1.0.11)
├── tiny-lr@0.1.4 (debug@0.8.1, parseurl@1.3.0, qs@2.2.5, faye-websocket@0.7.3, body-parser@1.8.4)
└── serve-index@1.5.2 (parseurl@1.3.0, batch@0.5.1, http-errors@1.2.7, debug@2.1.0, accepts@1.1.3, mime-types@2.0.3)

読み込みとタスクの作成

gulp-webserverを読み込んでタスクを作ります。

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

gulp.task('serve', function() {
  gulp.src('app')
    .pipe(webserver({
      livereload: true
    }));
});

指定はこれだけです。Option指定についてはOptionsの項をチェックしてください。LiveReloadはgulp-connectの記事で紹介したプラグインがそのまま使えます。これで移行は完了です。明日はブラウザ間の同期もできるBrowser-Syncを試してみます。

シリーズ

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を試す