编译Boostrap V3 Less版本的源码涉及NodejsLessGrunt,openharmony开发使用的源码编译

前言

这段时间一直在看Bootstrap,随着逐渐加深免不了进行Boostrap的css和js文件的编译了。涉及的技术并不难，只是电脑环境不一样，偶尔会碰见一两个小坑，现在将过程记录下来。

开始动手

以下假设已经安装好了Nodejs，安装路径为D:Program Filesnodejs。如果没有安装，建议查看另外一篇博文《安装Nodejs、npm、Less（支持生成压缩后的css）》
1、下载源码
http://v3.bootcss.com/getting-started/#download ，下载后解压到某个文件夹下
如 D:bootstrap-3.3.7

2、安装Grunt
在命令行（cmd）输入以下命令

d:cd D:Program Filesnodejsnode_modulesnpmnpm install -g grunt-cli

3、安装Boostrap依赖的扩展包
在命令行（cmd）输入以下命令

d:cd D:bootstrap-3.3.7npm install

笔者进行到这一步时提示下载phantomjs-1.9.8-windows.zip失败，解决方法很简单，手动从网上下载该文件(链接：http://pan.baidu.com/s/1slm41el 密码：iepl)，放到错误提示里提到的目录下（笔者电脑里是C:UsersAdministratorAppDataLocalTempphantomjsphantomjs-1.9.8-windows.zip），删除D:bootstrap-3.3.7node_modules文件夹，重新执行npm -install。
4、至此，就可以执行Grunt的命令来编译了，官方提供以下命令

命令说明grunt dist（仅编译 CSS 和 JavaScript 文件） 重新生成 /dist/ 目录，并将编译压缩后的 CSS 和 JavaScript 文件放入这个目录中。grunt watch（监测文件的改变，并运行指定的 Grunt 任务）， 监测 Less 源码文件的改变，并自动重新将其编译为 CSS 文件。只生成未压缩的文件。grunt test（运行测试用例） 在 PhantomJS 环境中运行 JSHint 和 QUnit 自动化测试用例。grunt docs（编译并测试文档中的资源文件） 编译并测试 CSS、JavaScript 和其他资源文件。在本地环境下通过 bundle exec jekyll serve 运行 Bootstrap 文档时需要用到这些资源文件。grunt（重新构建所有内容并运行测试用例） 编译并压缩 CSS 和 JavaScript 文件、构建文档站点、对文档做 HTML5 校验、重新生成定制工具所需的资源文件等，都需要 Jekyll 工具。这些只有在你对 Bootstrap 深度研究时才有用。

上述命令中，笔者用的最多的是第1个和第2个，笔者采用WebStorm来编辑Bootstrap源码的，WebStorm自带Watcher功能自动将less编译成css,不过笔者建议在编辑Bootstrap源码时停用该功能，采用Grunt watch功能代替。