지금은 BrowserSync가 굉장히 편리하다.

대상 독자

기본적인 것 밖에 쓰지 않기 때문에, BrowserSync 사용한 적이 없는 방향입니다.

쓰기 동기

지금까지 아무것도 생각하지 않고 webpack-dev-server를 사용하고 있었습니다만, 조금 기분 전환이 엄청나게 BrowserSync를 시험해 보면, 감동의 기능이 막혀 있었으므로, 각서 김에 여기에 써 남깁니다.

BrowserSync란?

이것입니다.
htps //w w. 음 pmjs. 코 m / Pac 게이지 / B 로 wse r syn c

로컬 서버를 시작하고 파일 변경에 따라 자동으로 리로드를 해주는 도구입니다 만, 그 이외에도 많은 편리 기능이있었습니다. (후술)

자신의 경우 npm scripts에서 다음과 같은 스크립트를 작성하고 움직이고 있습니다.

"local:server": "browser-sync start --server './local/' --config bs-config.js",

왼쪽에서 browser-sync를 시작, --server로 디폴트 브라우저를 기동해, local 디렉토리를 루트로 하고, bs-config.js의 설정대로 이동한다, 라고 하는 느낌입니다.

편리 ① 브라우저 간의 동기화가 자동으로 이루어진다

이 기능이 아마도 BrowserSync의 핵심이 아닐까요?
같은 브라우저가 아니더라도, 동시에 기동하고 있는 브라우저에는 변경이 즉시 반영됩니다.
이런 느낌.



이것이 있으면 브라우저 별 동작 비교 외에도,
PC와 스마트 폰의 화면 사이즈를 동시에 검증 할 수 있습니다 ...!

편리② CSS 가이드나 그리드를 표시해 준다

BrowserSync에는 지정한 포트에서 열 수 있는 설정 관리 화면이 있습니다만, 거기에 기쁜 기능이・・・!



CSS Outlining = CSS에 따라 간략하게 개요 표시
CSS Depth Outlining = 잊어버렸습니다만, 그림자를 붙여 요소의 중첩이 보이는 기능인가. . !
Overlay CSS Grid = 디자인 테스트에 편리한 그리드를 표시합니다.

편리③

네트워크 속도를 시뮬레이션 해줍니다.


로컬 개발을 하면서, 슬로우 네트워크를 재현해 테스트가 가능한 뛰어난 것.

결론

지금까지 로컬 서버에서의 개발에서 제일 우수한 것이 아닐까 생각하고 있습니다.
설정도 간단.
작자에게 압도적 감사···!

읽어 주셔서 감사합니다.