BrowserSync 2.0으로 워크 플로를 개선하는 방법

BrowserSync 2.0 : 웹 개발 워크 플로우 혁명 browsersync 2.0은 웹 개발자를위한 게임 체인저이며, 라이브 재 장전, 동기화 된 상호 작용, 원격 디버깅 및 인기있는 빌드 도구와 완벽한 통합과 같은 기능으로 워크 플로우를 간소화합니다. 이 강력한 도구는 실시간, 다중 장치 테스트를 용이하게하며 코드 변경이 이루어질 때마다 연결된 모든 브라우저를 즉시 업데이트합니다. 설치 및 설정 :

시작하는 것은 간단합니다. 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 시작 :

npm install browser-sync -g

이것은 서버를 시작하여 "CSS"폴더 내의 모든 <🎜 🎜> 파일과 <🎜 sudo 파일을 모니터링합니다. 콘솔에는 로컬 및 외부 액세스를위한 URL과 UI 제어판이 표시됩니다. 네트워크의 모든 브라우저에서 "외부"URL을 열어 사이트를 볼 수 있습니다. HTML 또는 CSS로 변경하면 자동 새로 고침이 발생합니다. UI 패널 ( "UI 외부"URL을 통해 액세스 가능)은 설정, 동기화 옵션, URL 기록, 원격 디버깅 등을위한 컨트롤을 제공합니다. 자세한 지침과 옵션은 <🎜 🎜 https://www.php.cn/link/926e263363c82458a9ae4883b7dc655 <🎜

에서 제공됩니다

browser-sync --version

주요 특징 및 이점 :

라이브 재 장전 : 코드 수정시 연결된 모든 연결 브라우저에 대한 즉각적인 페이지 업데이트. 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에 사용할 수있는 무료 오픈 소스 도구입니다. 시도해보십시오 - 당신은 그것을 후회하지 않을 것입니다!

위 내용은 BrowserSync 2.0으로 워크 플로를 개선하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!