fep-cli

1.0.0 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i fep-cli

Weekly Downloads

1

Version

1.0.0

License

ISC

Last publish

Collaborators

  • denghuafeng