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に関わらず開発時に自動的にブラウザ開くってのできそう。
[参考]
- アーティスト: ClariS
- 出版社/メーカー: Aniplex Inc.
- 発売日: 2017/08/09
- メディア: MP3 ダウンロード
- この商品を含むブログを見る