编译Boostrap V3 Less版本的源码（涉及Nodejs、Less、Grunt）

骑猪看日落 2021-09-11 06:36 262阅读 0赞

# 前言 #

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

# 开始动手 #

以下假设已经安装好了Nodejs，安装路径为D:\\Program Files\\nodejs\\。如果没有安装，建议查看另外一篇博文[《安装Nodejs、npm、Less（支持生成压缩后的css）》][Nodejs_npm_Less_css]  
1、下载源码  
[http://v3.bootcss.com/getting-started/\#download][http_v3.bootcss.com_getting-started_download] ，下载后解压到某个文件夹下  
如 D:\\bootstrap-3.3.7  
![这里写图片描述][SouthEast]  
2、安装Grunt  
在命令行（cmd）输入以下命令

d:
    cd D:\Program Files\nodejs\node_modules\npm
    npm install -g grunt-cli

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

d:
    cd D:\bootstrap-3.3.7
    npm install

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

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

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

[Nodejs_npm_Less_css]: http://blog.csdn.net/lhtzbj12/article/details/54882499
[http_v3.bootcss.com_getting-started_download]: http://v3.bootcss.com/getting-started/#download
[SouthEast]: /images/20210809/06ef0af977ec4849ad7768866b4733c7.png
[http_pan.baidu.com_s_1slm41el]: http://pan.baidu.com/s/1slm41el