向bootstrap学习前端工程

Posted 性能与架构

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了向bootstrap学习前端工程相关的知识，希望对你有一定的参考价值。

bootstrap是目前最流行的前端开发框架，提供了丰富的前端组件，对于经验丰富的高手来说，其中的每项功能可能并不是太复杂，但由于他功能丰富，已经是一套系统，所以整体开发和组织的过程就不简单了

如果你来负责开发bootstrap，你会如何进行整体架构和流程的把控？有时间可以思考下，可以锻炼自己全局思维

通过bootstrap的源码，大概看下bootstrap的工程化开发方式

需求

（1）开发

主要使用css和js开发，js本身就是编程语言，开发环境也很成熟

css麻烦一点，用纯css编写的话效率不高，所以使用css的预处理语言进行开发，bootstrap选择的是less

（2）测试

作为一个产品，质量肯定是非常关键的，就需要做全面的测试，例如代码检查、单元测试、不同浏览器下的测试

（3）编译

用less开发css，就需要把less编译为常规css代码

css和js的文件会有很多，需要把他们合并、压缩

（4）发布

发布后要有说明文档，需要生成一套文档页面，还需要把所有内容打包成zip文件供我们下载

实现

bootstrap使用grunt构建工具，除了代码开发外都使用grunt实现自动化操作

例如 js和less的代码变动后，就会自动进行编译和测试

看下具体使用的grunt插件和任务

less

编译css

autoprefixer

自动处理css属性的前缀，你只需要按照标准css属性进行开发，例如

a{
transition :transform 1s
}

autoprefixer自动提供给你前缀：

a{
-webkit-transition :-webkit-transform 1s;
transition :-ms-transform 1s;
transition :transform 1s
}

jshint

做JS语法检查

jscs

js代码风格检查

concat

合并

uglify

压缩

qunit

基于 phantom.js 做webkit内核浏览器下的测试

phantom.js 可以理解为没有界面的浏览器，基于webkit，提供了一套js api，支持DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG，便于无需浏览器的Web测试

saucelabs-qunit

基于saucelabs做非webkit内核浏览器下的测试

saucelabs是一个自动化跨浏览器测试平台

jade

基于node的页面模板引擎，用来生成页面

htmllint

html代码检查

jekyll

生成静态文档

watch

监控代码的变动，改过后就进行编译、语法检查、单元测试

compress

对整体进行打包，生成我们下载的zip文件