git源代码⾃动检查_gitlab-tree—gitlab代码查看必备神器
废话不说，先上下载链接：Gitlab-Tree
缘起
Gitlab作为现在互联⽹企业的标配，是⼀款⾮常优秀的代码源代码管理⼯具。在⽇常⼯作中常常需要查看其他系统的代码，有时候仅仅需要查看某个项⽬的某个⽂件，如果把整个代码库(repository)克隆(clone)到本地再查看并不是⼀个省时省⼒、⾼效率的办法。
基于这种场景，⼀款可以在线查看gitlab代码的辅助⼯具诞⽣了——gitlab-tree，简单介绍就是可以使⽤树形菜单⽅便的浏览Gitlab代码的chrome插件。解决了需要在gitlab上查看代码⽽不需要clone到本地的痛点，提⾼⼯作效率。
这款插件以树形菜单的形式展⽰当前浏览的代码仓库的⽬录结构，当⽤户点击到⼆级⽬录或更深层次的⽬录时，可以⾃动展开树形菜单的节点；如果点击代码⽂件，可以以⽆刷新页⾯的⽅式在右侧区域展⽰当前代码⽂件的内容，并进⾏代码⾼亮。
实现⽅案
使⽤gitlab浏览代码遇到层级过深的项⽬时，⽂件切换会很浪费时间。如果能够在⽤户浏览代码时⾃动出现⼀个⼯具，这个⼯具有树形列表⽬录，可以展开或收起节点，同时点击⽂件名可以在右侧代码区域展⽰⽂件内容，并且进⾏⾼亮显⽰，最好页⾯不要有刷新操作，减少⽤户等待时间。这样的话可以节省很多时间。
基于此决定使⽤：
树形菜单使⽤jstree.js构建；
由于逻辑不太复杂，所以使⽤jquery作为dom操作的类库；
使⽤nprogress.js增加进度条和loading效果；
使⽤highlight.js进⾏代码⾼亮显⽰；
使⽤HTML5的history pushState、replaceState保持URL同步变换；
基于Chrome extention开发模式，最终发布到Chrome web store上供⽤户安装使⽤。
前端技术选型上不困难，难点在于需要通过Gitlab API获取项⽬结构、⽂件内容等数据。这就需要去看gitlab的API⽂档。
开发完成后使⽤了gulp作为代码压缩打包⼯具，最后将再zip包上传到google chrome web store。
下⼀步计划
作为个⼈业余项⽬，⽬前也有超过1200+个⽤户。除了我⾃⼰的需求以外，还有好多来⾃社区的意见，⽐如现在呼声较⾼的是增加对gitlab10.x 的⽀持，可以考虑以后版本中加上这个功能。
个⼈精⼒有限，难免会有bug，如果⼤家在使⽤的过程中发现任何问题，欢迎和我联系。
>jquery源码在线

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。