node package manager
Stop writing boring code. Discover, share, and reuse within your team. Create a free org »

grunt-docs-builder

Index

  • yuidocjs
  • handlebar
  • merge yuidoc obj and demo, insert header and footer

工具介绍

对文档的一些部分进行了抽象,如Getting Start | Description | Demo | ATTRS | API | Classes Description等 为了方便大家写公用模块使用文档, 除了Demo外,其他部分都是可以通过YUIDOC注释文档来自动生成

目的

通过自动化工具,提高大家写demo的积极性 让更多人使用已有的东西, 减少入门成本 推动组件化开发

使用说明

1、修改配置文件guide.json

  • fecore的配置文件guide.json已经提交到代码库

配置文件guide.json说明
{
    //baseUri&&yuiVersion用于默认的头部模板中的动态数据填充,如果自定制模板tpl就不需要
    //baseUri是提供fecore、yui等资源的静态服务器访问地址
    "baseUri": "http://fe.com?f=",
    "yuiVersion": "3.10.3",
    //需要build guide的目录
    "codeDir": "/Users/jiao/workspace/fecore",
    //定制头部模板和尾部模板【可选】
    "tpl": {
        "header": "header.html",
        "footer": "footer.html"
    },  
    //build后的guide发布的目录
    "outDir": "./guide",
    //codeDir内容过滤
    "src": [
        "**/guide/*.html",
        "!node_modules/**/*.html",
        "!**/*_build.html",
        "!api/**/*.html"
    ],  
    //必填
    "extends": [ "../base.json" ]
}

2、 在命令行执行:

  • 执行完即可在当前目录下看到生成的guide 文件夹里面的静态guide文件, 推荐大家使用anywhere来运行

cd fecore
git pull
npm install
grunt buildguide

注意

buildguide 会打包js模块中所有assets文件, 如guide中需要用到一些img或者css来更加丰富的表现demo, 可以直接在guide文档中如下引用 img: img:

TODO

  • guide源文件支持markdown格式
  • 开放自动生成内容的定制功能, 即解析yuidoc生成的data.json给用户自己组合模板