liucong1 / fis-pure-demo

基于fis-pure（纯前端解决方案），自定义目录结构的demo，方便静态页面的开发

基于纯前端解决方案fis-pure的自定义demo

在 fis-pure-demo 的基础上，自定义了目录结构，方便纯静态页面的搭建。

目录介绍

• page中存放html文件
• lib中存放不需要编译的js文件
• modules中存放js、css，以及模板文件
• 使用__inline引入页面公共部分

使用方法

• 安装Node.js环境

• 安装fis-pure

npm install -g fis-pure

• 修改完代码后执行 pure release -d ./dist

• 如果需要本地预览，可以在执行完pure release后，再执行pure server start

• 编译完后的代码在dist中

以下是fis-pure-demo的文档

fis-pure-demo

安装fis-pure

npm install -g fis-pure

安装成功后执行 pure -h 即可看到相关开发命令帮助

下载demo代码

git clone https://github.com/hefangshi/fis-pure-demo

也可以直接使用右侧的 Download Zip

让代码跑起来！

首先，启动内置的调试服务器：

pure server start

此时fis会启动一个精巧的jetty服务器，并且打开浏览器访问了 http://127.0.0.1:8080 ，现在这个调试环境什么也没有，接下来，我们在命令行下cd到我们下载的样例项目中：

cd fis-pure-demo

第三步，执行fis的编译命令：

pure release

第四步，刷新浏览器，查看我们的项目。

可以看到所有的模块化资源均已自动加载进来了

第五步，优化性能

虽然目前项目可以正常运行，但是这种加载方式会造成连接数过多，让我们调整参数，对资源进行自动合并

pure release -p

再次浏览页面，我们可以发现原有的大量静态资源已经自动合并。

目录规范

任何 目录规范、部署规范、编译规范 都是可配置的（配置代码），这里只介绍内置的规范。

注意

如果希望调整目录规范，建议将配置代码中roadmap.path的部分整体复制到项目的fis-conf.js中再进行调整，避免配置不符合预期的问题。

内置的规范包括：

1. 扔在 modules 目录下的js、css、less、coffee文件都是模块化文件，会自动包装define，自己就不要写了。使用require.async或者require加载模块的时候id与文件的对应规则是这样的：

文件	引用id	举个例子
/modules/a.js	a	require.async('a');
/modules/b/b.js	b	require.async('b');
/modules/b/c.js	b/c	require.async('b/c');

1. 扔在 ``lib`` 目录下的文件不被认为是模块化的，请直接在页面上使用script或link标签引用。