자동 새로 고침 BrowserSync 부터

6230 단어 BrowserSync자동 새로 고침
이러한 장면 을 상상 해 보 세 요.당신 은 두 개의 모니터 를 켜 고 있 습 니 다.하 나 는 IDE 의 코드 이 고 다른 하 나 는 브 라 우 저 에서 개발 하고 있 는 응용 프로그램 입 니 다.이때 책상 위 에 당신 의 핸드폰 이 놓 여 있 고 핸드폰 에 도 이 개발 중의 응용 프로그램 입 니 다.그리고 코드 를 새로 써 서 ctrl+s 를 누 르 면 저장 합 니 다.이 어 휴대 전화 와 다른 모니터 의 애플 리 케 이 션 이 업 데 이 트 된 효과 로 바 뀌 었 다.당신 은 즉시 효과 가 당신 이 예상 한 것 과 일치 하 는 지 확인 할 수 있 습 니 다.심지어 마 우 스 를 움 직 일 필요 도 없습니다.
생각 나 는데 괜 찮 은 데?응,이 건 그 개발 과정 에서 여러 번 누 르 는 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"
이 명령 은 순수 정적 사이트,즉 html 파일 의 경우 에 만 사 용 됩 니 다.뒤에 있 는--files"css/*.css"는 css 디 렉 터 리 의 접 두 사 를.css 라 는 파일 을 감청 하 는 것 을 말 합 니 다.이 명령 의 start--server 를 주의 하 십시오.이것 은 BrowserSync 가 작은 서버 를 시작 한 것 입 니 다.
동적 사이트 라면 프 록 시 모드 를 사용 합 니 다.예 를 들 어 PHP 사이트 에서 로 컬 서버 를 만 들 었 습 니 다.http://localhost:8080,이 때 는 이러한 명령 입 니 다.

browser-sync start --proxy "localhost:8080" --files "css/*.css"
BrowserSync 는 접근 할 수 있 는 새로운 주 소 를 제공 합 니 다.
자,왜 BrowserSync 는 브 라 우 저 플러그 인 이 필요 하지 않 습 니까?프로젝트 파일 을 처리 하기 위해 서버 형식(직접 또는 프 록 시)을 사 용 했 기 때문이다.기본 적 인 상황 에서 서버 의 웹 페이지 를 방문 하면 이러한 알림 표를 볼 수 있 습 니 다.
hint tag: Connected to BrowserSync
이것 은 현재 탐색 한 웹 페이지 가 BrowserSync 에 연결 되 었 음 을 설명 합 니 다.원본 코드 를 살 펴 보면 BrowserSync 와 관련 된코드 가 추가 되 었 습 니 다.LiveReload 브 라 우 저 플러그 인 이 만 든 것 처럼.이 코드 들 은 브 라 우 저 와 BrowserSync 서버 사이 에 웹 socket 연결 을 만 들 고 감청 파일 이 바 뀌 면 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"]);
이 때 gulp 를 실행 하면 앞의 browser-sync start--server--files"**"와 같 습 니 다.더 많은 용법 예 시 는 gulp-browser-sync 를 보십시오.
전체 옵션
지금까지 소 개 된 것 은 모두 BrowserSync 의 기본 용법 이다.콘 솔 에서 입력 만 시도 하기:
browser-sync
BrowserSync 의 전체 콘 솔 명령 안내 서 를 볼 수 있 습 니 다.그 중에서 이 명령 이 있 는 것 을 볼 수 있다.

browser-sync init
실행 하면 현재 디 렉 터 리 에 설정 파일 bs-config.js 를 생 성 합 니 다.
공식 문 서 를 참조 하여 이 파일 을 수정 한 후에 실행 합 니 다.

browser-sync start --config bs-config .js
bs-config.js 의 전체 설정 정보 로 BrowserSync 를 실행 합 니 다.
자동 리 셋 뿐만 아니 라
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 를 시도 해 보 세 요!시간 을 좀 절약 하면 너 는 아마 더 많이 할 수 있 을 것 이다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
Opencv python 그림 생 성 방법 예시
Perl Gmail 첨부 파일 의 코드 대량 다운로드

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage