Intro
In this very short post I explain how to build twitter bootstrap on windows.
1 - Get the source from github
If you go to the Twitter Bootstrap main page there are several download options. In this case you want to download the source code. Click the View project on GitHub button or visit https://github.com/twitter/bootstrap/ and download the latests version using the ZIP button (or clone the repo using git). Extract the ZIP.
2- Install nodejs and the necessary modules
2.1 - Install nodejs (see Install Node on Windows with NPM tutorial)
2.2 - Open a command prompt and CD to the folder where your extracted the source
2.3 - Install lessc: npm install lessc
2.4 - Instal uglifyjs: npm install uglify-js
3 - Create make.bat
Create make.bat at the root of the folder where you downloaded the source. Please note that the batch file deletes and recreates a "build" in your working folder. I know this version is not as complete as the real makefile but that is what I use now.
make.bat
@echo off
rd build /s /q
mkdir build\img
mkdir build\css
mkdir build\js
copy img\* build\img
call .\node_modules\.bin\lessc -x less\bootstrap.less > build\css\bootstrap.min.css
copy /B 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 build\js\bootstrap.js
call .\node_modules\.bin\uglifyjs --ascii bootstrap\js\bootstrap.js > build\js\bootstrap.min.js
rd build /s /q
mkdir build\img
mkdir build\css
mkdir build\js
copy img\* build\img
call .\node_modules\.bin\lessc -x less\bootstrap.less > build\css\bootstrap.min.css
copy /B 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 build\js\bootstrap.js
call .\node_modules\.bin\uglifyjs --ascii bootstrap\js\bootstrap.js > build\js\bootstrap.min.js
4 - Try it using one of the examples from the Twitter Bootstrap examples page
4.1 - Run make.bat
4.2 - Save one of the twitter bootstrap examples by right clicking on it and selecting "Save as link..." and save it to your source folder.
4.3 - Open the example file in your favorite text editor.
4.4 - Locate this line <link href="../assets/css/bootstrap.css" rel="stylesheet"> and replace it with <link href="/css/bootstrap.min.css" rel="stylesheet">
4.5 - Locate this line <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet"> and replace it with <link href="/css/bootstrap-responsive.min.css" rel="stylesheet">
4.6 - Locate the scripts a the bottom of the file
4.7 - Replace the reference to jquery with: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
4.8 - Replace all references to individual bootstrap javascript files by a single reference to bootstrap.min.js: <script src="/js/bootstrap.min.js"></script>
4.9 - Open the file in your Web browser.
Hope this helps
Hope this helps
Thanks, that worked! On Win7 had to fix the paths to something like this:
ReplyDeleteC:\Users\username\AppData\Roaming\npm\uglifyjs
Thanks for the comment.
DeleteI think it means your configuration of NPM installs the modules globally.
My understanding is that it's better to install modules locally (in your project folder) than globally.
I'm on Windows 7 too and here NPN installs modules locally.
I don't know how to change the configuration, I remember reading something about a PATH configuration for NPM. You might want to look that up...
Thanks for a helpful article. With latest source and node 0.8.8 I had to change 'npm install lessc' to 'npm Install less' and it all worked beautifully
ReplyDeleteYou can also try this batch:
ReplyDeleteWindows batch for simulating twitter bootstrap make functionality
As suggested in https://github.com/twitter/bootstrap/pull/3185#issuecomment-8193899
"4.9 - Open the file in your Web browser." and then what?
ReplyDeleteThen you should see a working version of the sample. If you don't, check for errors in your browser's console. I must say I did this procedure since last May so things could have changed.
DeleteThis comment has been removed by the author.
ReplyDeleteGetting this to work was a real pain but I managed to build and compile bootstrap using a patched uglifyjs from http://rebootr.com/how-to-easily-build-twitter-bootstrap-on-windows/
ReplyDeleteThanks for the info.
This might be helpful to you guys. Here is a slightly more advanced version with some options. See Usage/Options in README. Bootstrap Fork included here but all you need is to copy "make.bat" to your bootstrap sources and follow the usage and it should be quite handy. https://github.com/chazelton/bootstrap
ReplyDeletetoo good piece of information, I had come to know about your site from my friend sajid, bangalore,i have read atleast 11 posts of yours by now, and let me tell you, your web-page gives the best and the most interesting information. This is just the kind of information that i had been looking for, i'm already your rss reader now and i would regularly watch out for the new post, once again hats off to you! Thanks a lot once again, Regards, Marathi Jokes in Marathi Language
ReplyDeleteThank your for taking the time to leave a comment.
DeleteWell Bootstrap 3 is easier. All I had to do was build, download jQuery and get a template. Well ill test with it a bit. Thanks for the help anyways :)
ReplyDeleteDoes not work. Result file are just empty
ReplyDelete