?
本文檔使用 php中文網(wǎng)手冊(cè) 發(fā)布
學(xué)習(xí)如何使用Bootstrap包含的npm腳本來(lái)構(gòu)建我們的文檔,編譯源代碼,運(yùn)行測(cè)試等等。
工具設(shè)置
Bootstrap 為其構(gòu)建系統(tǒng)使用NPM腳本。我們的package.json包含了處理框架的便捷方法,包括編譯代碼,運(yùn)行測(cè)試等等。
要使用我們的構(gòu)建系統(tǒng)并在本地運(yùn)行我們的文檔,您需要一份Bootstrap源文件和Node的副本。按照這些步驟,你應(yīng)該準(zhǔn)備好搖滾:
下載并安裝Node.js,我們用它來(lái)管理我們的依賴(lài)關(guān)系。
瀏覽到根/bootstrap目錄并運(yùn)行npm install以安裝我們?cè)趐ackage.json中列出的本地依賴(lài)項(xiàng)。
安裝Ruby,安裝捆扎機(jī)用gem install bundler,最后運(yùn)行bundle install。這將安裝所有的Ruby依賴(lài)項(xiàng),比如Jekyll和插件。
Windows用戶(hù):閱讀本指南以使Jekyll無(wú)故障運(yùn)行。
完成后,您將能夠運(yùn)行命令行提供的各種命令。
使用NPM腳本
我們的package.json包含以下命令和任務(wù):
任務(wù) | 描述 |
---|---|
npm run dist | npm run dist用編譯的文件創(chuàng)建/ dist目錄。使用Sass,Autoprefixer和UglifyJS。 |
npm測(cè)試 | 與npm run dist相同,它在本地運(yùn)行測(cè)試 |
npm運(yùn)行文檔 | 構(gòu)建和刪除用于文檔的CSS和JavaScript。然后您可以通過(guò)npm run docs-serve在本地運(yùn)行文檔。 |
運(yùn)行npm run以查看所有npm腳本。
Autoprefixer
Bootstrap使用Autoprefixer(包含在我們的構(gòu)建過(guò)程中)在構(gòu)建時(shí)自動(dòng)將供應(yīng)商前綴添加到某些CSS屬性。這樣做可以節(jié)省時(shí)間和代碼,讓我們可以一次性編寫(xiě)CSS的關(guān)鍵部分,同時(shí)不再需要像v3中那樣的供應(yīng)商混合類(lèi)。
我們通過(guò)我們的GitHub存儲(chǔ)庫(kù)中的單獨(dú)文件來(lái)維護(hù)通過(guò)Autoprefixer支持的瀏覽器列表。有關(guān)詳細(xì)信息,請(qǐng)參閱/package.json。
當(dāng)?shù)匚募?/strong>
在本地運(yùn)行我們的文檔需要使用Jekyll,這是一款體面靈活的靜態(tài)站點(diǎn)生成器,它為我們提供:基本包含,基于Markdown的文件,模板等。以下是如何開(kāi)始它:
運(yùn)行上面的工具安裝程序以安裝Jekyll(站點(diǎn)構(gòu)建器)和其他Ruby依賴(lài)項(xiàng)bundle install。
從根/bootstrap目錄運(yùn)行npm run docs-serve命令行。
http://localhost:9001在您的瀏覽器中打開(kāi),并瞧。
故障排除
如果遇到安裝依賴(lài)關(guān)系的問(wèn)題,請(qǐng)卸載所有以前的依賴(lài)項(xiàng)版本(全局和本地)。然后,重新運(yùn)行npm install。