More than 5 years have passed since last update.

BrowsersyncのExternal URLをQRコードで表示する

Posted at 2016-10-04

開発中、スマホやタブレットなどでBrowsersyncのExternal URLにアクセスしたい時があると思うんですが、
ターミナルにQRコードが直接表示されたら便利だなと思ってやってみました。

方法

// インストール
$ npm i -D qrcode-terminal

gulpfile.babel.js

'use strict';
import gulp from 'gulp';
import browserSync from 'browser-sync';
import qr from 'qrcode-terminal';

const opt = {
  server: 'app',
  open: true,
  notify: true,
  ghostMode: false
}

gulp.task('browser-sync', ()=>{
  const instance = browserSync.init(opt, ()=>{
    // External URL
    let url = instance.getOption('urls').get('external');
    // Generate qrcode
    qr.generate(url);
  });
});

結果

できました。ちょっと便利。

参考

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up