fep-cli
v1.0.0
Published
fep-cli
Downloads
4
Readme
#FEP(frontend platform)
使用说明
1、下载npm包
npm fep-cli install -g (全局安装)
(会自动安装fep.cmd文件,可在DOS命令行直接输入命令fep)
2、创建本地项目目录结构
fep -project XXXX(fep -p XXXX)
3、发布命令
fep -debug (fep -d) //debug模式
fep -release(fep -r) //产出模式
目录配置
发布的目录
1、debug目录:
ptres.XXX.com/js/XXX2016/debug/css/
ptres.XXX.com/js/XXX2016/debug/images/
ptres.XXX.com/js/XXX2016/debug/js/
2、final目录:
img1.XXX.com/XXX/css/
img1.XXX.com/XXX/images/
ptres.XXX.com/js/XXX/
路径均可在fis-conf.js的opt中修改
var opts = {
//目录结构模块
modulesArr: ['index', 'common', 'goods', 'pay', 'role', 'user'],
//debug发布目录
outputUrlDebug: "/ptres.XXX.com/js/XXX/debug",
//js发布目录
outputUrlJs: "/ptres.XXX.com/js/XXX",
//css\images发布目录
outputUrlCss: "/img1.XXX.com/XXX"
};
debug
代码为合并不压缩状态
代码路径为debug
final
代码为合并压缩装态
代码路径为平台目录结构
html注释说明
代码示范
<!-- @if system='debug' -->
<link type="text/css" rel="stylesheet" href="../ptres.XXX.com/js/XXX/debug/css/common.css?t=201607061124VER">
<link type="text/css" rel="stylesheet" href="../ptres.XXX.com/js/XXX/debug/css/index.css?t=201607061124VER">
<!-- @endif -->
<!-- @if system='release' -->
<link type="text/css" rel="stylesheet" href="http://img1.XXX.com/XXX/css/common.css?t=201607061124VER">
<link type="text/css" rel="stylesheet" href="http://img1.XXX.com/XXX/css/index.css?t=201607061124VER">
<!-- @endif -->
debug命令模式会保留system='debug'代码片段
final命令模式会保留system='release'代码片段
js\css注释类似(js\css的注释语法)
功能说明
1.模块化开发目录结构
2.雪碧图制作,css引入图片路径后增加"?__sprite"即可,自动合并成一张雪碧图,引用路径自动修改。
(但是雪碧图制作后生成的路径和css同级目录,后期可完善)
3.基于fis3解决方案封装fep命令
4.支持使用sass(或less)作为css编译器,可以任意使用sass编译器支持的语法。
5.发布时自动合并js\css为各模块下的js、css代码。
6.js源码基于amd规范,使用requirejs作为加载器。
7.自动化发布代码到远程服务器,支持http-push上传。
8.代码可区分debug、release状态模式的代码,发布时自动切换。
待改善
sprite图生成为css同级目录
未封装命令
未发布到cnpm