利用我們提供的文檔構(gòu)建腳本和測試工具來為 Bootstrap 的開發(fā)提供幫助。
Bootstrap 使用 npm 腳本 來構(gòu)建文檔并編譯源文件。我們的 package.json 文件中包含了這些用于編譯源碼、運行測試等工作的腳本。這些腳本不適合用在我們的源碼倉庫和文檔之外的地方。
無論是使用 Bootstrap 自帶的構(gòu)建系統(tǒng)還是在本地啟動文檔網(wǎng)站,都需要下載 Bootstrap 源碼并安裝 Node。請按照以下步驟操作并搭建本地運行環(huán)境:
上述步驟完成后,你就可以運行 Bootstrap 所提供的各個命令了。
Bootstrap 自帶的 package.json 文件包含了用于項目本身開發(fā)所需的許多命令。運行 npm run 以查看所有可用的命令。 包含的的主要命令如下:
命令 | 描述 |
---|---|
npm start
|
編譯 CSS 和 JavaScript 源碼、構(gòu)建文檔并啟動一個本地服務(wù)器運行文檔網(wǎng)站。 |
npm run dist
|
創(chuàng)建 dist/ 目錄并將編譯后的文件放置于此目錄中。用到了 Sass、Autoprefixer 和 terser 工具。 |
npm test
|
運行 npm run dist 命令之后在本地運行測試程序 |
npm run docs-serve
|
在本地構(gòu)建并啟動文檔網(wǎng)站。 |
請前往 twbs/bootstrap-npm-starter 模板倉庫,以了解如何如何在你自己的 npm 項目中構(gòu)建和定制 Bootstrap。包括 Sass 編譯器、Autoprefixer、Stylelint、PurgeCSS 以及 Bootstrap 圖標庫。
Bootstrap 使用 Dart Sass 將 Sass 源文件編譯為 CSS 文件(已包含在我們的構(gòu)建流程中了),如果你需要自己編譯 Sass 源碼的話,我們建議您使用相同的工具。我們在先前的 Bootstrap v4 版本中使用的是 Node Sass 工具,但是現(xiàn)在包括 LibSass 及構(gòu)建在 LibSass 上的工具(包括 Node Sass)已經(jīng)被 Sass 官方標記為 不推薦使用 了。
Dart Sass 對浮點數(shù)的舍入精度為 10,并且出于運行效率的考慮,不允許對此值進行調(diào)整。對于生成的 CSS,我們不會在后續(xù)的處理過程中降低此精度(例如壓縮時),但是如果你選擇降低精度的話,我們建議至少保持在 6,以避免瀏覽器的舍入問題。
Bootstrap 使用 Autoprefixer (已包含在我們的構(gòu)建流程中了)工具在構(gòu)建時自動將特定于廠商的屬性前綴添加到某些 CSS 屬性前。對于 CSS 的關(guān)鍵部分,此工具可以讓我們只需要編寫一次然后由自動添加,并且避免了像 Bootstrap v3 版本中那樣手動添加帶有特定于廠商前綴的 CSS 屬性,這樣就節(jié)省我們的時間并減少了代碼量。
我們將需要 Autoprefixer 支持的瀏覽器列表保存在一個單獨的文件中,并提交到 GitHub 倉庫中進行管理。有關(guān)詳細信息,請參見 .browserslistrc。
Bootstrap 使用 RTLCSS 工具處理編譯后的 CSS 并將其轉(zhuǎn)換為支持 RTL(基本上就是將有關(guān)橫坐標軸方向的屬性,例如 padding-left,修改為相反的方向)。這樣我們就只需要編寫一次 CSS,然后使用 RTLCSS 并微調(diào) control 和 value 指令就全部搞定了。
在本地啟動文檔網(wǎng)站需要用到 Hugo 工具,它是通過 hugo-bin 這個 npm 軟件包安裝到本地的。Hugo 是一個快速且可擴展的靜態(tài)站點生成器,它為我們提供的基本功能包括:文件包含、編譯 Markdown 文件、模板等。以下是 Hugo 的用法:
如需了解更多關(guān)于 Hugo 的信息,請參閱其 文檔。
如果你在安裝依賴項時遇到了問題,請卸載所有先前安裝的依賴項及其各個版本(包括全局和本地)。然后,重新運行? npm install
?。
更多建議: