skillup

技術ブログ

デザイン

BrowserSyncを使ったホットリロードに関して

投稿日:

BrowserSyncを使ったブラウザのホットリロードに関して。

ホットリロードとは「エディタなどで更新があった際にブラウザがすぐに検知して、最新の状態に自動更新してくれる」状態にブラウザをすることです。

一般的にはnpmでパッケージ管理し、gulpやlaravel-mixなどのタスクランナーを使って管理することが多いかと思われます。

とりあえず自分が動いたケースを。

下記がディレクトリ構成です(一般的にはgulpfile.jsがapp_dir以下に来るケースが多いのでちょっと特殊かも。)

gulpfile.js

この状態でnpx gulpを実行するとnodeの内部にインストールされているビルトインのサーバーがlocalhost:3000で立ち上がり、ejsやsassのファイルを更新した時点で自動反映されます。

参考図書

Webデザイナーの仕事を楽にする! gulpではじめるWeb制作ワークフロー入門

ソース

https://github.com/umanari145/front_end

-デザイン
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

一般的なWebサイト制作について

実務で通常のWebサイトを作成するというお仕事が。 Webサイトを改めて作成するっていう経験からはだいぶ遠のいてましたんで、これを機にスキルをまとめたいなーって思います。 サイト作成といっても本格的な …

no image

チェック状態のradio,checkでの要素の表示、非表示

CSS小ネタ系。 チェックボックスやラジオと隣接するテキストボックスがあって、チェックがあった時のみ表示したい。(例えばその他の自由入力欄) 完全に隣接の場合にはCSSの+が使えるんですが、そうもいか …

no image

ブラウザ上でのドラッグ&ドロップの処理

あるシステムから別のシステムにデータを移すとき、一般的にはCSVを使うことが多いかと思います。 今携わっているシステムもそうなのですが、CSVのどの項目を選ぶかを変更したいときってありますよね。 以前 …

no image

スマホサイトの横ぐらつき ~border-size:border-boxigについて

スマホサイトをつくっていたところ、横幅がぐらつくというあり得ない事態に・・・ どうやら内部の幅が100%を超えるときにこの現象が起きてしまうようです。 Contents1 対策1 コンテンツの幅が10 …

no image

object-fitによる画像比率を保ったセンタリング

CSSでレイアウトを組むときにネックになるのが画像のレイアウトです。 と言うのも可変要素であり、幅を制御するのが難しかったりします。 参考リンク メインで使う画像のcssについて まあ縦長とか横長とか …