$belong[layout.vm]
<style>
    .bg-warning{padding: .5em;}
    .bg-danger{padding: .5em;}
</style>
<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="#combine">Combine支持(http-concat)</a></li>
                <li class="sidebar_head_li"><a href="#autoprefix">CSS3自动前缀</a></li>
                <li class="sidebar_head_li"><a href="#babel">ES6-ES5自动转换</a></li>
                <li class="sidebar_head_li"><a href="#psd">psd文件解析</a></li>
                <li class="sidebar_head_li"><a href="#upload">upload使用</a></li>
                <li class="sidebar_head_li"><a href="#prettify">代码美化</a></li>
                <li class="sidebar_head_li"><a href="#placeholder">图片占位</a></li>
                <li class="sidebar_head_li"><a href="#crx">Chrome插件</a></li>
                <li class="sidebar_head_li"><a href="#livereload">自动刷新</a></li>
            </ul>
            $include[ads.html]
        </div>
    </div>

    <div class="page_content col-md-9" role="main">
        <section id="combine">
            <h2>Combine支持(http-concat)</h2>
            <p>f2e-server 提供了动态的 http-concat(根据指定的url格式进行动态的资源合并) 支持, 如下链接格式均能被识别:</p>
            <pre class="language-javascript"><code>1. "http://localhost/js??jquery.js,comm.js,main.js,index.js"
// 双问号分割pathname和search, search参数多组待合并文件名之间用逗号分割
2. "http://localhost/js/??jquery.js?v1.9.1,comm.js?v1.0,main.js,index.js"
// 每组文件名的版本参数将被忽略
3. "http://localhost/js??dist/jquery.js,comm.js,main.js,../index/index.js"
// 文件名支持携带目录信息
</code></pre>   
            <p class="bg-warning">combine只能对文本内容进行简单合并, 不能和模板引擎混杂使用</p>
        </section>
    
        <section id="autoprefix">
            <h2>CSS3自动前缀</h2>
            <p>f2e-server 服务端提供了动态的添加最新完整CSS3浏览器前缀 【可用于构建阶段】</p>
            <p>要求:</p>
            <ul>
                <li>安装 autoprefixer <code>npm install autoprefixer</code></li>
                <li>在conf.js中对应服务下配置参数 <code>"autoprefixer": true</code></li>
            </ul>
            <p>如下源代码:</p>
            <pre class="language-css"><code>.page{
    position: relative;
    transition: transform .6s ease-in .1s;
    transform-origin: center;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
}</code></pre>   
            <p>操作后结果代码:</p>
            <pre class="language-css"><code>.page{
    position: relative;
    -webkit-transition: -webkit-transform .6s ease-in .1s;
            transition: transform .6s ease-in .1s;
    -webkit-transform-origin: center;
        -ms-transform-origin: center;
            transform-origin: center;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
}</code></pre> 
        </section>

        <section id="babel">
            <h2>ES6-ES5自动转换</h2>
            <p>f2e-server 服务端提供了动态的支持ES6源代码直接转ES5 【可用于构建阶段】</p>
            <ul>
                <li>安装 babel
                    <ol>
                        <li><code>npm install babel-preset-es2015</code></li>
                        <li><code>npm install babel-preset-react</code></li>
                    </ol>
                </li>
                <li>在conf.js中对应服务下配置参数 <code>"babel": {}</code></li>
                <li>完整的babel配置文件可以参考: <a href="http://babeljs.io/docs/usage/options/" target="_blank">http://babeljs.io/docs/usage/options/</a></li>
                <li class="bg-warning">babel6需要npm3以上版本的 dedupe 支持。</li>
                <li>如果使用插件不在es2015/react中需要另外安装。</li>
                <li>一个例子: <a href="http://www.jianshu.com/p/4e13f252b4d6">http://www.jianshu.com/p/4e13f252b4d6</a></li>
            </ul>
            <p>如下源代码:</p>
            <pre class="language-javascript"><code>var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);
export const a = 123;</code></pre>   
            <p>操作后结果代码:</p>
            <pre class="language-javascript"><code>'use strict';

