$belong[layout.vm]

<section class="container row">
    <div class="col-md-3">
        <div id="sidebar" class="my_sidebar">
            <ul class="nav">
                <li class="sidebar_head_li"><a href="#introduce">简介</a></li>
                <li class="sidebar_head_li"><a href="#minify">合并压缩</a></li>
                <li class="sidebar_head_li"><a href="#filter">过滤处理</a></li>
                <li class="sidebar_head_li"><a href="#rename">中间件资源/重命名</a></li>
                <li class="sidebar_head_li"><a href="#outftp">FTP直接上传</a></li>
            </ul>
            $include[ads.html]
        </div>
    </div>

    <div class="page_content col-md-9" role="main">
        <section id="introduce">
            <h2>简介</h2>
            <p>f2e-server 不仅支持动态的进行 模板包含(也可以进行文件合并)、资源文件的压缩、中间件的编译 </p>
            <p>同时的, 服务器也支持将这些动态编译的结果保存到本地指定的目录中</p>
            <pre class="language-javascript"><code>exports["localhost"] = {
    "root": "d:\\doc\\",
    "middleware": true,     // 开启中间件支持 默认为true
    "debug": fasle,         // debug设置为false, 将进行js和css压缩
    "output": "c:\\output\\"  //项目输出到指定文件夹
};</code></pre>
        </section>
        
        <section id="minify">
            <h2>合并压缩</h2>
            <p>我们建议您在开发阶段使用模板引用进行多文件动态合并(各种文本类型后缀名文件均支持模板引擎渲染), 例如:</p>
            <pre class="language-javascript"><code>&#36;include[js/config.js]
&#36;include["js/m-attr.js"]
&#36;include["js/m-chart.js"]
&#36;include["js/m-cloud.js"]
&#36;include["js/m-debate.js"]
&#36;include["js/m-embed.js"]
&#36;include["js/m-gallery.js"]
&#36;include["js/m-store.js"]
&#36;include["js/m-timeLine.js"]
&#36;include["js/m-txt.js"]
&#36;include["js/script.js"]</code></pre>
            <p>使用以下配置时:</p>
            <pre class="language-javascript"><code>exports["localhost"] = {
    "root": "d:\\doc\\",
    "middleware": true,     // 开启中间件支持 默认为true
    "debug": fasle,         // debug设置为false, 将进行js和css压缩
    "output": "c:\\output\\"  //项目输出到指定文件夹
};</code></pre>
            <p>这样的话, 你在开发以及构建将面对完全相同的数据, 而在开发中, 团队开发中各个成员可以分别关注自己的文件和进行版本控制</p>
        </section>

        <section id="filter">
            <h2>过滤处理</h2>
            <p>f2e-server 默认会将当前项目所有文件和文件夹先复制到指定目录, 然后再依次使用模板引擎进行编译、中间件编译、压缩模块压缩, <a href="https://tinypng.com/developers" target="_blank">图片压缩</a> 等</p>
            <p>如果其中只有部分目录和文件需要进行编译, 大部分文件只是需要复制的话, 可以设置buildFilter参数:</p>
            <pre class="language-javascript"><code>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$/);
        }
    }
};</code></pre>
        </section>

        <section id="rename">
            <h2>资源重命名</h2>
            <p>中间件的 <code>middleware-type</code> 设置会被项目输出响应到, 在输出时修改成指定文件后缀名。</p>
            <p> <span class="bg-warning">new</span>: renameMap 支持在html等文本文件中设定src可被构建时改写, 已经内置了中间件的重命名</p>
            <p>需要在代码中使用特殊的标记进行开启,<span class="bg-warning">less后缀构建时候会修改成.css</span></p>
            <pre class="language-markup"><code>&lt;!DOCTYPE html>
&lt;html lang="en">
&lt;head>
    &lt;meta charset="UTF-8">
    &lt;title>Document&lt;/title>
    &lt;script src="$<%='rename'%>[/libs/seajs/2.3.0/sea.js]">&lt;/script>
    &lt;link rel="stylesheet" href="$<%='rename'%>[./css/mobile.less]">
    &lt;link rel="stylesheet" href="$<%='rename'%>[/css/reset.less]">
    &lt;link rel="stylesheet" href="$<%='rename'%>[src/css/reset.less]">
&lt;/head>
&lt;body>
&lt;/body>
&lt;/html></code></pre>
            <p>更复杂的配置: 如果想要设置更复杂的改写规则可进行如下配置:</p>
            <pre class="language-javascript"><code>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'
        }
    ],
};</code></pre>
            <p>构建的目标代码如下: 
                <strong style="color:red;">千万注意: buildFilter和renameMap在构建环节是关联的, 在buildFilter屏蔽的路径将不能被renameMap构建</strong>
                </p>
            <pre class="language-markup"><code>&lt;!DOCTYPE html>
&lt;html lang="en">
&lt;head>
    &lt;meta charset="UTF-8">
    &lt;title>Document&lt;/title>
    &lt;script src="http://localhost/libs/seajs/2.3.0/sea.js">&lt;/script>
    &lt;link rel="stylesheet" href="./css/mobile_08353c6.css">
    &lt;link rel="stylesheet" href="http://localhost/css/reset.css">
    &lt;link rel="stylesheet" href="dist/css/reset_d3c2a19.css">
&lt;/head>
&lt;body>
&lt;/body>
&lt;/html></code></pre>
        </section>

        <section id="outftp">
            <h2>FTP上传</h2>
            <p>从v1.12.5版本开始,f2e-server将支持一键FTP上传构建结果。 使用<a href="https://github.com/mscdex/node-ftp" target="_blank">node-ftp</a>, 具体配置如下:</p>
            <p>下面所示ftp配置为免费空间,仅供测试. 可能会有比较高的上传失败率, 上传后可在 <a href="http://i.webfuture.cn/wfquery/">http://i.webfuture.cn/wfquery/</a> 查看</p>
            <pre class="language-javascript"><code>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/' // 上传根目录
    }
};</code></pre>
        </section>
</div>
<div class="page_bottom col-md-9 pull-right">
    <a href="middleware.html" class="pull-left">上一节: 中间件</a>
    <a href="other.html" class="pull-right">下一节: 插件及其他</a>
</div>
</section>