成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

利用Gulp實(shí)現(xiàn)JSDoc 3的文檔編寫(xiě)過(guò)程中的實(shí)時(shí)解析和效果預(yù)覽

娣辯孩 / 3175人閱讀

摘要：所有關(guān)于的推薦文章中，都提到了自身配有的一個(gè)小工具。說(shuō)到底還是為了方便實(shí)驗(yàn)以及實(shí)驗(yàn)對(duì)的使用，并沒(méi)有過(guò)多考慮實(shí)際生產(chǎn)環(huán)境中的效率問(wèn)題。

關(guān)于不同的Javascript文檔生成工具，可以參考我之前寫(xiě)的一篇文章《Javascript自動(dòng)化文檔工具：YUI Doc, JSDoc 3, JSDuck等比較》。本文中則要講講如何能夠基于Gulp構(gòu)建一個(gè)快速幫你預(yù)覽對(duì)應(yīng)注釋所生成文檔的小工具。

所有關(guān)于YUIDoc的推薦文章中，都提到了YUIDoc自身配有的一個(gè)小工具：YUIDoc Live Preview。這個(gè)工具可以幫助你更快速的預(yù)覽你所寫(xiě)的注釋對(duì)應(yīng)生成的文檔。你只需要保存注釋，然后打開(kāi)瀏覽器訪問(wèn)127.0.0.1:3000，就可以看到生成的文檔樣式了。對(duì)于尚且不熟悉YUIDoc語(yǔ)法、減少反復(fù)跑命令行調(diào)試來(lái)說(shuō)，是一個(gè)非常好用的工具。

我非常心儀YUIDoc的這個(gè)功能，而且反復(fù)在Terminal上跑JSDoc的生成命令實(shí)在是太過(guò)于麻煩了，于是決定自己動(dòng)手試試用Gulp在JSDoc 3上實(shí)現(xiàn)類似的功能。說(shuō)到底還是為了方便實(shí)驗(yàn)JSDoc 3以及實(shí)驗(yàn)對(duì)Gulp的使用，并沒(méi)有過(guò)多考慮實(shí)際生產(chǎn)環(huán)境中的效率問(wèn)題。

Gulp是一個(gè)類似與Grunt的腳本任務(wù)定義、執(zhí)行工具。詳細(xì)的關(guān)于Gulp的內(nèi)容你可以參考它的官網(wǎng)。它依賴于NodeJS的Stream概念，減少了類似Grunt中對(duì)于文件的反復(fù)讀寫(xiě)，同樣的任務(wù)使用Gulp的定義確實(shí)在我看來(lái)比Grunt稍微優(yōu)雅一點(diǎn)。

安裝Gulp 
npm install --save-dev gulp

無(wú)論是JSDoc還是Gulp都在官方文檔上推薦了Global和local雙重安裝的方式，然而根據(jù)Stackoverflow上的這篇回答，我認(rèn)為locally安裝可能對(duì)于應(yīng)用的部署確實(shí)存在好處。
一方面可以保證用戶始終通過(guò)package.json獲取最新/指定的module，另一方面本地安裝不需要sudo權(quán)限，對(duì)于用戶的操作帶來(lái)了不少便利。即使使用locally安裝，仍然可以通過(guò)添加script的方式來(lái)使用命令行調(diào)用命令，比如下面的就可以使用npm run test，來(lái)調(diào)用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)

上述參數(shù)中的結(jié)構(gòu)如下：

template ＝ {
     path: "path_to_template",
     anyTemplateSpecificParameter: "whatever"
}

infos = {
     name: ""    //定義項(xiàng)目的名稱，同時(shí)在des中會(huì)生成對(duì)應(yīng)的folder，便于管理多個(gè)項(xiàng)目
     description: ""   
     version: ""  //定義項(xiàng)目的版本，同時(shí)會(huì)在項(xiàng)目的folder里面生成版本的folder，用于管理不同版本的文檔
     licenses: []
     plugins: false    //type: []
}

options = {
    "private": false,
    monospaceLinks: false,
    cleverLinks: false,
    outputSourceFiles: true
}

目前Gulp的方式尚且不能支持Tutorial和conf.json中source的過(guò)濾。
jsdoc的執(zhí)行實(shí)際分成jsdoc.parser和jsdoc.generator兩步，如果你的程序需要將這兩步分開(kāi)處理也可以分別調(diào)用這兩個(gè)方法。

利用Gulp實(shí)現(xiàn)類YUI即時(shí)調(diào)試的程序

任務(wù)的實(shí)現(xiàn)邏輯非常簡(jiǎn)單，定義好文檔輸出位置、模版等等生成所需要的信息之后，只需要讓gulp監(jiān)聽(tīng)src文件夾下對(duì)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

就可以啟動(dòng)對(duì)于文件夾的監(jiān)聽(tīng)，保存js的時(shí)候自然就會(huì)生成最新的文檔，這樣你就可以立刻看到生成的文檔是不是符合你的心意的東西了。另外悄悄的說(shuō)一句，使用了這樣的方法實(shí)驗(yàn)了幾天對(duì)JSDoc 3的使用之后，發(fā)現(xiàn)它的語(yǔ)法真的是太僵硬了，于是棄而轉(zhuǎn)用了JSDuck。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/91482.html