Object.defineProperty(exports, '__esModule', {
  value: true
});
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(React.createElement(
  'h1',
  null,
  'Hello, world!'
), document.getElementById('example'));
var a = 123;
exports.a = a;</code></pre>
            <p>babel支持更复杂的配置, 参考babel5的完整options(如:配置amd封装):</p>
            <pre class="language-javascript"><code>exports["localhost"] = {
    "root": "/Users/baidu/github/",
    babel: {
        query: {
            modules: 'amd'
        } 
    }
};</code></pre>
            <p>操作后结果代码:</p>
            <pre class="language-javascript"><code>define(['exports'], function (exports) {
  'use strict';

  Object.defineProperty(exports, '__esModule', {
    value: true
  });
  var React = require('react');
  var ReactDOM = require('react-dom');
  ReactDOM.render(React.createElement(
    'h1',
    null,
    'Hello, world!'
  ), document.getElementById('example'));
  var a = 123;
  exports.a = a;
});</code></pre>
        </section>

        <section id="psd">
            <h2>psd文件解析(Beta)</h2>
            <p>如果安装了完整版本的 f2e-server, 将可以点击获取解析后的png图片文件, 同时创建一个同名的文件夹, 里面存储所有PSD原稿用到的图片和文档碎片。</p>
            <p><img src="images/other-psd.gif"></p>
            <p class="bg-danger">此功能为开发版本, 极有可能因为nodejs内存不足造成服务器崩溃</p>
        </section>

        <section id="upload">
            <h2>upload使用</h2>
            <p>前端开发调试中可能会遇到文件上传调试的功能, f2e-server 为文件上传提供了比较方便的功能</p>
            <p>在conf.js相应服务下配置 <code>upliadFile: true</code> 将可以在服务器下保存文件</p>
            <p>返回文件保存信息页面: &lt;%=JSON.stringify(request.files)%&gt;</p>
        </section>
    
        <section id="prettify">
            <h2>代码美化</h2>
            <p>f2e-server 内置highlight-js接口, 提供在服务端对任意代码片段进行美化返回结果. <code>(修改下面链接, 查看代码)</code></p>
            <p><input type="text" class="form-control" value="http://webfuture.cn" onchange="$('#prettify-frame').attr({src:'http://f2e-server.com/prettify?'+this.value});"></p>
            <p><iframe id="prettify-frame" src="http://f2e-server.com/prettify?http://webfuture.cn" frameborder="0" style="width:100%;height:300px;background:#fff;"></iframe></p>
            <ol>
                <li>文件列表中对于文本类型的文件后面会有一个 “源” 字图标,在安装完highlight之后可以点击查看。</li>
                <li>插件还支持POST请求进行代码转化, 参数如下:
                    <ul>
                        <li><code>code</code>: 传入源代码</li>
                    </ul>
                </li>
                <li>异步接口返回的数据结构如下:
                    <pre class="language-javascript"><code>{
    code: post.code, // 源代码返回
    output: highlight(post.code), //美化后代码
    style: style   // highlight 选用的style源码方便使用方输出
}</code></pre>
                </li>
            </ol>
        </section>

        <section id="placeholder">
            <h2>占位图片</h2>
            <p>f2e-server 内置了占位图片效果, 直接访问: <code>/placeholder.jpg</code> 返回效果  <code>(修改下面参数, 获取图片)</code></p>
            <p><input type="text" class="form-control" value="w=300&h=200&bg=0066ff&fc=ff6600" onchange="$('#placeholder-frame').attr({src:'http://wf.f2e-server.com/placeholder.jpg?'+this.value});"></p>
            <p><img id="placeholder-frame" src="http://f2e-server.com/placeholder.jpg?w=300&amp;h=200&amp;bg=0066ff&amp;fc=ff6600"></p>
            <p>参数样例:<code>/placeholder.jpg?w=320&amp;h=200&amp;bg=0066ff&amp;fc=ff6600</code></p>
            <ul>
                <li><code>w :</code> 图片宽度</li>
                <li><code>h :</code> 图片高度</li>
                <li><code>bg:</code> 背景颜色</li>
                <li><code>fc:</code> 字体颜色</li>
            </ul>
            <p class="bg-warning">placeholder插件通过java-swing技术实现, 需要本机的jre环境支持。</p>
        </section>

        <section id="crx">
            <h2>Chrome插件</h2>
            <p>f2e-server 内置一个chrome插件开发目录, 目前提供了两个简单的插件功能(后续可能提供更多功能)</p>
            <ol>
                <li>浏览器二维码本地生成</li>
                <li>css-sprite图片合并</li>
            </ol>
            <p>如何导入:</p>
            <ol>
                <li>
                    打开chrome扩展程序 <code>chrome://extensions/</code>
                    <p><img src="images/other-crx-1.gif" alt="打开chrome扩展程序"></p>
                </li>
                <li>
                    打开开发者模式
                    <p><img src="images/other-crx-2.gif" alt="打开开发者模式"></p>
                </li>
                <li>
                    加载正在开发的扩展程序
                    <p><img src="images/other-crx-3.gif" alt="加载正在开发的扩展程序"></p>
                </li>
                <li>
                    完成
                    <p><img src="images/other-crx-4.gif" alt="完成"></p>
                </li>
                <li>
                    点击浏览器右上角小图标 <img src="images/f2e.png" width="20" alt="f2e"> 可查看当前页面的二维码
                    <p><img src="images/other-crx-5.gif" alt="查看二维码"></p>
                </li>
                <li>
                    <h4>CSS-Sprite</h4>
                    <p>f2e-server 内置的 css-sprite 通过chrome插件实现, 可以操作任意css文件</p>
                    <p>在访问列表中查看css/less文件时, 点击如图链接:</p>
                    <p><img src="images/other-crx-7.gif" alt="css-sprite链接"></p>
                    <p>进入后先点击 <a href="javascript:void(0);" class="btn btn-success">Sprite</a> 保存合并图片, 再点击存储css文件</p>
                    <p><img src="images/other-crx-8.gif" alt="css-sprite界面"></p>
                    <p class="bg-warning">事实上:在css文件路径后面手动添加search参数 <code>css-sprite</code> 就可以开启</p>    
                </li>
            </ol>
        </section>

        <section id="livereload">
            <h2>实时刷新</h2>
            <p class="bg-warning">项目文件夹下面任何文件文件夹变化都会触发刷新操作</p>
            <p>如果想要快速支持页面自动刷新,可以在访问url后面增加search参数 <code>listen=true</code></p>
            <p><img src="images/other-livereload.gif"></p>
            <h3>实时刷新-热部署</h3>
            <ol>
                <li>在conf.js 文件中配置 <code>livereload</code> 将支持实时将修改的文件自动输出到output目录</li>
                <li><span class="btn bg-primary">注</span><span class="btn bg-warning">需要在项目根目录页面,点击“项目输出” 确保首次项目路径完成</span></li>
                <li>使用项目时候为了能够在其他服务器上面也能使用到f2e-server的livereload,提供了代码嵌入的方式这个需要配置文件映射</li>
                <li>另外,由于部分子文件修改,会导致一系列文件关联更新,所以也保留相关接口,配置样例如下:</li>
                <li><pre class="language-javascript"><code>livereload: {
    inject: function(pathname){
        // 只在html文件中插入livereload代码
        return pathname.match(/\.html/);
    },
    relative: function(pathname){
        var root = conf.root;
        if(pathname.match(/layout\.html/)){
            // 如果是layout.html修改, pages文件夹下面所有管理的文件都需要修改。
            return fs.readdirSync(path.join(root, 'pages'))
            .map(function(filename){
                return 'pages/' + filename;
            });
        }
    }        
}</code></pre></li>
            </ol>
        </section>

</div>
<div class="page_bottom col-md-9 pull-right">
    <a href="build.html" class="pull-left">上一节: 项目构建</a>
</div>
</section>