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,SmartReleaseをリリース後、現職の「エバンジェリスト」として、web制作に関する様々なイベントに登場

Line@登録よろしくお願いします

Web制作に関する情報や、CPIノベルティのプレゼント、サーバーの無償提供などを定期的に発信しています。
ぜひ、登録ください。