Tuesday, May 22, 2012

Build Twitter Bootstrap on Windows

This post is written using these tools and libraries: Twitter Bootstrap 2.0.3 | nodejs version 0.6.18 | lessc nodejs module version 1.3.0 | uglifyjs nodejs module version 1.2.6.


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

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

13 comments:

  1. Thanks, that worked! On Win7 had to fix the paths to something like this:

    C:\Users\username\AppData\Roaming\npm\uglifyjs

    ReplyDelete
    Replies
    1. Thanks for the comment.

      I 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...

      Delete
  2. 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

    ReplyDelete
  3. "4.9 - Open the file in your Web browser." and then what?

    ReplyDelete
    Replies
    1. Then 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.

      Delete
  4. This comment has been removed by the author.

    ReplyDelete
  5. Getting 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/

    Thanks for the info.

    ReplyDelete
  6. 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

    ReplyDelete
  7. too 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



    ReplyDelete
    Replies
    1. Thank your for taking the time to leave a comment.

      Delete
  8. Well 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 :)

    ReplyDelete
  9. Does not work. Result file are just empty

    ReplyDelete