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,毕竟是国产哈哈~
使用过程中如碰到问题点击这里。