Embed Size (px)
Citation preview
デザイナーさんでもできる Browsersyncからはじめる作業効率化2016.01.23 Dorpamine vol.1 qumiko totoco (@oratnin)
!
自己紹介 "
• 静岡県西部を中心に活動しているWeb系おかん
• デザイナー兼マークアップエンジニア
• 趣味はフィルム写真と映画鑑賞
• Webアクセシビリティ興味のある方お友達になりましょう
qumiko totocoトトコトデザイン
# @oratnin
本日の ターゲット
コーディングもこなす デザイナーさん
すでに知っている方はごめんなさい><;
早く家に帰りたい マークアッパーさん
ところでコーディングするとき
1日何回ブラウザをリロードしていますか？
指、疲れるよ…ね？
そこで 本日のお題
それ、
Browsersync で解決しちゃいましょう
ファイルの変更を検知して ブラウザをリロードしてくれる
便利なツール
使うもの
Node.js黒い画面 Browsersync
…と、少しのやる気
今日はMacの場合で説明します。
DEMO
デモファイルのダウンロード
https://github.com/oratnin/dorpamine01_demo
環境を 作ってみよう
STEP 2 npm の設定ファイルを作る package.json
$ cd ~/project-name $ npm init
STEP 3 Browsersyncをインストール
$ npm install browser-sync
https://www.browsersync.io/Browsersync
STEP 4 package.jsonにリロード対象と 起動するための設定を追記する
package.json
"scripts":{ "start":"browser-sync start --server --files='./*'" }
• ここでは package.json と同階層（~/project-name）のファイルに変更があったとき、リロードするようにしています。
STEP 5 起動してみよう！
$ npm start
STEP 6 ブラウザが起動して localhost:3000 が表示される
ファイルを修正して保存すると… リロードされた！
たったの、これだけ！できそうな気が…しませんか？
こんなこともできる• 複数のブラウザで同時にリロードや スクロール、ページ遷移も同期
• 同じネットワーク(Wi-Fi)内のモバイル端末や PCでも動作の確認が可能
• 他のツールを組み合わせで出来ることが広がる
まとめ
小さな自動化の積み重ねで 時間と気持ちにゆとりを！
1. 日々の小さな作業は自動化ができる
3. ツールの組み合わせで出来ることが広がる
2. Browsersync はファイル変更を検知・リロード
Browsersyncの詳しい設定方法は、追ってブログで公開予定です。http://totoco.org/
Browsersync から 作業効率化はじめよう！
ご清聴ありがとうございました！
Thank You
All photographs taken by me.
https://creativemarket.com/pixelbazaar/
Thanks to
FLATILICIOUS by Pixel Bazaar
and
https://www.eyeem.com/u/fotoco_org
