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

Install Node on Windows with NPM tutorial

This post is written for nodejs version 0.6.18. 


Intro:

It took me a while to figure out a few things after installing node so this is just a few notes to help you get started.

Steps:

- Download and install node from http://nodejs.org

- Open a command-line in window using Run As Administrator

- make a test folder and go to that folder: c:\node_test\

- Create a hello world script: echo console.log("Hello World") > hw.js

- Run the test: node hw.js
Expected output: Hello World
Check: If you see an error here, something is wrong with your nodejs installation. Check your path maybe...

- Enter npm install less  to install the less module. It does not really matter what module you install, this just proves that the package manager called NPM works.
Expected outcome: NPM downloading modules
Check: If you see an error here, something is wrong with your nodejs installation or with NPM.

- Your working directory should have a folder node_modules and a sub folder less.
Check: If you don't have those folders then something is wrong with where NPM installs modules.

- To test the module: node node_modules\less\bin\lessc -help
Expected output: a help message from less
Check: If you get an error, something is wrong with where or how NPM installs modules.

If you got to this point without any errors, you are good to go.

I hope this helps

- Sly