시작하는 것은 간단합니다. After installing Node.js from https://www.php.cn/link/8621cdddd12002436862912970737eda
, use npm (Node Package Manager) to install BrowserSync globally:
(Mac 및 Linux 사용자는 가 필요할 수 있습니다.)
시작하기 :
HTML 및 CSS 파일 ( "CSS"하위 폴더 내)을 포함하는 프로젝트 폴더 ( "테스트")가 있다고 가정 해 봅시다. 명령 줄에서 :
프로젝트 디렉토리로 이동하십시오 :
browserSync 시작 :
<code class="language-bash">npm install browser-sync -g</code>
이것은 서버를 시작하여 "CSS"폴더 내의 모든 파일과 sudo 파일을 모니터링합니다. 콘솔에는 로컬 및 외부 액세스를위한 URL과 UI 제어판이 표시됩니다. 네트워크의 모든 브라우저에서 "외부"URL을 열어 사이트를 볼 수 있습니다. HTML 또는 CSS로 변경하면 자동 새로 고침이 발생합니다. UI 패널 ( "UI 외부"URL을 통해 액세스 가능)은 설정, 동기화 옵션, URL 기록, 원격 디버깅 등을위한 컨트롤을 제공합니다. 자세한 지침과 옵션은 에서 제공됩니다
<code class="language-bash">browser-sync --version</code>
주요 특징 및 이점 :
라이브 재 장전 : 코드 수정시 연결된 모든 연결 브라우저에 대한 즉각적인 페이지 업데이트. CSS는 지능적으로 다시 주사되어 전체 페이지 재 장전을 피합니다
상호 작용 동기화 : - 미러 스크롤, 클릭 및 모든 장치의 입력을 양식 입력. 이것은 모바일 테스트에 매우 중요합니다.
원격 검사관 (Weinre) : 크롬 검사관과 같은 인터페이스를 사용한 원격 디버깅 기능.
시뮬레이션 된 느린 연결 : 느린 네트워크에서 사이트의 성능을 테스트하십시오.
URL 히스토리 추적 :
모든 장치에서 이전에 본 URL을 쉽게 공유하고 탐색합니다.
새로운 웹 기반 UI : BrowserSync 설정 및 기능 관리를위한 직관적 인 제어판.
빌드 도구 호환성 : - 는 Gulp, Grunt 및 기타 작업 러너와 완벽하게 작동합니다.
자주 묻는 질문 :
-
BrowserSync는 어떻게 워크 플로우를 향상 시키는가?
BrowserSync는 여러 장치에서 실시간 피드백을 제공하여 개발 시간을 크게 줄여서 지속적인 수동 새로 고침이 필요하지 않습니다. 동기화 된 상호 작용 및 URL 히스토리와 같은 기능은 효율성을 더욱 향상시킵니다. -
주요 기능?
라이브 재 장전, 동기화 스크롤/클릭/양식, 원격 디버깅, 시뮬레이션 된 느린 연결, URL 기록 및 사용자 친화적 인 UI.
-
설치?
Node.js를 설치 한 다음
-
서버를 시작 하는가?
- (필요에 따라 파일 경로 조정)
사전 처리기 (SASS/LESS), 작업 주자 (Gulp/Grunt) 및 정적 사이트 생성기 (Jekyll/Hugo)와의 호환성?
양식 입력 처리? 양식 입력은 모든 연결된 장치에서 미러링됩니다.
URL 히스토리 관리?
Browsersync 트랙 및 장치 전체의 브라우징 기록에 쉽게 액세스 할 수 있습니다.
-
Browsersync 2.0은 Windows, MacOS 및 Linux에 사용할 수있는 무료 오픈 소스 도구입니다. 시도해보십시오 - 당신은 그것을 후회하지 않을 것입니다!
