首页 » Bootstrap编译与扩展

扩展和自定义Bootstrap

环境准备

安装npm(Node Package Manager),而npm依赖于Node.js,需先安装:

$ wget http://nodejs.org/dist/v0.6.14/node-v0.6.14.tar.gz
# ./configure && make install
# curl http://npmjs.org/install.sh | sh

编译安装node.js的时间较长,完成后,npm的安装脚本自动下载如 http://registry.npmjs.org/npm/-/npm-1.1.13.tgz 这样的文件,自解压安装。

安装BootStrap编译依赖的工具

# npm install -g less uglify-js jshint recess

这些工具被安装到了 /usr/local/lib/node_modules/

$ ls /usr/local/lib/node_modules/
jshint/    less/      npm/       recess/    uglify-js/ 

粗略了解了这些工具的作用,记录如下:

recess
recess是Twitter的Jacob Thornton开发的一个工具,目的是处理CSS,建立在LESS的基础上。
jshint
jshint类似jslint,是一个JavaScript代码检测工具(也就是JavaScript的lint)。
uglify-js
uglify-js是一个JavaScript分析/压缩/美化工具(uglify的意思是丑化,有点讽刺阿)。

编译BootStrap

github下载BootStrap。

可见BootStrap的目录结构:

$ ls
docs  img  js  less  LICENSE  Makefile  package.json  README.md

这里出现了Makefile文件和less目录。

先测试下用 less 重新生成 bootstrap.css:

$ lessc ./less/bootstrap.less > bootstrap.css
$ lessc --compress ./less/bootstrap.less > bootstrap.min.css

测试下生成 BootStrap:

$ make bootstrap
mkdir -p bootstrap/img
mkdir -p bootstrap/css
mkdir -p bootstrap/js
cp img/* bootstrap/img/
recess --compile ./less/bootstrap.less > bootstrap/css/bootstrap.css
recess --compress ./less/bootstrap.less > bootstrap/css/bootstrap.min.css
recess --compile ./less/responsive.less > bootstrap/css/bootstrap-responsive.css
recess --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.tmp.js
echo "/*!\n* Bootstrap.js by @fat & @mdo\n* Copyright 2012 Twitter, Inc.\n* http://www.apache.org/licenses/LICENSE-2.0.txt\n*/" > bootstrap/js/copyright.js
cat bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js > bootstrap/js/bootstrap.min.js
rm bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js

这里用recess从.less生成.css,用uglifyjs处理了JavaScript代码,-nc参数的意思是--no-copyright,然后加了BootStrap自己的版权信息。

分享

0