频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
前端自动生成ChangeLog的设计与实现
2018-09-29 10:37:36           
收藏   我要投稿

    世界杯外围投注官网

    开发目的

    快速可交互的搭建生成Change Log更新日志,来提高自己的工作效率。

    实现思路

    要实现Change log自动生成,需要有脚本可以根据项目提交的commit自动生成Change log ,然后还有脚本自动生成版本号,而且每次生成可以自动修改版本号,还需要把生成的Change log 的markdown文件转换成HTML,以便我们在项目中使用 ,既然要转成HTML文件,那就还需要有HTML的模板。

    第三方库

    搭建changeLog过程中使用到的库

    conventional-changelog ——根据commit生成Change log
    conventional-changelog-cli ——根据commit生成Change log的脚手架
    marked.js ——解析markdown文件,markdown文件转换成HTML
    commander ——可以自动的解析命令和参数,用于处理世界杯体育投注平台输入的命令
    chalk ——在终端给输出的命令行字体加上颜色
    log-symbols ——在终端可以输出 √ 或 × 等的图标
    inquirer ——通用的命令行世界杯体育投注平台界面集合,用于和世界杯体育投注平台进行交互
    shelljs ——可使用shell命令来操作文件

    具体实现

    根据实现思路,分步骤实现此功能

    脚本自动生成版本号,而且每次生成可以自动修改版本号

    // 读取版本号

    function readFile(url) {
       var promise = new Promise((resolve, reject) => {
          fs.readFile(path.resolve(__dirname, url), &世界杯外围投注官网39;utf8&世界杯外围投注官网39;, (err, rs) => {
             if (err) {
                reject(chalk.red.bold(logSymbols.error, &世界杯外围投注官网39;读取文件失败 \n&世界杯外围投注官网39; + err));
             } else {
                let temp = JSON.parse(rs);
                resolve(temp);
             }
          })
       })
       return promise
    }
    

    // 写入版本号

    function writeFile(url, version) {
        var promise = new Promise((resolve, reject) => {
            fs.readFile(path.resolve(__dirname, url), &世界杯外围投注官网39;utf8&世界杯外围投注官网39;, (err, data) => {
                if (err) {
                    throw err;
                    reject(chalk.red.bold(logSymbols.error, &世界杯外围投注官网39;读取文件失败 \n&世界杯外围投注官网39; + err))
                } else {
                    var tempData = JSON.parse(data);
                    tempData.version = version;
                    var content = JSON.stringify(tempData, null, 4)
                    fs.writeFile(path.resolve(__dirname, url), content, err => {
                        if (err) {
                            reject(chalk.red.bold(logSymbols.error, &世界杯外围投注官网39;写入文件失败 \n&世界杯外围投注官网39; + err))
                        } else {
                            console.log(chalk.green.bold(logSymbols.success, url + &世界杯外围投注官网39; 写入版本号成功&世界杯外围投注官网39;));
                            resolve(true)
                        }
                    })
                }
            })
        })
        return promise
    }
    

    // 比较版本号

    function compareVersion(v1, v2) {
        var arr1 = v1.replace(/[-_]/g, &世界杯外围投注官网39;.&世界杯外围投注官网39;).split(&世界杯外围投注官网39;.&世界杯外围投注官网39;);
        var arr2 = v2.replace(/[-_]/g, &世界杯外围投注官网39;.&世界杯外围投注官网39;).split(&世界杯外围投注官网39;.&世界杯外围投注官网39;);
        var len = Math.max(arr1.length, arr2.length);
        for (var i = 0; i < len; i++) {
            if (parseInt(arr1[i]) == parseInt(arr2[i])) continue;
            return parseInt(arr1[i]) < parseInt(arr2[i]) ? true : false;
        }
        return false;
    }
    

    把生成的Change log 的markdown文件转换成HTML

    // 读取html模板文件
    fs.readFile(path.resolve(__dirname, &世界杯外围投注官网39;../static/changeLog/template.html&世界杯外围投注官网39;), &世界杯外围投注官网39;utf8&世界杯外围投注官网39;, (err, template) => {
       if (err) {
          throw err;
       } else {
          fs.readFile(filePath, &世界杯外围投注官网39;utf8&世界杯外围投注官网39;, (err, markContent) => {
             let replaceList = [
                {
                   &世界杯外围投注官网39;re&世界杯外围投注官网39;: /http:\/\/git\.ascs\.tech\/website/g,
                   &世界杯外围投注官网39;reAim&世界杯外围投注官网39;: &世界杯外围投注官网39;https://bitbucket.ascs.tech/projects/WEBSITE/repos&世界杯外围投注官网39;
                },
             ];
             for (let item of replaceList) {
                markContent = markContent.replace(item.re, item.reAim);
             }
             if (err) {
                throw err;
             } else {
                let htmlStr = marked(markContent.toString());
                template = template.replace(&世界杯外围投注官网39;@markdown&世界杯外围投注官网39;, htmlStr);
                fs.writeFile(path.resolve(__dirname, &世界杯外围投注官网39;../static/changeLog/CHANGELOG.html&世界杯外围投注官网39;), template, err => {
                   if (err) {
                      throw err;
                   } else {
                      console.log(chalk.green.bold(logSymbols.success, &世界杯外围投注官网39; 成功将markdown文件转换成HTML文件&世界杯外围投注官网39;));
                   }
                })
             }
          })
       }
    })
    

    HTML的模板

    
    
    
    
    
    CityWorks? Intranet

    更新日志


    @markdown

    使用command.js来解析命令和参数

    program
       .command(&世界杯外围投注官网39;simple&世界杯外围投注官网39;)
       .option(&世界杯外围投注官网39;-s --simple&世界杯外围投注官网39;)
       .alias(&世界杯外围投注官网39;s&世界杯外围投注官网39;)
       .description(&世界杯外围投注官网39;需要配置文件的简单初始化&世界杯外围投注官网39;)
       .action(function () {
    使用inquirer来进行命令行的交互
    Plain Text
    inquirer
       .prompt([
          {
             type: &世界杯外围投注官网39;input&世界杯外围投注官网39;,
             name: &世界杯外围投注官网39;version&世界杯外围投注官网39;,
             message: &世界杯外围投注官网39;请输入新的版本号:&世界杯外围投注官网39;,
             validate: function (input) {
                var isVersion = changeVersion.compareVersion(rs.version, input);
                if (isVersion) {
                   return true
                } else {
                   return &世界杯外围投注官网39;请输入正确的版本号&世界杯外围投注官网39;
                }
             }
          }
       ])
       .then((answers) => {
          (async function test() {
             await changeVersion.writeHtmlFile(answers.version)
             for (let i of config.changeVersionPath) {
                await changeVersion.writeFile(i, answers.version)
             }
             await shell.exec(&世界杯外围投注官网39;conventional-changelog -p angular -i CHANGELOG.md -s&世界杯外围投注官网39;)
             await console.log(chalk.green.bold(logSymbols.success, &世界杯外围投注官网39; 成功增加版本信息&世界杯外围投注官网39;))
             var execUrl = "./bin/createChangeLog.js";
             await shell.exec(&世界杯外围投注官网39;node &世界杯外围投注官网39; + execUrl);
          })()
       });
    
点击复制链接 与好友分享!回本站首页
上一篇:css居中对齐的几种方法实例分享
下一篇:表单设计新手指导手册
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑--致力于做实用的IT技术学习网站