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安装生产环境所需的包；
npm install --dev moduleName安装开发环境所需的包；
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，在里面执行npm install bootstrap@4.0.0-alpha.5。
5、局部安装grunt
拉下bs4.0.0之后，会发现里面有一个node_modules文件夹，再里面有三个文件夹，进入bootstrap文件夹执行npm install grunt。
5、安装package.json里面的依赖
打开package.json我们会看到很多依赖包，执行npm install把所有的包安装一遍。这一步非常耗时，需要耐心的等。实在不行，可以用cnpm。现在我用cnpm命令来替代npm命令，来一次cnpm install。虽然也需要几分钟的时间（视网速而定），但已经是快了很多。总之只要是大规模下载包，就优先考虑cnpm。
到此，所有的准备工作完成，bootstrap文件夹中多了一个node_modules文件夹，含有2万多个文件，2700多个文件夹。。。无力吐槽。
6、准备就绪，开工构建一次dist
我们看看bs官方提供的build-tools一页的文档，其中提到“grunt dist creates the /dist directory with compiled files. ”，也就是说grunt dist命令用于生成dist文件夹，就是distribution（分发）文件夹。
为了测试，我先把已有的dist文件夹改名成dist_bak，然后执行grunt dist。
你会发现到Running "babel:dist" (babel) task时候出错，提示冲突。好吧，我修改命令grunt dist --force，再来一次，刚才的冲突没了，但又有Running "uglify:core" (uglify) task出错，而且无法修复。
其实Node.js这种民间搞的生态圈就是这个样子，bs官方用Grunt可能什么问题也没有，原封不动的拿过来咱们自己用，就各种出错，原因是每个人的电脑环境不同，比如我是Windows你是Mac，而且几千个node模块都是靠另外下载，结果每个人下载的模块都可能有几个包的差异，这样的软件大合集，跟大公司开发的集成软件在稳定性上完全没法比。
最后我们去dist文件夹看一看，发现了新的dist文件夹已经构建好，我们拿它对比备份的dist_bak文件夹，发现里面果然少了一个文件，是js\bootstrap.min.js，原因就是Running "uglify:core" (uglify) task出错。其他文件，有一些跟备份文件完全相同，有一些有所不同，原因是我们跟bs官方用的模块版本略有区别。
至此，Grunt构建Bootstrap分发包的过程结束，尽管没有完全成功。
7、grunt watch监视Sass文件的修改
根据bs的官方文档，grunt watch用于监视Sass文件的修改，所以我们测试一下。
先看看备份的bootstrap.css，是127,534 字节。
然后我运行grunt watch，我在_custom.scss文件新增一行$font-size-h1: 12.5rem;，12.5rem是一个很大的字号了。你会发现命令行有重新构建的过程，dist里面的bootstrap.css，是127,535 字节，多了一字节。不过，构建过程又有报错（无力吐槽），所以执行过程还没来得及构建js文件就自动退出了，dist文件夹里面连js文件夹都没有。
练习到此为止。
结论：
1、如果你在实践中没有发现报错，那么恭喜你，你可以使用Grunt。但我仍然建议你改用gulp，自己写gulpfile.js，因为gulpfile.js的写法比Grunt简单得多，运行起来也快得多。可以参考我写的gulp v4编译Bootstrap-sass v3.3.7。
2、如果你跟我一样发现了报错，那么还是用gulp吧。
