Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fouber/modjs-todo-demo
modjs todo demo
https://github.com/fouber/modjs-todo-demo
Last synced: 5 days ago
JSON representation
modjs todo demo
- Host: GitHub
- URL: https://github.com/fouber/modjs-todo-demo
- Owner: fouber
- Created: 2013-09-25T08:18:56.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2014-07-04T03:36:33.000Z (over 10 years ago)
- Last Synced: 2024-05-13T05:09:43.742Z (6 months ago)
- Language: JavaScript
- Size: 406 KB
- Stars: 21
- Watchers: 3
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 安装fis
```bash
npm install -g fis
```
安装成功后执行 ``fis -h`` 即可看到相关开发命令帮助
## 安装fis的扩展插件，这个项目用到的
```bash
npm install -g fis-parser-utc
npm install -g fis-parser-coffee-script
npm install -g fis-parser-less
npm install -g fis-postprocessor-require-async
npm install -g fis-postpackager-modjs
```
## 让代码跑起来！
首先，启动内置的调试服务器：
```bash
fis server start
```
此时fis会启动一个精巧的jetty服务器，并且打开浏览器访问了 http://127.0.0.1:8080 ，现在这个调试环境什么也没有，接下来，我们在命令行下cd到我们下载的样例项目中：
```bash
cd todo-demo
```
第三步，执行fis的编译命令：
```bash
fis release
```
第四步，刷新浏览器，查看我们的项目。
## 各种功能体验
1. 给所有资源加 ``md5版本戳``，执行：
```bash
fis release -m
```
然后刷新浏览器，看一下源码吧！
1. 压缩js、css、图片，执行：
```bash
fis release -o
```
1. 校验js，执行：
```bash
fis release -l
```
1. 自动csssprite，执行：
```bash
fis release -p
```
可以看到 ``#todo-list label`` 的图片都自动合并了哦
1. 所有静态资源加域名，先修改fis-conf.js文件，去除掉 ``第2行`` 的注释，然后执行：
```bash
fis release -D
```
1. 文件监听，执行：
```bash
fis release -w
```
命令行窗口不要关闭，然后去修改源码->保存->刷新浏览器，就能看到更新的效果。
1. 文件上传，执行：
```bash
fis release -d remote
```
就可以发布到我的一个小服务器上，然后浏览器访问： http://vm-1.chongzi.kd.io/
1. 加域名、压缩、加md5戳、校验、csssprite、把编译好的文件产出到output目录中（其实就是随意组合使用前面提到面的参数啦）：
```bash
fis release -Domlp -d ../output
```
1. 文件监听、live-reload、同时发布到本地调试目录、outpu目录和远端服务器：
```bash
fis release -wLd preview,remote,../output
```
## 目录规范
任何 ``目录规范``、``部署规范``、``编译规范`` 都是可配置的（[配置代码](https://github.com/fouber/modjs-todo-demo/blob/master/fis-conf.js#L41-L91)），这里只介绍内置的规范。
内置的规范包括：
1. ``.less`` 后缀的文件是less文件，编译后得到css文件。
1. ``.minix.less`` 后缀的文件定义less的minix，编译后不会产出。
1. ``.coffee`` 后缀的文件是coffee-script，编译后得到js文件。
1. ``.tmpl`` 后缀的文件是underscore前端模板，左右定界符为 ``<%`` 和 ``%>``，编译后不会产出。在js或coffee中使用 [``__inline('path')``](https://github.com/fouber/modjs-todo-demo/blob/master/modules/views/todos.js#L12) 函数将其嵌入到js或coffee文件中作为模板函数使用。
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标签引用。
> 如果使用中遇到什么觉得诡异的地方，欢迎在 [issues](https://github.com/fouber/fis/issues) 留言