简介

f2e-server 不仅支持动态的进行 模板包含(也可以进行文件合并)、资源文件的压缩、中间件的编译

同时的, 服务器也支持将这些动态编译的结果保存到本地指定的目录中

exports["localhost"] = {
    "root": "d:\\doc\\",
    "middleware": true,     // 开启中间件支持 默认为true
    "debug": fasle,         // debug设置为false, 将进行js和css压缩
    "output": "c:\\output\\"  //项目输出到指定文件夹
};

合并压缩

我们建议您在开发阶段使用模板引用进行多文件动态合并(各种文本类型后缀名文件均支持模板引擎渲染), 例如:

$include[js/config.js]
$include["js/m-attr.js"]
$include["js/m-chart.js"]
$include["js/m-cloud.js"]
$include["js/m-debate.js"]
$include["js/m-embed.js"]
$include["js/m-gallery.js"]
$include["js/m-store.js"]
$include["js/m-timeLine.js"]
$include["js/m-txt.js"]
$include["js/script.js"]

使用以下配置时:

exports["localhost"] = {
    "root": "d:\\doc\\",
    "middleware": true,     // 开启中间件支持 默认为true
    "debug": fasle,         // debug设置为false, 将进行js和css压缩
    "output": "c:\\output\\"  //项目输出到指定文件夹
};

这样的话, 你在开发以及构建将面对完全相同的数据, 而在开发中, 团队开发中各个成员可以分别关注自己的文件和进行版本控制

过滤处理

f2e-server 默认会将当前项目所有文件和文件夹先复制到指定目录, 然后再依次使用模板引擎进行编译、中间件编译、压缩模块压缩, 图片压缩

如果其中只有部分目录和文件需要进行编译, 大部分文件只是需要复制的话, 可以设置buildFilter参数:

exports["localhost"] = {
    "root": "d:\\doc\\",
    "middleware": true,     // 开启中间件支持 默认为true
    "debug": fasle,         // debug设置为false, 将进行js和css压缩
    "output": "c:\\output\\",  //项目输出到指定文件夹
    "buildFilter": function(path){
        //如果路径中含有node_modules 则只是复制文件,不通过服务器进行编译处理(包括不走tinify压缩)
        return !path.match(/node_modules/); 
    },
    // 使用tinify压缩图片(每个key每月有500个免费额度,多出要收费)
    tinify: {
        key: 'lZeAUGvTOuFSIwp0GtNqTYpib1eUTVDe',
        minSize: 60 * 1024, // 默认图片大于60k才开始进行压缩
        filter: function (path) {
            return path.match(/big.*\.png$/);
        }
    }
};

资源重命名

中间件的 middleware-type 设置会被项目输出响应到, 在输出时修改成指定文件后缀名。

new: renameMap 支持在html等文本文件中设定src可被构建时改写, 已经内置了中间件的重命名

需要在代码中使用特殊的标记进行开启,less后缀构建时候会修改成.css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="$rename[/libs/seajs/2.3.0/sea.js]"></script>
    <link rel="stylesheet" href="$rename[./css/mobile.less]">
    <link rel="stylesheet" href="$rename[/css/reset.less]">
    <link rel="stylesheet" href="$rename[src/css/reset.less]">
</head>
<body>
</body>
</html>

更复杂的配置: 如果想要设置更复杂的改写规则可进行如下配置:

exports["localhost"] = {
    "root": "d:\\doc\\",
    "middleware": true,     // 开启中间件支持 默认为true
    "debug": fasle,         // debug设置为false, 将进行js和css压缩
    "output": "c:\\output\\",  //项目输出到指定文件夹
    "buildFilter": function(path){
        //如果路径中含有node_modules 则只是复制文件,不通过服务器进行编译处理
        return !path.match(/node_modules/); 
    },
    renameMap: [
        {
            reg: /^\//, // 把绝对路径都改成带域名的
            release: "http://localhost/"
        },
        {   // renameMap 过滤管道
            // 依次匹配正则进行替换, 
            // 所有配置的正则都会经过, 
            // 最后还会附加中间件(如:less)的rename
            reg: /src\/css\/([\w\-]+)/,  
            release: "dist/css/$1",
            withBuild: true
        },
        {
            // 添加MD5重命名文件
            // 凡是添加了 withBuild 参数均被构建环节使用
            reg: /^[^\\\/].*\.css$/,
            withBuild: 'md5'
        }
    ],
};

构建的目标代码如下: 千万注意: buildFilter和renameMap在构建环节是关联的, 在buildFilter屏蔽的路径将不能被renameMap构建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://localhost/libs/seajs/2.3.0/sea.js"></script>
    <link rel="stylesheet" href="./css/mobile_08353c6.css">
    <link rel="stylesheet" href="http://localhost/css/reset.css">
    <link rel="stylesheet" href="dist/css/reset_d3c2a19.css">
</head>
<body>
</body>
</html>

FTP上传

从v1.12.5版本开始,f2e-server将支持一键FTP上传构建结果。 使用node-ftp, 具体配置如下:

下面所示ftp配置为免费空间,仅供测试. 可能会有比较高的上传失败率, 上传后可在 http://i.webfuture.cn/wfquery/ 查看

exports["localhost"] = {
    root: './',
    debug: false,
    autoprefixer: true,
    outftp: {
        host: '208.81.166.184',
        port: 21,
        user: 'i.webfuture.cn',
        password: 'f2e-server',
        connTimeout: 10000, // 初始化超时时间
        pasvTimeout: 10000, // 超时时间10s
        path: '/i.webfuture.cn/wwwroot/wfquery/' // 上传根目录
    }
};