자동 새로 고침 BrowserSync 부터
6230 단어 BrowserSync자동 새로 고침
생각 나 는데 괜 찮 은 데?응,이 건 그 개발 과정 에서 여러 번 누 르 는 F5 를 간단하게 생략 하 는 거 야.
자동 새로 고침
'자동 새로 고침'은 새로운 개념 은 아니 지만'보 이 는'미리보기 효과 에 주목 하 는 전단 개발 자 에 게 는 매우 좋 고 많은 시간 을 절약 할 수 있 습 니 다.
나 도 이제 야 이 개념 을 알 게 된 것 은 아니다.그 전에 나 는 라 이브 릴 로드 를 사용 해 왔 다.이름 에'자동 새로 고침'이 라 고 더 뚜렷하게 쓰 여 있 는 도구 다.LiveReload 는 주로 브 라 우 저 플러그 인 과 함께 사용 되 며,훌륭 한 자동 새로 고침 도구 입 니 다.
하지만 지금 제 가 소개 하고 자 하 는 것 은 BrowserSync 입 니 다.다음 내용 에서 볼 수 있 을 것 이다.그것 은 업데이트 되 고 편리 한 개발 도구 이다.
BrowserSync
라 이브 릴 로드 가 부족 한 점 은 브 라 우 저 플러그 인 을 맞 춰 야 한 다 는 점 이다.그러나 플러그 인 은 브 라 우 저 에 달 려 있 습 니 다.Chrome 과 Firefox 는 모두 사용 가능 한 플러그 인 이 있 지만 IE 나 제 핸드폰 의 브 라 우 저 는 이 럴 수 없습니다.이 때 는 페이지 에
BrowserSync 의 일반적인 법칙 은 브 라 우 저 플러그 인 이 필요 하지 않 고 코드 를 수 동 으로 추가 하지 않 아 도 됩 니 다.콘 솔 명령 한 마디 이후 휴대 전화 에서 든 컴퓨터 에서 든 몇 개의 브 라 우 저(테스트,IE8+및 기타)를 사용 하 든 자동 으로 새로 고침 하 는 기능 을 가 질 수 있다.
BrowserSync 는 어떻게 했 어 요?그것 의 설치 와 사용 을 보십시오.
설치 및 사용
설치Node후 npm 를 통 해 BrowserSync 설치:
npm install -g browser-sync
browser-sync start --server --files "css/*.css"동적 사이트 라면 프 록 시 모드 를 사용 합 니 다.예 를 들 어 PHP 사이트 에서 로 컬 서버 를 만 들 었 습 니 다.http://localhost:8080,이 때 는 이러한 명령 입 니 다.
browser-sync start --proxy "localhost:8080" --files "css/*.css"자,왜 BrowserSync 는 브 라 우 저 플러그 인 이 필요 하지 않 습 니까?프로젝트 파일 을 처리 하기 위해 서버 형식(직접 또는 프 록 시)을 사 용 했 기 때문이다.기본 적 인 상황 에서 서버 의 웹 페이지 를 방문 하면 이러한 알림 표를 볼 수 있 습 니 다.
hint tag: Connected to BrowserSync
이것 은 현재 탐색 한 웹 페이지 가 BrowserSync 에 연결 되 었 음 을 설명 합 니 다.원본 코드 를 살 펴 보면 BrowserSync 와 관련 된
변 경 된 파일 이 css 라면 BrowserSync 는 전체 페이지 를 새로 고치 지 않 고 이 css 파일 을 직접 요청 하고 현재 페이지 로 업데이트 합 니 다.효 과 는 다음 과 같 습 니 다.
분명히 이 느낌 은 더욱 빠르다.한 페이지 애플 리 케 이 션(SPA)을 개발 하고 있다 면 전체 페이지 를 새로 고침 하면 초기 보기 로 돌아 가 고,뒤의 한 보 기 를 수정 해 야 할 때 이 기능 은 특히 유용 하 다.
파일 일치
BrowserSync 명령 을 보면 중요 한 것 은--files 를 통 해 감청 할 파일 을 지정 하 는 것 입 니 다.이 파일 매 칭 모드(glob 라 고 함)에 대한 자세 한 정 보 는 isaacs's minimatch 를 참고 하 십시오.
제 시 도 를 통 해 모든 항목 을 감청 하고 싶 을 뿐 이 라면 이렇게 쓸 수 있 습 니 다.
browser-sync start --server --files "**"
이 때 BrowserSync 는 파일 변화 가 css 인지 정확하게 판단 합 니 다.
Gulp 에 가입 해서 사용
Gulp 는 현재 유행 하 는 자동화 도구 이지 만 BrowserSync 에는 Gulp 플러그 인 버 전이 없습니다.필요 하지 않 기 때 문 입 니 다.BrowserSync 는 독립 된 API 가 있 습 니 다.gulp 의 task 로 등록 하면 됩 니 다.다음은 gulpfile.js 의 예제 입 니 다.
var gulp = require('gulp');
var browserSync = require('browser-sync');
gulp.task('browser-sync', function() {
browserSync({
files: "**",
server: {
baseDir: "./"
}
});
});
gulp.task('default', ["browser-sync"]);전체 옵션
지금까지 소 개 된 것 은 모두 BrowserSync 의 기본 용법 이다.콘 솔 에서 입력 만 시도 하기:
browser-sync
BrowserSync 의 전체 콘 솔 명령 안내 서 를 볼 수 있 습 니 다.그 중에서 이 명령 이 있 는 것 을 볼 수 있다.
browser-sync init공식 문 서 를 참조 하여 이 파일 을 수정 한 후에 실행 합 니 다.
browser-sync start --config bs-config .js자동 리 셋 뿐만 아니 라
BrowserSync 는 자동 새로 고침 도구 일 뿐만 아니 라 다른 기능 도 많이 있 습 니 다.기본 설정 에서 BrowserSync 는 여러 브 라 우 저 에서 스크롤 바 위치,폼 행동 과 클릭 이 벤트 를 동기 화 합 니 다.예 를 들 어 폼 행동 의 상황 은 다음 과 같다.
나 는 이것 이 매우 멋 진 기능 이 라 고 생각한다!책상 위 에 다양한 화면 사이즈 의 휴대 전 화 를 놓 고 테스트 하 는 모습 을 상상 해 보 세 요.하 나 를 조작 하면 다른 것 을 이 끌 어 갈 것 입 니 다!물론 이 기능 들 은 필요 없 을 때 닫 을 수도 있다.
UI 인터페이스 및 기타
다음은 BrowserSync 의 콘 솔 출력 예제 입 니 다.
UI 라 는 주 소 를 볼 수 있 습 니 다.BrowserSync 가 제공 하 는 간단 한 제어 판 입 니 다.BrowserSync 에서 가장 자주 사용 하 는 몇 가지 설정 옵션 은 이 판 넬 에서 조정 할 수 있 습 니 다.
판 넬 에서 그 전형 적 인 원 격 디 버 깅 도구 weinre 도 여기에 있 습 니 다.
BrowserSync 에서 현재 알 고 있 는 문제
앞에서 언급 한 바 와 같이 변 경 된 파일 이 css 라면 BrowserSync 는 새로 고침 없 이 업 데 이 트 됩 니 다.이것 은 좋 은 효과 입 니 다.scss,less 등 프 리 컴 파일 러 를 사용 하면 감청 을 컴 파일 된 css 파일 로 설정 하면 됩 니 다.
하지만 웹 애플 리 케 이 션 프레임 워 크 레일 스에 문제 가 있 을 수 있 습 니 다.개발 환경 에서 css 는 요청 되 었 을 때 컴 파일(Rails 는 일반적으로 sass 를 사용 합 니 다)을 브 라 우 저 에 되 돌려 줍 니 다.캐 시 만 있 고 실제.css 파일 은 없습니다.따라서 BrowserSync 의 파일 감청 은 가리 킬 수 없 으 며,sass 파일 을 가리 키 면 브 라 우 저 는 전체 페이지 를 새로 고 치 는 형식 으로 만 처 리 됩 니 다.이 문 제 는 Github 의 issue 를 참조 할 수 있 습 니 다.
하나의 실행 가능 한 해결 방법 은 Rails 의 Asset Pipeline 을 다른 도구 로 대체 하 는 것 이다.하지만 여기 서 저 는 또 다른 솔 루 션 을 추천 합 니 다.LiveReload(LiveReload)를 사용 하 는 것 은 수준 이 있 습 니 다!).테스트 를 통 해 LiveReload 는 Rails 에서 도 css 의 빠 른 업 데 이 트 를 처리 할 수 있 습 니 다.LiveReload 가 이 를 실현 하 는 원리 에 대해 서 는 Lightning-Fast Sass Reloading in Rails 를 읽 을 수 있 습 니 다.
BrowserSync 가 미래 에 이 문 제 를 해결 할 수 있 기 를 기대한다.
결어
개발 에서 더 유창 하고 빠 르 고 싶다 고요?BrowserSync 를 시도 해 보 세 요!시간 을 좀 절약 하면 너 는 아마 더 많이 할 수 있 을 것 이다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
지금은 BrowserSync가 굉장히 편리하다.기본적인 것 밖에 쓰지 않기 때문에, BrowserSync 사용한 적이 없는 방향입니다. 지금까지 아무것도 생각하지 않고 webpack-dev-server를 사용하고 있었습니다만, 조금 기분 전환이 엄청나게 Brow...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
