牛标联盟开发日记之前端

浅浅的花香味﹌ 2022-01-16 03:03 153阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

在开发牛标联盟([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。[定制][Link 1]

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/][http_www.bootcss.com]查看Bootstrap的中文文档。

不过最近又一发不可收拾的喜欢上 [http://semantic-ui.com/][http_semantic-ui.com] 对非专业的前端或程序员来说简直没抗拒力，也许下一项目我就会使用她了，但是要想支持低端浏览器的童鞋你还是不要看了，她不是你的菜。

转载于:https://my.oschina.net/u/915967/blog/192388

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220114/af9c15691e474366946943a993869c7d.png
[www.niusb.com]: http://www.niusb.com
[Link 1]: http://getbootstrap.com/customize/
[Nodejs]: http://nodejs.org/
[http_www.bootcss.com]: http://www.bootcss.com/
[http_semantic-ui.com]: http://semantic-ui.com/