かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

gulp サーバー(gulp-connect)で自動的にブラウザを開きたい

Gulp Node.js

gulpでサイト作る時のローカルサーバーに長らくgulp-webserverを使っていたのですが、CSSの変更時にhotreloadが上手く動作せず、リロードさせる関数も無いっぽかったので、reload関数が有り任意のタイミングでリロードさせることができるgulp-connectに乗り換えました。

gulp watch開始時に自動的にブラウザを開いてほしかったのですが、gulp-connectにはブラウザを開くオプションが無いようだったので、自動的に開くようにしてみました。

open のインストール

ブラウザを開く為にopenを使用します。
gulp-connectはopenを使用していないので別途インストールが必要です。

$ yarn add -D open

gulp watch実行時に自動的にloaclhostをブラウザで開くようにする

常に新規ブラウザが開くのもウザイので、NODE_SERVER=1 オプションが有る時だけブラウザで開くようにしたいと思います。

gulpfile.js

const gulp    = require('gulp'),
      connect = require('gulp-connect'),
      open    = require('open');

const webroot = 'app/webroot';

// Server
const server = (cb) => {
  const openFlg = process.env.NODE_SERVER? !!(process.env.NODE_SERVER - 0) : false;
  const webserver = connect.server({
    root: webroot,
    livereload: true,
    port: 3000
  });
  if( openFlg ) {
    open("http" + (webserver.https? 's':'') + "://" + webserver.host + ":" + webserver.port" );
  }
  cb();
};

gulp.task( 'default', gulp.series(server, {tasks...}) );

httpsやhostなどのgulp-connentのオプションにアクセスする為には一度connect.server()したものを変数に入れ、そこからアクセスする必要がありました。

新規ウィンドウを開くdevというコマンドと、デフォルトのタスクを実行するだけのwatchというコマンドを作成します。 package.json

"scripts": {
  "dev": "NODE_SERVER=1 ./node_modules/.bin/gulp default",
  "watch": "./node_modules/.bin/gulp default"
}

新規ウィンドウを開いてデフォルトのwatchタスクなどを実行

$ yarn dev

これで、localhostを新規ウィンドウで自動的に開くことができるようになりました！
open使えばgulpに関わらず開発時に自動的にブラウザ開くってのできそう。

[参考]

コネクト

コネクト