JS Document and Demo Automation generation Tool-Smartdoc release

Once upon a time, when you code God possessed, all the way through the completion of code, with "A yard in hand, the world I have" proudly look around, but found that unit testing, API documentation, demo instances to you smashed, suddenly there is a wood has a kind of ice water challenge after the feeling. And then you should: Yo yo, fast use smartdoc;

Smartdoc, a Nodejs-based automated document Generation tool, she has eyes (Yuidoc engine), gorgeous outerwear (bootstrap 3 style), Dexterous hands (demo generation, codemirror code editing, Jasmine interface compatible); have her, I believe you will be shouts: "The little friends no longer have to worry about my API." "

Recently a lot of friends asked me Smartjs some of the API, I use Yuidoc and bootstrap2 the theme of all sorted out, but found that only the API is not specific examples are more difficult to understand, and few people will look at unit testing. Then, the document, Unit test, demo integration to provide a complete generation plan, this has smartdoc.

　　

Smartdoc 0.1.0 Fresh Shelves

Has the following characteristics:

   * 基于Bootstrp3构建，排版和样式美化   * 支持html和js的Demo生成,与查看   * 提供在线的demo编辑页面（类似于jsfiddler）   * 同步jasmine的expect接口，使得单元测试与example的代码能够复用   * 可以配置化增强 - 项目信息配置；Document页面导航配置；demo依赖库配置   * 提供全局api查询和导航过滤功能，筛选更加便利   * 提供grunt插件 - grunt-contrib-smartdoc

界面讲解

全局过滤

通过右侧全局过滤，可以快速检索所有的API，点击可以跳转到API页面并定位到对于的位置；支持全键盘操作






源代码展示

点击代码位置的链接，就可以进入源代码展示页面





Example演示页面

点击Example区域的Edit Code按钮开启代码编辑页面，如下：



页面中有HTML和Code两个编辑区域和结果的展示区域，代码编辑器使用codemirror，sublime风格，支持智能感知，可以通过配置项来引入样式和脚本库。

提供log和expect公共方法；

　　log：在结果区输出日志信息

　　expect ：兼容jasmine的expect方法



在example区域中写入html代码时，使用

注1：代码编辑页面必须需要服务器环境才能正常运行，本地文件方式只能使用view demo页面查看结果；


View Demo页面

在Example区域点击view demo按钮或者在code edit页面点击view in new window进入；

页面上展示最终结果


单独使用说明

在目录中加入docConfig.js文件，详细配置如下:

Module.exports = {    //scanned file pathPaths: [' input/'],    //Document page Output pathOutDir: ' doc/',    //Project Information ConfigurationProject: {//Project NameName: ' Smartdoc ',        //item description, HTML can be configured, generated to document home pageDescription: ' ,        //Version InformationVersion: ' 1.1.0 ',        //Address InformationURL: ' Https://github.com/zhh77/smartjs ',        //logo AddressLogo: ' Https://github.com/zhh77/logo.png ',        //Navigation InformationNavs: [{name:"Home", URL:"Https://github.com/zhh77/smartjs"}, {name:"Document", URL:""}, {name:"About", URL:"Https://github.com/zhh77/smartjs"        }]    },    //Demo Display page configuration, need to load resources, resources can only be CSS and JS filesDemo: {//External Resource LinksLink: [' http://code.jquery.com/jquery-1.11.0.min.js '],        //file copy path; Copy the resources in the Doc build directory and reference the Deom pagePaths: [' input/ui/uicode.js ', ' input/']        //whether to turn on the AutoComplete feature in the Code Editor (which joins the introduction of link and paths);AutoComplete:true    },    //Customizing Theme PathsThemedir: ' theme/',    //Custom HelpersHelpers: ["Theme/helpers/helpers.js"]};

Run the following code:

NPM Install-g Smartdocsmartdoc

Grunt use

If it's grunt, the introductiongrunt-contrib-smartdoc，在grunt配置上述docconfig内容；例如：

//project ConfigurationGrunt.initconfig ({Pkg:grunt.file.readJSON (' Package.json '), Smartdoc: {build: {options: {paths: [' src/'], OutDir:' doc/', Demo: {paths: [' Dest/smart.js ', ' dest/smart-datamanager.js '], Link: [' Http://code.jquery.com/jquery-1.11.0.min.js ']                    },                    //Project Information ConfigurationProject: {Name:' <%= pkg.name%> ',                        //Description: ' <%= pkg.description%> ',Version: ' <%= pkg.version%> ', URL:' Https://github.com/zhh77/smartjs ', Navs: [{name:"Home", URL:"Https://github.com/zhh77/smartjs"}, {name:"Document", URL:"Http://zhh77.github.io/smartjs/"}, {name:"Blog", URL:"http://www.cnblogs.com/zhh8077"}, {name:"Smartdoc", URL:"Https://github.com/zhh77/smartDoc"}] }}}}, ......

End

Smartdoc The first edition focuses on the enhancement of the Yuidoc and the theme of landscaping, there will be time to yuidoc scanning rules to optimize (Yuidoc for module scanning there are still many problems);

Currently still using Yuidoc's annotation rules, more information can be viewed yuidoc, followed by two articles about how to write comments experience

Smartdoc's GitHub Address

Smartjs API address generated using Smartdoc

JS Document and Demo Automation generation Tool-Smartdoc release