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

CSS floatについて

以前もちょっと書きましたが、CSSのfloatについて。 http://skill-up-engineering.com/?p=1708への追記 親から見るとfloatした子供は存在しない状態 flo …

no image

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

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

no image

CSSのレイアウト例 その2 部分的な多カラムレイアウト

ナビのボタンや一覧のリスト項目などfloatを使ったいろいろなバリエーションについて。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」 …

no image

CSSはまりやすいポイント ※随時更新予定

CSSにてよく確認するのネタに関して Contents1 中央寄せ2 命名3 テーブル 中央寄せ vertical-alignを指定できるのは「インライン要素」と「テーブルセル」だけ text-ali …

no image

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

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