Gulp Browser-Syncで、iPhone、Andoroid、Mac、Windowsでのテスト効率化

先日、Web Starer Kitを紹介したときに、$ Gulp Serve を使い、localhostサーバーを立てました。その環境下でクロスブラウザなどの動作検証を行うときに便利なBrowser-Syncをご紹介します。

 

まずは動画をご覧ください

 

使い方

 

今回はweb starter kit環境下でsyncを行いますので、環境が整っていない方は、前回の「Google:マルチプラットフォームテンプレのWeb Starter Kitを触ってみた」をお読みください。

 

  1. browser-syncをインストール

    コマンドラインより、brower-syncをインストールします。

    $ sudo npm install -g browser-sync
    
    
  2. web-starter-kit階層に入り、gulpのlocal serverを起動します。
    $ cd ~/web-starter-kit/
    $ gulp serve
    

    Externalに表示された、アドレスにブラウザよりアクセスしてください。
     

  3. ブラウザが同期されました。

 

ブラウザが同期された後は、ブラウザの動作確認が一回の操作で確認することができるので、工数が削減できそうです。

動画内で、iPhoneに付いているケースですが、OneMeサイトで販売しております。

 

 

関連タグ: 

この記事をシェアする:

Author
この記事を書いた人:阿部 正幸

モチヤ株式会社 阿部正幸

KDDIウェブコミュニケーションズに入社後、CPIブランドのACE01をプロダクトマネージャーとしてローンチし、エバンジェリストとしてイベント登壇を行う。
現在は、KDDIウェブコミュニケーションズを退職し、モチヤ株式会社で、Web制作、受託開発、コンサルティングを行なっている。