基于fis3纯前端脚手架工具,简单易用。
Switch branches/tags
Nothing to show
Clone or download
Latest commit 979c6d5 Nov 20, 2017
Permalink
Failed to load latest commit information.
build edit config Sep 12, 2017
conf 优化配置 Nov 20, 2017
lib first commit Sep 11, 2017
mock first commit Sep 11, 2017
modules 修改组件版本 Sep 25, 2017
views 修复测试代码 Sep 25, 2017
.gitignore 修复打包后的依赖目录问题 Sep 19, 2017
README.md 修改打包配置 Sep 25, 2017
component.json 修改组件版本 Sep 25, 2017
fis-conf.js 优化配置 Nov 20, 2017
index.html 修复打包后的依赖目录问题 Sep 19, 2017
map.json first commit Sep 11, 2017
package.json 修改打包配置 Sep 25, 2017

README.md

fis3-fee

fis3-fee是基于fis3搭建的纯前端脚手架工具,解决前端模块化开发、开发自动化、代码部署、性能优化、等问题。

功能

安装运行

TIPS: 脚手架基于fis3,确保你已安装了fis3,如果不了解fis请移步fis官网,node版本不能大于5.0+,原因点这里

# 安装依赖
npm install

# 安装fis组件
fis3 install

# 开启fis服务器 (命令如下)
npm run dev     --  一键 start release -wl
npm run dep     --  发布项目到fis启动的服务,同时监听
npm run start   --  启动fis服务
npm run debug   --  测试项目资源打包
npm run build   --  打包发布到本地
npm run del     --  删除已打包发布到本地的代码
npm run open    --  打开fis本地服务器
npm run clean   --  清除fis服务器代码

这里我在package.json做了下命令配置,为了执行一个脚本写入一个config.js文件来做一些相应的配置。当然你也可以用fis原有命令,不过要注意的是必须要写入一个config.js文件到modules/js目录,不然会报错require不到这个文件。执行命令如下 ..。

# 使用fis原有命令之前执行 ..
npm run init:dev    -- 开发环境
npm run init:prod   -- 发布代码

目录说明

目录结构

|____build
|____components
|____conf
|____lib
|____mock
|____modules
|____views
|____fis-conf.js
|____component.json
|____index.html
|____package.json
|____map.json
|____README.md

目录说明

  • build -- 写入config.js文件脚本
  • components -- fis组件库
  • lib -- 静态资源库(不需要打包的库)
  • mock -- moke数据
  • modules -- 包含 模块、静态资源
  • views -- 视图页面
  • conf -- fis配置文件
  • fis-conf.js -- fis配置入口文件
  • component.json -- fis组件库配置文件
  • index.html -- 页面入口
  • package.json -- 依赖配置
  • map.json -- 资源配置表
  • README.md -- 说明文件
# views目录下一个页面一个文件夹

|____views
| |____index
| | |____component
| | | |____list.html
| | | |____list.less
| | |____index.es
| | |____index.html
| | |____index.less
| | |____tpl
| | | |____list.tpl
| |____star
| | |____assets
| | | |____star48_half@3x.png
| | | |____star48_off@3x.png
| | | |____star48_on@3x.png
| | |____star.css
| | |____star.es
| | |____star.html
| |____test
| | |____test.es
| | |____test.html
| | |____test.scss
| | |____test2.es


# modules widget组件

|____modules
| |____css
| |____images
| |____js
| |____widget
| | |____header
| | | |____header.html
| | | |____header.js
| | |____meta.html
| | |____nav.html

多说几句,fis是一套思想概念,是百度多个团队多个项目的前端工程化经验的总结,fis它并不是一个task工具,和gulp、grunt这类工具还是有一点的区别的,gulp是流水线,每个环节都要走一遍。不否认fis也有流程,前面也有说fis是思想,资源定位、内容嵌入、依赖声明,官方说的也很明白。 总而言之在我用到的这类前端构建工具当中还是属fis更人性化。配置简单,文档友好,建议大家多多了解fis,毕竟是国产哈哈~

问题反馈

使用过程中如碰到问题点击这里