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

パララックス系のギャラリー(中央ネタ)

ギャラリー的な画像を使ったときに思ったこと。下記が画像の標準的な扱い方かな・・・ 枠自体は高さも幅も決める(li要素のwidth,heightは決める) 基本は画像要素を中央揃え(positionの5 …

no image

横からスクロール sidrの使い方

携帯サイトの場合、端末のサイズが小さいため、メニューなどはどう縮めてもやはり圧迫してしまいます。 そんなとき、クリックさせてスクロールさせるタイプであれば、場所が狭いことが気になりません。本日はそんな …

no image

flexショートハンドに関して

実務でflexをちょこちょこ使うようになりました。 やはりfloatなどで組むことと比べると圧倒的に楽ですね・・・ んで、あまり理解してなかったショートハンド要はgrow,basis,shinkに関し …

no image

tableのレイアウトに関して

tableのcssに関して。 https://github.com/umanari145/css 幅を決めるのでも%表記をしたいときはauto、数値固定で行きたいときはfixed。 詳しくはリンクのt …

no image

vertical-alignの挙動に関して

cssでの中央ぞろえを行う場合、横は案外簡単なんですが、縦の中央ぞろえは結構難しかったりします。 css中央ぞろえ ざっとまとめると以下のようなかんじでしょうか。 テキストのみの1行タイプであればli …

アーカイブ