构建工具概述
为了通过流程规范、自动化工具来提升前端的开发效率、性能、质量、多人协作能力以及开发体验,各类工具应运而生。Grunt、Gulp、Webpack、Browserify、FIS等
构建工具的主要功能:代码检查、预编译、合并、压缩、雪碧图、sourceMap、版本管理、单元测试、监控、模块化、组件化开发等功能
简单分类
基于任务运行的工具
Grunt Gulp(Grunt已被Gulp所取代)
它们会自动执行指定的任务,就像流水线,把资源放上去然后通过不同插件进行加工,它们包含活跃的社区,丰富的插件,能方便的打造各种工作流
基于模块化打包的工具
Browserify、Webpack、rollup.js
有过 Node.js 开发经历的应该对模块很熟悉,需要引用组件直接一个
require
就 OK,这类工具就是这个模式,还可以实现按需加载、异步加载模块整合型工具
Yeoman、FIS、jdf、Athena、cooking、weflow
使用了多种技术栈实现的脚手架工具,好处是即开即用,缺点就是它们约束了技术选型
Athena
Athena是由京东【凹凸实验室】(aotu.io) 推出的一套项目流程工具,通过Athena,我们可以很流程地跑完整个开发流程。Athena分为两部分: 一是本地自动化编译工具,二是资源管理平台,其架构如下:
####本地自动化构建工具
Athena本地编译工具是一个基于NodeJs的命令行工具,通过执行命令的方式来优化开发流程
- 自动创建项目、模块、页面、组件结构
- 轻量组件化功能,根据组件加载情况生成资源依赖表
- Sass/less 编译
- 代码检查
- CSS prefix等处理
- CSS合并压缩,JS合并压缩
- 自动生成雪碧图,自动多倍图,图片压缩
- 字体文件压缩
- 自定义图片转base64
- 文件内联,可以内联样式及JS代码
- 文件MD5戳,将文件进行使用MD5进行重命名
- 本地预览,直接查看整个项目
- 资源定位(图片等资源路径替换)
- 生成CSS页面片,提供将页面引用的CSS/JS抽离成页面片的形式,方便管理CSS资源
- 部署到预览机和开发机
项目结构
一个项目对应一个目录,项目中可以包含多个 模块 ,项目将由以下结构组成
1 | ├── gb - 公共模块(每个项目都会默认拥有一个公共模块 gb) |
项目中模块将由以下结构组成
1 | ├── dist - 通过编译生成的目录 |
安装
安装本项目 athena-html
1 | npm install -g athena-html |
目前已支持sass/less文件的编译,使用使用sass需要使用ruby安装compass
1 | gem install compass # 建议将gem源替换成 ruby-china 的源 |
快速开始
初始化
1 | ath init [工作目录] |
生成新项目
1 | ath app [项目名称] |
新增模块
1 | $ ath module [模块名] |
1 | $ ath m --name hhh --description 测试 --sass |
参数 --name
指定模块名称
参数 --description
指定模块描述
参数 --sass
指定模块使用 sass
参数 --less
指定模块使用 less
每个参数都是可缺省的
新增页面
1 | $ ath page [页面名] |
1 | $ ath pa --name hello --description 测试 --sass |
参数 --name
指定页面名称
参数 --description
指定页面描述
参数 --sass
指定页面使用 sass
参数 --less
指定页面使用 less
每个参数都是可缺省的
新增widget
1 | ath widget [组件名] |
1 | $ ath w --name topbar --sass --description 测试 |
参数 --name
指定组件名称
参数 --description
指定组件描述
参数 --sass
指定组件使用 sass
参数 --less
指定组件使用 less
每个参数都是可缺省的
删除命令 athena delete
1 | ath del -a [项目名] |
####使用及编译
编译模式
- 在客户端进行代码合并的客户端完全处理client模式
- 在静态服务器进行代码合并的server模式
两种模式下大家开发时的代码写法完全一样,唯一的区分是在项目的app-conf.js
中进行配置mode
,配置项为comboConf
如下
1 | module.exports = { |
模块化
在html
页面文件中一般通过加载各个widget
的方式来进行开发
1 | <%= widget.load('user') %> |
widget.load
可以方法接收三个参数,第一个参数是widget
的名称,后面两个参数是可选参数,第二个是向widget
传递的一些参数,第三个是widget
所属的模块,如果是本模块,可以不传
页面API(常用的)
widget.load
加载组件
getCSS
用来输出页面所需引用的CSS Link,可传入3个参数,第一个参数是CSS
样式表的名称,第二个参数是模块名,第三个参数是是否加入页面片中(client模式)
1 | # hello.html |
getJS
与上述getCSS
相似,将输出页面所需引用的脚本文件,参数与getCSS
保持一致
1 | # hello.html |
app-conf.js
app-conf.js 文件是一个通过传入配置项生成的关于本项目的配置文件
module-conf.js
module-conf.js 包含模块的一些配置信息
模块的详细功能需在 support 中配置
1 | ; |
static-conf.js
需要引用static
目录下资源的配置,由使用者自定义,一般可以用来自定义配置一些需要额外引用的第三方库文件,例如:
在static/css
目录下存在t1.css
,t2.css
两个资源,需要将这两个资源引用到页面中,那么可以在该文件中增加如下配置
1 | ; |
test.css
是自定义的合并后css名称,若要在页面中引用,只需调用 <%= getCSS('test.css') %>
即可
map.json
map.json 文件是通过执行编译任务后生成一个标识依赖关系的文件
athena build 项目的编译
1 | $ athena build |
athena server 本地预览
1 | $ athena serve |
自动打开浏览器
athena clear
清除缓存,目前缓存包含 模板文件 、 发布时的缓存文件
部分功能使用方法
px转rem
自动将px
转成rem
,需要配置module-conf.js
里面的 support
中的 px2rem
属性如下即可:
1 | support : { |
假设上面的白名单属性设为width
,height
,下面举例转换过程:
source.css
1 | .demo { |
output.css
1 | .demo { |
css雪碧图
将所有文件中background
或者background-image
引用到的带有?__sprite
后缀的图片进行雪碧图合并,需要在配置文件module-conf.js
的support
增加下面属性:
1 | support : { |
上面的属性rootValue
若设置为0
表示不开启px转rem,若设置为非0正数,则表示1rem=40px
,40为rootValue
的值。 同时,若需要支持高清图样式适配,那么图片请自行修改为@2x
,@3x
后缀名,如:`help@2x.png`
source.css
1 | body { |
output.css
1 | body { background-image:url(../images/sprite.png); background-position:-2.7rem 0; } |