これからはじめるGulp #10：deprecatedになっていたgulp-connectからgulp-webserverへ乗り換える

はじめに

前回のこれからはじめる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 plugins）に掲載されているかというのも一つの指標となります。今回乗り換えるgulp-webserverは公式のプラグイン一覧には登録されていませんが利用者も多く頻繁にアップデートされ、Streamに対応しているようなのでこちらを試してみます。

gulp-connectとgulp-webserverの違い

gulp-connectはタスク毎に.pipe(connect.reload())を指定していましたが、gulp-webserverは指定したパス下を監視してリロードしてくれるようです。そのため、プロジェクトディレクトリのrootを指定するようなパスの指定./は良い方法ではなさそうです。gulp-webserverではディストリビューション用のディレクトリを指定する方法をとります。

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

gulp-webserverをインストールすためにgulp-connectをアンインストールします。

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

requireとタスクを削除する

gulp-connectに関する以下のコードを削除します。

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

...

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

また、Sassタスクに含まれている.pipe(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)

requireとタスクの作成

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

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

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

指定はこれだけです。Option指定についてはOptionsの項をチェックしてください。LiveReloadはgulp-connectの記事で紹介したプラグインがそのまま使えます。

これで移行は完了です。明日はブラウザ間の同期もできるBrowser-Syncを試してみます。

この記事はこれからはじめるGulp（10）：deprecatedになっていたgulp-connectからgulp-webserverへ乗り換えるの転載です。