牛标联盟开发日记之前端
????? 在开发牛标联盟(www.niusb.com) 的时候，一直从事游戏服务后台开发，已经很长时间没有做过网站了，对从0开始写css也没有多大精力，只好选择现在流行的bootstrap来搭建前端的 基础框架。Bootstrap是一个优秀的框架，让我省去更多事，不过使得Bootstrap有得有失，你将不能直接支持低端的浏览器，比如IE6这类前 进的绊脚石，特别是Bootstrap3只支持IE8及以上，而且对IE8也只是勉强的支持，因为你IE8没很多css3特性是不支持的，牛标联盟使用了 Bootstrap3在IE8下面边框都是没有圆角的，效果差很多，还有很多Html5的特性也不支持，实在是IE6未死,IE8又至，前端的童鞋们真是 “祸不单行”啊！
?为省事，后面Bootstrap3我就直接简称为bs3了，在写bs3的时候有时需在定制一些css属性，这有很多种选择。
1、直接到官方定制后下载css。定制
2、熟悉css的可以直接自定义css覆盖（重写）bs3的css，前题是要熟悉
3、最爽的方式当然是直接下载bs3的Less源文件来定制。 （究竟 Less是什么大家可以直接Google或度娘）
我选择了第3种方式，接下来就说说我的前端工具，Nodejs+Grunt，因为使用Grunt需要安装Nodejs支持，所以得先安装Nodejs, 详细的安装可以查看官方的文档，这里不细述，接下来安装Grunt,
npm?install?-g?grunt-cli
?
在Cmd 运行以上的命令，装grunt-ci全局安装，这样以后任何地方都可以直接使用grunt命令了。
在你要使用grunt的项目目录下新建一个package.json文件，这个文件的作用是配置项目信息及模块依赖，我的项目文件内容如下：
{??"name":?"niusb",??"description":"niusb",??"version":?"0.1.0",??"devDependencies":?{????"grunt":?"~0.4.1",????"grunt-contrib-jshint":?"~0.6.2",????"grunt-contrib-uglify":?"~0.2.2",????"grunt-contrib-concat":?"~0.3.0",????"grunt-contrib-watch":"~0.5.1",????"grunt-contrib-less":?"~0.6.4",????"grunt-contrib-clean":?"~0.5.0",????"grunt-contrib-copy":?"~0.4.1",????"grunt-recess":?"~0.3.3"??}}?
要编译bt3的less文件，grunt-contrib-less模块是必不可少的。
接下来就是Grunt的配置文件Gruntfile.js了，在项目目录下新建这个js文件后，关于Gruntfile.js的配置网站这方面的教程相当之多，我在此仅列出我的配置内容供参考。
module.exports?=?function(grunt)?{????grunt.initConfig({????????pkg?:?grunt.file.readJSON('package.json'),????????setting?:?{????????????srcLess?:?'src/main/less',????????????srcJs?:?'src/main/javascript',????????????distCss?:?'src/main/webapp/css',????????????distJs?:?'src/main/webapp/js',????????},????????clean?:?{????????????build?:?{????????????????src?:?[?"build"?]????????????}????????},????????concat?:?{????????????bootstrap?:?{????????????????src?:?[?'<%=setting.srcJs%>/bootstrap/*.js'?],????????????????dest?:?'build/bootstrap.js'????????????}????????},????????uglify?:?{????????????main?:?{????????????????src?:?[?'<%=setting.srcJs%>/application.js'?],????????????????dest?:?'<%=setting.distJs%>/application.min.js'????????????},????????????other?:?{????????????????files?:?{????????????????????'<%=setting.distJs%>/jquery-1.10.2.min.js'?:?[?'<%=setting.srcJs%>/jquery-1.10.2.js'?],????????????????????'<%=setting.distJs%>/bootstrap.min.js'?:?[?'<%=setting.srcJs%>/bootstrap.js'?],????????????????????'<%=setting.distJs%>/html5shiv.min.js'?:?[?'<%=setting.srcJs%>/html5shiv.js'?],????????????????????'<%=setting.distJs%>/respond.min.js'?:?[?'<%=setting.srcJs%>/respond.min.js'?],????????????????????'<%=setting.distJs%>/jquery.ui.widget.min.js'?:?[?'<%=setting.srcJs%>/jquery.ui.widget.js'?],????????????????????'<%=setting.distJs%>/bootbox.min.js'?:?[?'<%=setting.srcJs%>/bootbox.js'?],????????????????????'<%=setting.distJs%>/bootstrap-modal.min.js'?:?[?'<%=setting.srcJs%>/bootstrap-modal.js'?],????????????????????'<%=setting.distJs%>/bootstrap-modalmanager.min.js'?:?[?'<%=setting.srcJs%>/bootstrap-modalmanager.js'?],????????????????????'<%=setting.distJs%>/jquery.fileupload.min.js'?:?[?'<%=setting.srcJs%>/jquery.fileupload.js'?],????????????????????'<%=setting.distJs%>/jquery.iframe-transport.min.js'?:?[?'<%=setting.srcJs%>/jquery.iframe-transport.js'?],????????????????????'<%=setting.distJs%>/jquery.jcrop.min.js'?:?[?'<%=setting.srcJs%>/jquery.jcrop.js'?],????????????????????'<%=setting.distJs%>/twitter-bootstrap-hover-dropdown.min.js'?:?[?'<%=setting.srcJs%>/twitter-bootstrap-hover-dropdown.js'?],????????????????????'<%=setting.distJs%>/jquery.lazyload.min.js'?:?[?'<%=setting.srcJs%>/jquery.lazyload.js'?],????????????????????'<%=setting.distJs%>/moment.min.js'?:?[?'<%=setting.srcJs%>/moment.js'?],????????????????????'<%=setting.distJs%>/bootstrap-datetimepicker.min.js'?:?[?'<%=setting.srcJs%>/bootstrap-datetimepicker/bootstrap-datetimepicker.js'?],????????????????????'<%=setting.distJs%>/bootstrap-datetimepicker.zh-CN.min.js'?:?[?'<%=setting.srcJs%>/bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js'?]????????????????}????????????}????????},????????recess?:?{????????????options?:?{????????????????compile?:?true????????????},????????????mainCompile?:?{????????????????files?:?{????????????????????'build/bootstrap-datetimepicker.css'?:?[?'<%=setting.srcLess%>/bootstrap-datetimepicker.min.css'?],????????????????????'build/application.css'?:?[?'<%=setting.srcLess%>/application.less'?],????????????????????'build/admin.css'?:?[?'<%=setting.srcLess%>/admin.less'?],????????????????????'build/user.css'?:?[?'<%=setting.srcLess%>/user.less'?]????????????????}????????????},????????????thirdCompile?:?{????????????????files?:?{????????????????????'build/bootstrap.css'?:?[?'<%=setting.srcLess%>/bootstrap/bootstrap.less'?]????????????????}????????????},????????????mainMin?:?{????????????????options?:?{????????????????????compress?:?true????????????????},????????????????files?:?{????????????????????'<%=setting.distCss%>/bootstrap-datetimepicker.min.css'?:?[?'<%=setting.srcLess%>/bootstrap-datetimepicker.min.css'?],????????????????????'<%=setting.distCss%>/application.min.css'?:?[?'<%=setting.srcLess%>/application.less'?],????????????????????'<%=setting.distCss%>/admin.min.css'?:?[?'<%=setting.srcLess%>/admin.less'?],????????????????????'<%=setting.distCss%>/user.min.css'?:?[?'<%=setting.srcLess%>/user.less'?]????????????????}????????????},????????????thirdMin?:?{????????????????options?:?{????????????????????compress?:?true????????????????},????????????????files?:?{????????????????????'<%=setting.distCss%>/bootstrap.min.css'?:?[?'<%=setting.srcLess%>/bootstrap/bootstrap.less'?],????????????????????'<%=setting.distCss%>/font-awesome.min.css'?:?[?'<%=setting.srcLess%>/font-awesome.css'?],????????????????????'<%=setting.distCss%>/jquery.fileupload-ui.min.css'?:?[?'<%=setting.srcLess%>/jquery.fileupload-ui.css'?],????????????????????'<%=setting.distCss%>/jquery.jcrop.min.css'?:?[?'<%=setting.srcLess%>/jquery.jcrop.css'?]????????????????}????????????}????????},????????watch?:?{????????????mainRecess?:?{????????????????files?:?[?'<%=setting.srcLess%>/application.less',?'<%=setting.srcLess%>/admin.less',?'<%=setting.srcLess%>/user.less'?],????????????????tasks?:?[?'dist-compile-main',?'dist-recess-main'?]????????????},????????????thirdRecess?:?{????????????????files?:?[?'<%=setting.srcLess%>/application.less',?'<%=setting.srcLess%>/bootstrap/*.less'?],????????????????tasks?:?[?'dist-recess-third'?]????????????},????????????mainJs?:?{????????????????files?:?[?'<%=setting.srcJs%>/application.js'?],????????????????tasks?:?[?'dist-js-main'?]????????????}????????},????});????grunt.loadNpmTasks('grunt-contrib-concat');????grunt.loadNpmTasks('grunt-contrib-uglify');????grunt.loadNpmTasks('grunt-recess');????grunt.loadNpmTasks('grunt-contrib-clean');????grunt.loadNpmTasks('grunt-contrib-watch');????grunt.loadNpmTasks('grunt-contrib-copy');????grunt.registerTask('dist-compile-main',?[?'recess:mainCompile'?]);????grunt.registerTask('dist-compile-third',?[?'recess:thirdCompile'?]);????grunt.registerTask('dist-recess-main',?[?'recess:mainMin'?]);????grunt.registerTask('dist-recess-third',?[?'recess:thirdMin'?]);????grunt.registerTask('dist-js-main',?[?'uglify:main'?]);????grunt.registerTask('dist-js',?[?'uglify'?]);????grunt.registerTask('dist-css',?[?'recess'?]);????grunt.registerTask('default',?[?'clean',?'dist-js',?'dist-css'?]);};?
其中的watch就是用来监控less或 js文件变化的，当你修改了less文件，Grunt 马上会编译成 css 文件这样马上就能看到效果。以下在cmd里运行，监控文件变化动态编译。
grunt?watch:mainRecess
?
英文比较头痛的童鞋可以到http://www.bootcss.com/查看Bootstrap的中文文档。
不过最近又一发不可收拾的喜欢上 http://semantic-ui.com/ 对非专业的前端或程序员来说简直没抗拒力，也许下一项目我就会使用她了，但是要想支持低端浏览器的童鞋你还是不要看了，她不是你的菜。