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

GIMPでの薄膜レイヤー&縁取り

えー本業はプログラマなんですが、ガチンコ塾のブログの画像なんかもたまに作ってます。 まーほとんど素人なんですけどね(笑) 一応昔にPhotoshopとIllustratorは使ってました。今では忘却の …

no image

css flexboxについて どんなことができるのか?

CSSを使い始めて数年がたっていますが、いまだに最適な書き方がようわかっとりません(汗) 特に難しいのが全体的なレイアウトの決定でfloatとかpositionなんかを使っていろいろと悪戦苦闘していま …

no image

UIまで手が回らないプログラマのための画像加工サービス&ツール紹介など

本業はプログラマ―なんですが、ガチンコ塾のブログの画像を作る程度の加工などをちょこちょこやってます。 プログラマーといえどUIを全く気にしないのは問題ですし、中小企業だと広く浅くできる人間が求められる …

no image

CSSの概要 主に適用ルールについて

昨日までリーダブルコードを読みまして正しいコーディングについて書いてきました。 本日からは正しいCSSについてみていこうと。 Contents1 CSSとは?2 CSSの書き方3 CSSの挙動4 プロ …

no image

backgroundやbox系のプロパティ

cssのbackground-imageについてちょっとまとめ。urlとかrepeatとかはとりあえずぬきで Contents1 背景画像の位置 background-postion2 背景画像のサイ …

アーカイブ