twitter bootstrap make from source

Question

So I am trying to "build" twitter bootstrap from source git://github.com/twitter/bootstrap.git and I git clone it to my local machine.

Obviously, on my local machine, I have had nodejs and npm installed and the required node packages less and uglify-js installed as well. And all node modules are in my system path so "lessc" and "uglifyjs" commands are available in my terminal.

Going into bootstrap's root directory, I run "make" and this is the output:-

(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/

What should I do next to include my css files in my html page? I don't see where the built/created bootstrap.min.css or bootstrap.min.responsive files are located. The only thing that seemed to have changed is that a "bootstrap.zip" was created, as seen by running git status above.

(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

If anyone is looking for an alternative to make for building Bootstrap (especially since make is not Windows friendly), there's a build system for Bootstrap with Grunt.js

For the most part it produces the same results as the makefile. The grunt-contrib-qunit task will add better support for qunit/phantomjs when grunt 0.4.0 is released (found here: https://github.com/gruntjs/grunt-contrib-qunit) . Until then you can still work with the built in Grunt tasks for testing.

Answer 2

You should download some node packages first

Try

sudo npm install recess

and then

sudo npm install jshint

Then use

make bootstrap

in the directory of the MakeFile

Answer 3

This might be handy for some of you. See Readme for usage/options. Its a simple batch to compile up bootstrap from source on Windows. https://github.com/chazelton/bootstrap. You can also just grab "make.bat" if you like and drop it in your downloaded source. It is forked here for convenience. Basic usage below

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)

See additional options in readme on GitHub...

NOTE: requires UglifyJs and Less to be installed via npm globally so => npm install less -g. The batch will prompt you if these are missing. However you'll need to install them manually.

Answer 4

I have gnuwin32 installed and on my path, and I've npm install-ed uglifyjs, recess, and jshint. I then made the following additions to the top of the Makefile:

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

The first line (SHELL=) fixes this problem:

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

the second line (MKDIR=) is to prevent the dos mkdir command being used (which doesn't understand the -p flag).

Then a global search/replace on all the executable references:

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

Now make bootstrap finishes without any problems.

Answer 5

Not an expert on this by any stretch of the imagination (just started to play around with Twitter bootstrap as well), but I get a similar output as you when I just run make. However, if you run make bootstrap it generates a folder entitled bootstrap that contains the compiled css as far as I can tell:

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

The new bootstrap directory (bootstrap/bootstrap) contains the following:

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

This might be an issue with the documentation, leaving out the correct command, but I'm not sure. My memory of how a Makefile works is if you issue make without a target, it defaults to the first target in the makefile. In this case, that target is docs instead of bootstrap.

I think you can then just copy the contents of the new bootstrap directory to wherever you would normally put the css/js assets for your project.