简介

f2e-server 通过中间件的方式支持动态的编译LESS/CoffeeScript/Jade/Markdown等类型代码

建议了解一下markdown, less, jade等, 这里主要针对这些类型文本进行的编译

安装使用 下载版已经全部安装插件

在安装目录中使用 $ npm install 命令将package.json中的开发依赖全部安装

或者分别安装 less、 coffee-script、jade、markdown、freemarker.js

安装完成开启服务器, 在服务器下直接访问指定后缀名资源,将能够获取编译后的结果 查看如下 phone.less

如果需要对需要编译的源文本进行简单修改(绝大多数场景不需要), 可使用如下配置:

exports["localhost"] = {
    "root": "D:\\doc\\",
    "middleware": {
        get: function(rs){
            return rs.replace(/\<%(.*?)%\>/g,"");
        }
    }
}

使用freemarker

: 在windows下面使用freemarker.js, 除了需要安装Java环境(一般操作系统都自带了1.6以上的jre)以外, 还需要安装 Apache Ant

安装Ant

进入下载页面,并下载

下载Ant

因为freemarker.js要求ant安装目录为 c:/ant 需要将下载完成的 zip 文件解压到这个目录

解压Ant

app.ftl

<html>
<head>
  <title>Welcome!</title>
</head>
<body>
  <#-- Greet the user with his/her name -->
  <h1>Welcome ${user!}!</h1>
  <#include "123.ftl">
  <p>We have these animals:
  <ul>
  <#list applicants as applicant>
  <li>${applicant.name} (age: ${applicant.age})
    <ul>
      <#list applicant.skills as skill>
      <li>
        - ${skill}
      </li>  
      </#list>
    </ul>
  </li>
</#list>
  </ul>
</body>
</html> 

app.json

{
    "applicants":[
      {
        "name": "Jean Test",
        "maidenName": "Jean Test",
        "age": 20,
        "skills": [ "HTML", "CSS" ],
        "testResults": { "a": 10.5, "b": 20, "c": 30 },
        "decided": true
      },
      {
        "name": "José Test",
        "maidenName": null,
        "age": 30,
        "skills": [ "Ruby", "C++", "Cuda" ],
        "testResults": { "a": 20, "b": 30, "c": 40 },
        "decided": false
      }
    ]
}

123.ftl

<button>include 123</button>

输出结果:

freemarker welcome you

在线ppt

f2e-server内置nodePPT

支持使用markdown语法书写漂亮的PPT文档

扩展和issue

f2e-server 内置多种中间件实现 nodeLib/filter/middleware.js

register('jade', 'html', function(req, resp, rs, pathname, DEBUG){
    var output = require('jade').render(rs, {pretty: true});
    this.out(output.toString());
});
register('md', 'html', function(req, resp, rs, pathname, DEBUG){
    var output = require('marked')(rs + '');
    this.out(output);
});
register('mdppt', 'html', function(req, resp, rs, pathname, DEBUG){
    var mdppt = require('mdppt');
    mdppt.cfg.base = req.util.staticServer + '/node_modules/mdppt/assets/';
    var output = mdppt(rs + '');
    this.out(output);
});
register('coffee', 'js', function(req, resp, rs, pathname, DEBUG){
    var scriptStr = require("coffee-script").compile( rs );
    this.out(scriptStr);
});
register('less', 'css', function(req, resp, rs, pathname, DEBUG){
    var out = this.out;
    require("less").render(rs, {
        paths: [ pathname.replace(/(\/[^\/]+?)$/,"") ],
        compress: !DEBUG
    }, function (err, output) {
        if (err) { throw err; }
        else{
            out(output.css);
        }
    });
});

从上面的4个样例中, 可以比较清楚的了解怎么扩展一个中间件

事实上, 在配置文件中也支持添加middleware

var baseDir = __dirname;
var ssi = require('ssi');   // 请先全局安装 ssi (npm install -g ssi)
var parser = new ssi(baseDir, baseDir, '/**/**/*.shtml');

exports.setup = function (server) {
    var middleware = server.middleware;
    // babel 自动编译jsx因此只需要配置babel就可以了, 这里只需要配置后缀映射
    middleware.register('jsx', 'js');
    // SSI 封装
    middleware.register('shtml', 'html', function(req, resp, rs, pathname, DEBUG){
        return parser.parse(pathname, rs.toString()).contents;
    });
    // 如果需要封装成异步输出模式, 可以使用this.out(resultStr);
    middleware.register('scss', 'css', function(req, resp, rs, pathname, DEBUG){
        var out = this.out;
        require('node-sass').render({
            file: pathname,
            outFile: pathname.replace(/(\.scss)$/,".css"),
            includePaths: [ pathname.replace(/(\/[^\/]+?)$/,"") ],
            outputStyle: (!DEBUG ? "compressed" : "expanded")
        }, function (err, output) {
            if (err) { throw err; }
            else{
                out(output.css.toString());
            }
        });
    });
};