博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
利用Gulp实现JSDoc 3的文档编写过程中的实时解析和效果预览
阅读量:5747 次
发布时间:2019-06-18

本文共 2049 字,大约阅读时间需要 6 分钟。

关于不同的Javascript文档生成工具,可以参考我之前写的一篇文章。本文中则要讲讲如何能够基于Gulp构建一个快速帮你预览对应注释所生成文档的小工具。

所有关于YUIDoc的推荐文章中,都提到了YUIDoc自身配有的一个小工具:。这个工具可以帮助你更快速的预览你所写的注释对应生成的文档。你只需要保存注释,然后打开浏览器访问127.0.0.1:3000,就可以看到生成的文档样式了。对于尚且不熟悉YUIDoc语法、减少反复跑命令行调试来说,是一个非常好用的工具。

我非常心仪YUIDoc的这个功能,而且反复在Terminal上跑JSDoc的生成命令实在是太过于麻烦了,于是决定自己动手试试用Gulp在JSDoc 3上实现类似的功能。说到底还是为了方便实验JSDoc 3以及实验对Gulp的使用,并没有过多考虑实际生产环境中的效率问题。


Gulp是一个类似与Grunt的脚本任务定义、执行工具。详细的关于Gulp的内容你可以参考它的。它依赖于NodeJS的Stream概念,减少了类似Grunt中对于文件的反复读写,同样的任务使用Gulp的定义确实在我看来比Grunt稍微优雅一点。

安装Gulp

npm install --save-dev gulp

无论是JSDoc还是Gulp都在官方文档上推荐了Global和local双重安装的方式,然而根据Stackoverflow上的,我认为locally安装可能对于应用的部署确实存在好处。

一方面可以保证用户始终通过package.json获取最新/指定的module,另一方面本地安装不需要sudo权限,对于用户的操作带来了不少便利。即使使用locally安装,仍然可以通过添加script的方式来使用命令行调用命令,比如下面的就可以使用npm run test,来调用gulp test命令而不是加上./node-module/bin...

"devDependencies": {     "gulp": "latest"}"scripts": {     "test": "gulp test"}

gulp-jsdoc插件

npm install --save-dev gulp-jsdoc

jsdoc最主要的方法如下:

jsdoc(destination, template, infos, options)

上述参数中的结构如下:

template = {     path: 'path_to_template',     anyTemplateSpecificParameter: 'whatever'}infos = {     name: ''    //定义项目的名称,同时在des中会生成对应的folder,便于管理多个项目     description: ''        version: ''  //定义项目的版本,同时会在项目的folder里面生成版本的folder,用于管理不同版本的文档     licenses: []     plugins: false    //type: []}options = {    'private': false,    monospaceLinks: false,    cleverLinks: false,    outputSourceFiles: true}

目前Gulp的方式尚且不能支持Tutorial和conf.json中source的过滤。

jsdoc的执行实际分成jsdoc.parser和jsdoc.generator两步,如果你的程序需要将这两步分开处理也可以分别调用这两个方法。

利用Gulp实现类YUI即时调试的程序

任务的实现逻辑非常简单,定义好文档输出位置、模版等等生成所需要的信息之后,只需要让gulp监听src文件夹下对js文件的修改就可以了。

var gulp = require('gulp'),    jsdoc = require("gulp-jsdoc");gulp.task('generate', function(){     return gulp.src("./src/*.js")            .pipe(jsdoc('./documentation-output'))});gulp.task('watch', function(){     gulp.watch('./src/*.js', ['generate']);});gulp.task('default', ['generate']);

一切就绪之后,你只需要

gulp watch

就可以启动对于文件夹的监听,保存js的时候自然就会生成最新的文档,这样你就可以立刻看到生成的文档是不是符合你的心意的东西了。另外悄悄的说一句,使用了这样的方法实验了几天对JSDoc 3的使用之后,发现它的语法真的是太僵硬了,于是弃而转用了JSDuck。

转载地址:http://hlazx.baihongyu.com/

你可能感兴趣的文章
与众不同 windows phone (48) - 8.0 其它: C# 调用 C++
查看>>
Zookeeper Tutorial 2 -- Programmer's Guide
查看>>
树形结构 DropDownList
查看>>
RapeLay(电车之狼R)的结局介绍 (隐藏结局攻略)
查看>>
Lua的function、closure和upvalue
查看>>
[转]学习C#:Attribute与Property
查看>>
Error opening zip file or JAR manifest missing : D:\play-1.2.5/framework/play-1.2.5.jar
查看>>
MySQL自定义查询字段排序
查看>>
JS思维之路菜鸟也能有大能量(1)--模拟push
查看>>
Imatest 崩溃
查看>>
领域驱动设计之单元测试最佳实践(二)
查看>>
Python实现C代码统计工具(三)
查看>>
CentOS下安装LAMP环境
查看>>
2015年最全的移动WEB前端UI框架
查看>>
[工具] 将Sublime Text 3配置为Java代码编辑器
查看>>
iOS开发UI篇—APP主流UI框架结构
查看>>
Glide.centerCrop()第一次显示无效
查看>>
深入理解 CSS 的 :before 和 :after 选择器(制作select下拉列表美化插件)
查看>>
一站式学习Wireshark(九):应用Wireshark显示过滤器分析特定数据流(上)
查看>>
hive中order by,sort by, distribute by, cluster by作用以及用法
查看>>