1恳啥、學習Sass
至本文撰寫時亏拉，Bootstrap v4還在Alpha階段卵贱，v4采用Sass组力，而v3版本同時有Sass和Less版本惧辈，所以你至少要先學習Sass，另外Less也可以學一學绵跷。下面以v4 Alpha 5版本為例膘螟。
2、升級npm
npm是Nodejs自帶的包管理器碾局，你需要學習它的基本命令荆残，大致就那么幾條：
npm install安裝package.json里面的依賴；
npm install -g moduleName來全局安裝某個包净当；
npm install --save moduleName安裝生產環(huán)境所需的包内斯；
npm install --dev moduleName安裝開發(fā)環(huán)境所需的包；
npm update/uninstall moduleName更新或卸載某個包像啼；
npm list查看當前目錄下已安裝的包俘闯；
npm root -g查看全局安裝的包的路徑；
npm help查看全部命令忽冻；
記得用之前必須先升級到最新版：npm install -g npm@4.0.1真朗，npm最新版的版本號去 https://github.com/npm/npm/releases/ 查。為什么升級到最新版很重要僧诚？因為在Node.js的世界里遮婶，各種包的版本更新會帶來難以想象的重大革新，同時解決一系列的bug湖笨，這些革新一般人根本沒精力去了解旗扑，而且Bootstrap的官方肯定是用最新版本的npm，而你如果不用慈省，就會跟官方出現版本差異臀防，你如果遇到一些莫名其妙的問題可不要怪系統也不要怪官方，所以乖乖升級到最新版吧辫呻。
另外清钥，用淘寶NPM鏡像npm install -g cnpm --registry=https://registry.npm.taobao.org可以極大提升拉包速度，從實踐來看放闺，除非你拉單個包（還必須是依賴不多的包）祟昭，可以用npm，其他的一律用cnpm吧怖侦。
3篡悟、安裝grunt-cli
grunt是Bootstrap使用的構建工具，雖然現在流行的是gulp匾寝，但Bootstrap v4使用的是grunt搬葬，而且我們今天練習的是grunt。
全局安裝grunt：npm install -g grunt-cli
4艳悔、把bootstrap@4.0.0-alpha.5拉下來
新建一個文件夾急凰，比如bs4.0.0，在里面執(zhí)行npm install bootstrap@4.0.0-alpha.5猜年。
5抡锈、局部安裝grunt
拉下bs4.0.0之后疾忍，會發(fā)現里面有一個node_modules文件夾，再里面有三個文件夾床三，進入bootstrap文件夾執(zhí)行npm install grunt一罩。
5、安裝package.json里面的依賴
打開package.json我們會看到很多依賴包撇簿，執(zhí)行npm install把所有的包安裝一遍聂渊。這一步非常耗時，需要耐心的等四瘫。實在不行汉嗽，可以用cnpm。現在我用cnpm命令來替代npm命令莲组，來一次cnpm install诊胞。雖然也需要幾分鐘的時間（視網速而定），但已經是快了很多锹杈∧旃拢總之只要是大規(guī)模下載包，就優(yōu)先考慮cnpm竭望。
到此邪码，所有的準備工作完成，bootstrap文件夾中多了一個node_modules文件夾咬清，含有2萬多個文件闭专，2700多個文件夾。旧烧。影钉。無力吐槽。
6掘剪、準備就緒平委，開工構建一次dist
我們看看bs官方提供的build-tools一頁的文檔，其中提到“grunt dist creates the /dist directory with compiled files. ”夺谁，也就是說grunt dist命令用于生成dist文件夾廉赔，就是distribution（分發(fā)）文件夾。
為了測試匾鸥，我先把已有的dist文件夾改名成dist_bak蜡塌，然后執(zhí)行grunt dist。
你會發(fā)現到Running "babel:dist" (babel) task時候出錯勿负，提示沖突馏艾。好吧，我修改命令grunt dist --force，再來一次琅摩，剛才的沖突沒了厚者，但又有Running "uglify:core" (uglify) task出錯，而且無法修復迫吐。
其實Node.js這種民間搞的生態(tài)圈就是這個樣子，bs官方用Grunt可能什么問題也沒有账忘，原封不動的拿過來咱們自己用志膀，就各種出錯，原因是每個人的電腦環(huán)境不同鳖擒，比如我是Windows你是Mac溉浙，而且?guī)浊€node模塊都是靠另外下載，結果每個人下載的模塊都可能有幾個包的差異蒋荚，這樣的軟件大合集戳稽，跟大公司開發(fā)的集成軟件在穩(wěn)定性上完全沒法比。
最后我們去dist文件夾看一看期升，發(fā)現了新的dist文件夾已經構建好惊奇，我們拿它對比備份的dist_bak文件夾，發(fā)現里面果然少了一個文件播赁，是js\bootstrap.min.js颂郎，原因就是Running "uglify:core" (uglify) task出錯。其他文件容为，有一些跟備份文件完全相同乓序，有一些有所不同，原因是我們跟bs官方用的模塊版本略有區(qū)別坎背。
至此替劈，Grunt構建Bootstrap分發(fā)包的過程結束，盡管沒有完全成功得滤。
7陨献、grunt watch監(jiān)視Sass文件的修改
根據bs的官方文檔，grunt watch用于監(jiān)視Sass文件的修改耿戚，所以我們測試一下湿故。
先看看備份的bootstrap.css，是127,534 字節(jié)膜蛔。
然后我運行grunt watch坛猪，我在_custom.scss文件新增一行$font-size-h1: 12.5rem;，12.5rem是一個很大的字號了皂股。你會發(fā)現命令行有重新構建的過程墅茉，dist里面的bootstrap.css，是127,535 字節(jié)，多了一字節(jié)就斤。不過悍募，構建過程又有報錯（無力吐槽），所以執(zhí)行過程還沒來得及構建js文件就自動退出了洋机，dist文件夾里面連js文件夾都沒有坠宴。
練習到此為止。
結論：
1绷旗、如果你在實踐中沒有發(fā)現報錯喜鼓，那么恭喜你，你可以使用Grunt衔肢。但我仍然建議你改用gulp庄岖，自己寫gulpfile.js，因為gulpfile.js的寫法比Grunt簡單得多角骤，運行起來也快得多隅忿。可以參考我寫的gulp v4編譯Bootstrap-sass v3.3.7邦尊。
2背桐、如果你跟我一樣發(fā)現了報錯，那么還是用gulp吧胳赌。
