首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >twitter bootstrap make from source

twitter bootstrap make from source
EN

Stack Overflow用户
提问于 2012-02-03 10:58:30
回答 5查看 13.4K关注 0票数 11

所以我尝试从git://github.com/ twitter /bootstrap.git源代码“构建”twitter bootstrap,然后用git将其克隆到我的本地机器上。

显然,在我的本地机器上,我已经安装了nodejs和npm,并且还安装了所需的node包less和uglify-js。所有的节点模块都在我的系统路径中,所以"lessc“和"uglifyjs”命令在我的终端中是可用的。

进入bootstrap的根目录,我运行"make“命令,输出如下:

代码语言:javascript
运行
复制
(luc)calvins-MacBook.local ttys002 Fri Feb 03 10:51:29 |~/work/luc/static/bootstrap|
calvin$ make
mkdir -p bootstrap/img
mkdir -p bootstrap/css
mkdir -p bootstrap/js
cp img/* bootstrap/img/
lessc ./less/bootstrap.less > bootstrap/css/bootstrap.css
lessc --compress ./less/bootstrap.less > bootstrap/css/bootstrap.min.css
lessc ./less/responsive.less > bootstrap/css/bootstrap.responsive
lessc --compress ./less/responsive.less > bootstrap/css/bootstrap.min.responsive
cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js > bootstrap/js/bootstrap.js
uglifyjs -nc bootstrap/js/bootstrap.js > bootstrap/js/bootstrap.min.js
zip -r docs/assets/bootstrap.zip bootstrap
updating: bootstrap/ (stored 0%)
updating: bootstrap/css/ (stored 0%)
updating: bootstrap/css/bootstrap.css (deflated 85%)
updating: bootstrap/css/bootstrap.min.css (deflated 84%)
updating: bootstrap/css/bootstrap.min.responsive (deflated 76%)
updating: bootstrap/css/bootstrap.responsive (deflated 79%)
updating: bootstrap/img/ (stored 0%)
updating: bootstrap/img/glyphicons-halflings-white.png (deflated 4%)
updating: bootstrap/img/glyphicons-halflings.png (deflated 4%)
updating: bootstrap/js/ (stored 0%)
updating: bootstrap/js/bootstrap.js (deflated 82%)
updating: bootstrap/js/bootstrap.min.js (deflated 74%)
rm -r bootstrap
lessc ./less/bootstrap.less > ./docs/assets/css/bootstrap.css
lessc ./less/responsive.less > ./docs/assets/css/bootstrap-responsive.css
node docs/build
cp img/* docs/assets/img/
cp js/*.js docs/assets/js/
cp js/tests/vendor/jquery.js docs/assets/js/
cp js/tests/vendor/jquery.js docs/assets/js/

接下来我应该怎么做才能在我的html页面中包含我的css文件?我看不到构建/创建的bootstrap.min.css或bootstrap.min.responsive文件位于何处。唯一改变的似乎是创建了一个"bootstrap.zip“,正如上面运行git status所看到的那样。

代码语言:javascript
运行
复制
(luc)calvins-MacBook.local ttys002 Fri Feb 03 10:51:35 |~/work/luc/static/bootstrap|
calvin$ git status
# Not currently on any branch.
# Changes not staged for commit:
#   (use "git add <file>..." to update what will be committed)
#   (use "git checkout -- <file>..." to discard changes in working directory)
#
#   modified:   docs/assets/bootstrap.zip
#
no changes added to commit (use "git add" and/or "git commit -a")
EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2012-02-03 12:32:09

我并不是这方面的专家(我也刚刚开始尝试使用Twitter bootstrap ),但我在运行make时得到的输出与您类似。但是,如果您运行make bootstrap,它会生成一个名为bootstrap的文件夹,据我所知,该文件夹包含编译后的css:

代码语言:javascript
运行
复制
make bootstrap
mkdir -p bootstrap/img
mkdir -p bootstrap/css
mkdir -p bootstrap/js
cp img/* bootstrap/img/
lessc ./less/bootstrap.less > bootstrap/css/bootstrap.css
lessc --compress ./less/bootstrap.less > bootstrap/css/bootstrap.min.css
lessc ./less/responsive.less > bootstrap/css/bootstrap-responsive.css
lessc --compress ./less/responsive.less > bootstrap/css/bootstrap-responsive.min.css
cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js > bootstrap/js/bootstrap.js
uglifyjs -nc bootstrap/js/bootstrap.js > bootstrap/js/bootstrap.min.js

新的bootstrap目录(bootstrap/bootstrap)包含以下内容:

代码语言:javascript
运行
复制
bootstrap/css:
- bootstrap-responsive.css
- bootstrap-responsive.min.css
- bootstrap.css
- bootstrap.min.css

bootstrap/img:
- glyphicons-halflings-white.png
- glyphicons-halflings.png

bootstrap/js:
- bootstrap.js
- bootstrap.min.js

这可能是文档的问题,遗漏了正确的命令,但我不确定。我记忆中的Makefile是如何工作的,如果你在没有目标的情况下发出make,它会默认使用makefile中的第一个目标。在本例中,目标是docs而不是bootstrap

我认为您可以将新的bootstrap目录的内容复制到您通常放置项目的css/js资产的任何位置。

票数 20
EN

Stack Overflow用户

发布于 2012-11-11 15:44:50

如果任何人正在寻找make的替代品来构建Bootstrap (特别是因为make不是Windows友好的),那么有一个build system for Bootstrap with Grunt.js

在大多数情况下,它会产生与makefile相同的结果。grunt -contrib qunit任务将在Grun0.4.0发布时为qunit/phantomjs添加更好的支持(此处:https://github.com/gruntjs/grunt-contrib-qunit)。在此之前,您仍然可以使用内置的Grunt任务进行测试。

票数 3
EN

Stack Overflow用户

发布于 2013-05-13 03:54:11

这对你们中的一些人来说可能很方便。有关用法/选项,请参阅自述文件。这是一个简单的批处理编译引导程序从源代码在Windows上。https://github.com/chazelton/bootstrap。如果你喜欢,你也可以抓取"make.bat“放到你下载的源码中。为了方便起见,这里使用了for。基本用法如下

代码语言:javascript
运行
复制
C:\projects\bootstrap>make (would create sub dir "build" with css, js, img dirs)
C:\projects\bootstrap>make -c (combines bootstrap/responsive to one file)
C:\projects\bootstrap>make -l (outputs source less files under css dir)

请参阅GitHub上自述文件中的其他选项...

注意:需要通过npm全局安装-g和更低版本,所以=> npm安装更少的UglifyJs。如果缺少这些,批处理将提示您。但是,您需要手动安装它们。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9123112

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档