빌드 도구
Bootstrap에 포함된 npm 스크립트를 사용하여 설명서를 작성하고, 소스 코드를 컴파일하고, 테스트를 실행하는 방법을 배우십시오.
툴링 설정
부트스트랩은 빌드 시스템에 npm 스크립트 를 사용합니다. package.json 에는 코드 컴파일, 테스트 실행 등을 포함하여 프레임워크 작업을 위한 편리한 방법이 포함되어 있습니다.
빌드 시스템을 사용하고 문서를 로컬에서 실행하려면 부트스트랩의 소스 파일과 Node.js의 사본이 필요합니다. 다음 단계를 따르면 흔들 준비가 된 것입니다.
- 종속성을 관리하는 데 사용하는 Node.js를 다운로드하여 설치 합니다.
- Bootstrap의 소스를 다운로드 하거나 Bootstrap의 저장소 를 포크 하십시오.
- 루트
/bootstrap디렉터리 로 이동하고 package.jsonnpm install에 나열된 로컬 종속성을 설치하기 위해 실행합니다 .
완료되면 명령줄에서 제공되는 다양한 명령을 실행할 수 있습니다.
npm 스크립트 사용
package.json 에는 다음 명령과 작업이 포함되어 있습니다 .
| 일 | 설명 |
|---|---|
npm run dist |
npm run dist/dist/컴파일된 파일이 있는 디렉토리를 생성 합니다. Sass , Autoprefixer 및 terser 를 사용 합니다 . |
npm test |
실행 후 로컬에서 테스트 실행npm run dist |
npm run docs-serve |
문서를 로컬에서 빌드하고 실행합니다. |
npm run모든 npm 스크립트를 보려면 실행 하십시오.
사스
Bootstrap v4는 Sass 소스 파일을 CSS 파일로 컴파일하기 위해 Node Sass 를 사용합니다(빌드 프로세스에 포함됨). 고유한 자산 파이프라인을 사용하여 Sass를 컴파일할 때 생성된 동일한 CSS로 끝내려면 최소한 Node Sass가 수행하는 기능을 지원하는 Sass 컴파일러를 사용해야 합니다. 2020년 10월 26일부터 LibSass 및 그 위에 빌드된 패키지(Node Sass 포함)가 더 이상 사용되지 않기 때문에 이 점에 유의해야 합니다 .
최신 Sass 기능 또는 최신 CSS 표준과의 호환성이 필요한 경우 Dart Sass 는 이제 Sass의 기본 구현이며 Node Sass와 완전히 호환되는 JavaScript API를 지원합니다(Dart Sass의 GitHub 페이지 에 나열된 몇 가지 예외 제외 ).
브라우저 반올림 문제를 방지하기 위해 Sass 반올림 정밀도를 6(기본적으로 Node Sass에서는 5)으로 높였습니다. Dart Sass를 사용하는 경우 컴파일러가 반올림 정밀도 10을 사용하고 효율성을 위해 조정을 허용하지 않기 때문에 조정할 필요가 없습니다.
자동 접두사
Bootstrap은 Autoprefixer (빌드 프로세스에 포함)를 사용하여 빌드 시 일부 CSS 속성에 공급업체 접두사를 자동으로 추가합니다. 그렇게 하면 v3에서 볼 수 있는 것과 같은 공급업체 믹스인이 필요하지 않고 CSS의 핵심 부분을 한 번에 작성할 수 있으므로 시간과 코드가 절약됩니다.
Autoprefixer를 통해 지원되는 브라우저 목록을 GitHub 리포지토리 내의 별도 파일에 유지 관리합니다. 자세한 내용은 .browserslistrc 를 참조하세요.
현지 문서
문서를 로컬에서 실행하려면 Hugo -bin npm 패키지 를 통해 설치되는 Hugo를 사용해야 합니다. Hugo는 기본 포함, Markdown 기반 파일, 템플릿 등을 제공하는 매우 빠르고 확장 가능한 정적 사이트 생성기입니다. 시작하는 방법은 다음과 같습니다.
- 위의 도구 설정 을 실행하여 모든 종속성을 설치합니다.
- 루트
/bootstrap디렉터리npm run docs-serve에서 명령줄에서 실행합니다. http://localhost:9001/브라우저에서 열고 짜잔.
설명서 를 읽고 Hugo 사용에 대해 자세히 알아보세요 .
문제 해결
종속성 설치에 문제가 발생하면 모든 이전 종속성 버전(글로벌 및 로컬)을 제거하십시오. 그런 다음 을 다시 실행 npm install하십시오.