相關(guān)文章

  • JavaScript開(kāi)發(fā)工具大全

    摘要：發(fā)布于之后，采用了完全不同的方式，使用函數(shù)定義任務(wù)。它允許開(kāi)發(fā)者使用它們的補(bǔ)丁和更新來(lái)修復(fù)這些安全漏洞。提供了工具用于掃描依賴來(lái)監(jiān)測(cè)漏洞。是一個(gè)開(kāi)源診斷工具，用于和應(yīng)用。是和開(kāi)發(fā)的一款新的包管理工具。與相比，它解決了安全性能以及一致性問(wèn)題。 譯者按: 最全的JavaScript開(kāi)發(fā)工具列表，總有一款適合你！ 原文: THE ULTIMATE LIST OF JAVASCRIPT TOO...

    nifhlheimr 評(píng)論0 收藏0

  • 前端開(kāi)發(fā)：實(shí)時(shí)刷新（及時(shí)預(yù)覽）工具小匯總，兼有gulp+browser-sync設(shè)置方法

    摘要：打開(kāi)您的命令行工具，進(jìn)入到目錄下，運(yùn)行以下其中一條命令。將創(chuàng)建一個(gè)本地服務(wù)器并自動(dòng)打開(kāi)你的瀏覽器后訪問(wèn)地址，這一切都會(huì)在命令行工具里顯示。 自己寫(xiě)標(biāo)簽： 實(shí)時(shí)刷新、 免F5、 gulp + browser-sync 開(kāi)門(mén)見(jiàn)山，首先講明一下本文的定位吧：寫(xiě)這篇文章是因?yàn)樽约涸谄綍r(shí)的學(xué)習(xí)中，一次次試驗(yàn)了很多的前端實(shí)時(shí)刷新工具，有順手的，有蹩腳的，有簡(jiǎn)單的，有麻煩的，安裝完又折騰，折騰完又卸...

    villainhr 評(píng)論0 收藏0

  • Javascript自動(dòng)化文檔工具：YUI Doc, JSDoc 3, JSDuck等比較

    摘要：本文比較了種較為主流的注釋文檔生成工具。應(yīng)該說(shuō)是非常適合開(kāi)源項(xiàng)目多個(gè)作者共同維護(hù)的一個(gè)文檔工具。最后我選擇了作為文檔生成的工具。為了支持多種語(yǔ)言，它僅對(duì)注釋塊內(nèi)部的內(nèi)容進(jìn)行解析。 最近隨著寫(xiě)Node以及獨(dú)立的CommonJS模塊越來(lái)越多，我發(fā)現(xiàn)有一份好的文檔不僅可以幫助自己在應(yīng)用這些接口的時(shí)候不至于迷糊，而且對(duì)于共同開(kāi)發(fā)的情況下，能夠省去大量團(tuán)隊(duì)的交流和Debug的時(shí)間。 本文比較了...

    tyheist 評(píng)論0 收藏0

  • 前端代碼質(zhì)量進(jìn)階：自定義 eslint 規(guī)則校驗(yàn)業(yè)務(wù)邏輯

    摘要：自定義規(guī)則校驗(yàn)代碼業(yè)務(wù)邏輯是社區(qū)中主流的工具，提供的大量規(guī)則有效的保障了許多項(xiàng)目的代碼質(zhì)量。本文將介紹如何通過(guò)自定義檢查規(guī)則，校驗(yàn)項(xiàng)目中特有的一些業(yè)務(wù)邏輯，如特殊作用域特殊使用規(guī)范性等。 自定義 eslint 規(guī)則校驗(yàn)代碼業(yè)務(wù)邏輯 eslint 是 JavaScript 社區(qū)中主流的 lint 工具，提供的大量規(guī)則有效的保障了許多項(xiàng)目的代碼質(zhì)量。本文將介紹如何通過(guò)自定義 eslint ...

    Coly 評(píng)論0 收藏0

  • gulp-work-flow 前端工作流原來(lái)可以這么簡(jiǎn)單

    摘要：話不多說(shuō)，今天的主題是使用打造傳統(tǒng)項(xiàng)目的前端工作流。是一個(gè)廣泛使用的轉(zhuǎn)碼器，可以將代碼轉(zhuǎn)為代碼，從而在現(xiàn)有環(huán)境執(zhí)行。這意味著，你可以用的方式編寫(xiě)程序，又不用擔(dān)心現(xiàn)有環(huán)境是否支持。 概述 最近前端一直是一個(gè)火熱的話題，前端技術(shù)棧也是伴隨著nodejs的出現(xiàn)而更替的飛快，導(dǎo)致大部分前端開(kāi)發(fā)者曾一度迷茫在這各種技術(shù)選型上，比如前端自動(dòng)化工具就有Grunt，Gulp，Webpack，F(xiàn)is3等...

    weakish 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<