编译Boostrap V3 Less版本的源码(涉及Nodejs、Less、Grunt)

3 篇文章 0 订阅
3 篇文章 0 订阅

前言

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

开始动手

以下假设已经安装好了Nodejs,安装路径为D:\Program Files\nodejs\。如果没有安装,建议查看另外一篇博文《安装Nodejs、npm、Less(支持生成压缩后的css)》
1、下载源码
http://v3.bootcss.com/getting-started/#download ,下载后解压到某个文件夹下
如 D:\bootstrap-3.3.7
这里写图片描述
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 密码: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的命令来编译了,官方提供以下命令

命令说明
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功能代替。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值