Question

所以我试图从源代码git：//github.com/twitter/bootstrap.git“构建”twitter bootstrap，然后我将它克隆到我的本地机器上。

显然，在我的本地机器上，我安装了nodejs和npm，并且安装了所需的节点包和uglify-js。并且所有节点模块都在我的系统路径中，因此我的终端中可以使用“lessc”和“uglifyjs”命令。

进入bootstrap的根目录，我运行“make”，这是输出： -

(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所示。

(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")

Answer 1

在任何想象中都不是这方面的专家（刚刚开始使用Twitter引导程序），但是当我运行make时，我得到了与你类似的输出。但是，如果您运行make bootstrap，它会生成一个名为bootstrap的文件夹，其中包含已编译的css，据我所知：

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）包含以下内容：

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资产的位置。

Answer 2

如果有人正在寻找make的替代方案来构建Bootstrap（特别是因为make不是Windows友好的），那就是build system for Bootstrap with Grunt.js

在大多数情况下，它会产生与makefile相同的结果。当grunt 0.4.0发布时，grunt-contrib-qunit任务将为qunit / phantomjs添加更好的支持（在这里找到：https://github.com/gruntjs/grunt-contrib-qunit）。在此之前，您仍然可以使用内置的Grunt任务进行测试。

Answer 3

对于你们中的一些人来说这可能很方便。有关用法/选项，请参阅自述文件。它是一个简单的批处理，用于从Windows上的源代码编译引导程序。 https://github.com/chazelton/bootstrap。如果您愿意，也可以抓取“make.bat”并将其放入下载的源代码中。为方便起见，它在这里分叉。基本用法

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安装UglifyJs和Less so =＆gt; npm install less -g。批次将提示您是否缺少这些。但是，您需要手动安装它们。

Answer 4

我安装了gnuwin32并且在我的路径上，我npm install - 编辑uglifyjs，recess和jshint。然后，我在Makefile的顶部添加了以下内容：

SHELL=c:/windows/system32/cmd.exe
MKDIR=mkdir.exe -p
UGLIFYJS=uglifyjs
RECESS=recess
JSHINT=jshint

第一行（SHELL =）解决了这个问题：

w:\github\bootstrap>make bootstrap
mkdir.exe -p bootstrap/js
make: Interrupt/Exception caught (code = 0xc00000fd, addr = 0x4227d3)

第二行（MKDIR =）是为了防止使用dos mkdir命令（不理解-p标志）。

然后对所有可执行引用进行全局搜索/替换：

-       mkdir -p bootstrap/js
+       $(MKDIR) bootstrap/js
        cat js/bootstrap-transition.js js..
-       ./node_modules/.bin/uglifyjs -nc...
+       $(UGLIFYJS) -nc bootstrap/js/boot..
etc.

现在make bootstrap完成没有任何问题。

Answer 5

您应首先下载一些节点包

尝试

sudo npm install recess

然后

sudo npm install jshint

然后使用

make bootstrap

目录中的

twitter bootstrap来源

5 个答案: