O2Team构建项目流程工具,基于Webpack3打包,提供多页、单页、H5三种模板选择,支持Nerv、React、Vue三大框架编译。
一次安装,到处运行
- 轻量组件化功能
- Sass 编译
- CSS合并压缩
- CSS prefix,px转rem
- JS合并压缩
- 自动生成雪碧图,自动多倍图
- 自动获取图片宽高
- 文件内联,自定义图片转base64
- 图片压缩
- 字体压缩
- 文件MD5戳
- 本地预览
- 资源定位(图片等资源路径替换)
- 生成CSS页面片
- 部署到预览机和开发机
基于node
,请确保已具备较新的node环境(>=4.0.0),推荐使用node版本管理工具nvm,这样不仅可以很方便地切换node版本,而且全局安装时候也不用加sudo了。
$ [sudo] npm install -g athena2
由于国外源实在太慢,建议使用国内源来安装
$ [sudo] npm i -g athena2 --registry=http://registry.npm.taobao.org --disturl=http://npm.taobao.org/mirrors/node
目前已支持sass文件的编译
基于命令 athena2
,同时提供了简写ath2
首先需要初始化Athena2,在这一步会有初始化工作目录、输入用户名等操作
$ ath2 init
$ ath2 a [项目名称]
同时提供了通过携带参数快速创建项目的命令
$ ath2 a --name test --description 测试 --sass --template complete --framework nerv
$ ath2 a --h5 [h5 template]
参数 --name
指定项目名称
参数 --description
指定项目描述
参数 --template
指定项目使用的模板,输入模板名称,支持complete(多页)、simple(单页)、h5(H5活动)三种应用模式。
参数 --framework
指定项目使用的框架,输入框架名称,支持Nerv、React、Vue三大框架。
参数 --sass
指定项目使用 sass
每个参数都是可缺省的。
然后根据提示一步一步来,将会自动生成项目的结构和所需文件代码
注:单页应用及H5无此功能
$ ath2 m [模块名]
多页应用每个模块相当于一个页面
同时提供了通过携带参数快速创建模块的命令
$ ath2 m --name hhh --description 测试
参数 --name
指定模块名称
参数 --description
指定模块描述
每个参数都是可缺省的
然后根据提示一步一步来,将会自动生成项目的结构和所需文件代码
注:H5应用无此功能
$ ath2 pa [页面名]
多页应用需进入到该模块 下,执行以上命令,单页应用直接在根目录下执行
同时提供了通过携带参数快速创建页面的命令
$ ath2 pa --name hello --description 测试
参数 --name
指定页面名称
参数 --description
指定页面描述
每个参数都是可缺省的
然后根据提示一步一步来,将会自动生成athena2的page目录和模板
H5应用每个组件相当于一个js类
$ ath2 c [组件名]
多页应用需进入到该模块 下,执行以上命令,单页应用直接在根目录下执行
同时提供了通过携带参数快速创建组件的命令
$ ath2 c --name topbar --description 测试
参数 --name
指定组件名称
参数 --description
指定组件描述
每个参数都是可缺省的
然后根据提示一步一步来,将会自动生成athena2的component目录和模板
// 编译所有模块
$ ath2 s
// 多页应用同时编译多个模块
$ ath2 s mod1 mod2
// 打包所有模块
$ ath2 build
// 多页应用同时打包多个模块
$ ath2 build mod1 mod2
// H5支持打包生成zip压缩包
$ ath2 build --zip
项目根目录下的config目录即配置文件目录,里面包含
- 公共配置文件:
index.js
- 编译配置文件:
dev.js
- 打包配置文件:
prod.js
可根据需要自行配置相关参数,如publicPath、sourceRoot、outputRoot、port、host等。建议如无特殊情况,可不修改基础配置
如需添加Webpack其他配置,可在相应配置文件中添加webpack
参数,填入相关配置
例如:添加json-loader
module.exports = {
...
webpack: {
module: {
rules: [
{
test: /\.json$/,
use: 'json-loader'
}
]
}
}
}
Postcss相关配置可在相应配置文件的module
>postcss
中填入
该功能默认开启,如不需要,配置enable: false
更多配置参数详见:https://github.com/postcss/autoprefixer
module.exports = {
...
webpack: {},
module: {
postcss: {
autoprefix: {
enable: true,
// 其他options
}
}
}
}
该功能H5应用默认开启
module.exports = {
...
webpack: {},
module: {
postcss: {
pxtorem: {
enable: true,
// 其他options
}
}
}
}
更多配置参数详见:https://github.com/ant-tool/postcss-plugin-px2rem
该功能H5应用默认开启
自动获取1倍图宽高
body {
width: width('images/foobar.png'); /* 320px */
height: height('images/foobar.png'); /* 240px */
background-size: size('images/foobar.png'); /* 320px 240px */
}
自动获取多倍图宽高
body {
width: width('images/foobar.png', 2); /* 160px */
height: height('images/foobar.png', 2); /* 120px */
background-size: size('images/foobar.png', 2); /* 160px 120px */
}
module.exports = {
...
webpack: {},
module: {
postcss: {
assets: {
enable: true,
// 其他options
}
}
}
}
更多配置参数详见:https://github.com/assetsjs/postcss-assets
该功能H5应用默认开启,会将img/images目录下的按文件夹划分的所有图片合成一张雪碧图,例如
/* Input */
.comment { background: url(img/icon/ico-comment.png) no-repeat 0 0; }
.bubble { background: url(img/icon/ico-bubble.png) no-repeat 0 0; }
/* ---------------- */
/* Output */
.comment { background-image: url(img/sprite.icon.png); background-position: 0 0; }
.bubble { background-image: url(img/sprite.icon.png); background-position: 0 -50px; }
使用多倍图时需按文件夹划分图片,文件夹命名格式如:name@2x
。使用了pxtorem功能无需按文件夹划分多倍图
// prod.js
module.exports = {
...
webpack: {},
module: {
postcss: {
sprites: {
enable: true,
// 其他options
}
}
}
}
更多配置参数详见:https://github.com/2createStudio/postcss-sprites
图片压缩功能主要在打包时应用,H5应用默认开启该项功能
// prod.js
module.exports = {
...
webpack: {},
module: {
imageMin: {
enable: true,
// 其他options
}
}
}
更多配置参数详见:https://github.com/tcoopman/image-webpack-loader
该功能主要配置图片、文字转base64时的limit尺寸,默认为2000
module.exports = {
...
webpack: {},
module: {
base64: {
imageLimit: 8000,
fontLimit: 000
}
}
}
MIT License
Copyright (c) 2017 o2team
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.