前端见微知著番外篇:Bitbucket进行代码管控
2015-11-24 17:08
399 查看
说道代码管控,一般都会提到TFS、Git等,但是在这里我们将要用到Bitbucket,其实其操作方式和Git基本上一样,但是和TFS则有很大的不同了。但是原理基本上都是一致的。
这里我不会过多的涉及到代码的签入,签入,迁移,产生branch,合并等等。我们主要讲解以下几点:
1. 由yeoman产生的项目如何进行精简,然后放入到团队开发的repository server上。
2.如何利用bitbucket进行代码管控。
首先我们来谈谈第一点。
在前面的文章中,我们利用yeoman的各种脚手架搭建了一个能够跑起来的项目,但是项目体积相当的大,达到了200MB左右了,这还是没怎么进行业务逻辑附加的情况下,如果有业务逻辑附加,再加上各种各样的资源文件的加入,估计轻轻松松突破300MB也是非常轻松的事儿。这样一来,上传这些代码文件和资源文件就是一个比较有挑战的事情。我们来看看yeoman生成的项目结构组成:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/23/c3cb1897379fedc9d9c43633d7d50663.png)
但是实际情况是,这些文件其实不必都上传上去,有些文件是可以用命令行生成的。
然后做完这些,就可以将干净的源码上传到源代码服务器,也就是bitbucket中了。
这里我来说一下上传步骤:
首先,我们需要注册一个bitbucket账号,然后用此账号登陆,并在此账号下面创建一个名称为test的repository代码存储仓库:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/23/3af33c0ec191fea8dc011217b9a95c30.png)
然后,我们点击左侧菜单的“Clone”按钮,在弹出的层中,切换到“HTTPS”协议,并将路径拷贝:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/23/887415e7c2fc3f4adabb496db3e39d3e.png)
这里我得到的路径为:https://shichaoyang@bitbucket.org/shichaoyang/test.git
然后打开SourceTree软件(没有的可以在bitbucket上面找链接,目前应该是操纵git方面最好的一套UI了),点击“Clone/New”功能,以便于在将test这个repository克隆到本机上:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/23/99199450e30db1359bb7632a9bed8ee0.png)
点击“Clone”按钮,稍等片刻,就可以看到操作结果了:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/23/53553323c475ef67cf8dbcb166094342.png)
然后我们去安装TortoiseGit软件,具体的软件地址,还是自己百度一下。
安装完毕后,我们将精简的代码拷入到这个路径下,E:\test中,然后右击,在弹出菜单中选择“Git commit->master”命令。在弹出对话框中,全选所有文件,并附加comment,最后点击ok即可:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/23/d22d8702e7ad93d29d4a51283cb2fbee.png)
然后系统会提示我们提交完毕:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/23/e1282af3e6f50fc338e94113bce685ec.png)
最后切换到SourceTree,然后我们就会看到有27个文件已经被提交了上来:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/23/7429bf4c44fa9397b8065934e4d9cea0.png)
最后我们点击“Push”按钮,即可将这些文件全部签入到bitbucket的repository中:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/23/347f1e424ac5b3772dc736e662238a2e.png)
而至于后续的文件修改什么的,则只需要先鼠标右键commit,然后在sourcetree中进行push一下即可。这样我们就可以看到详细的提交记录了。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/23/e9d2a29781af0cedde4d222c0ab1d412.png)
好了,就到这里。
需要提示一下,如果在npm install,bower install,grunt serve,grunt test过程中,遇到python编译的错误,请安装python2.7的版本,然后设置如下的system variables:
PYTHON C:\Program Files (x86)\Python27\python.exe
PYTHONPATH C:\Program Files (x86)\Python27;
以下内容是我在写这篇文章之前测试的时候做的草稿,记录一下经过以便于备忘:
这里我不会过多的涉及到代码的签入,签入,迁移,产生branch,合并等等。我们主要讲解以下几点:
1. 由yeoman产生的项目如何进行精简,然后放入到团队开发的repository server上。
2.如何利用bitbucket进行代码管控。
首先我们来谈谈第一点。
在前面的文章中,我们利用yeoman的各种脚手架搭建了一个能够跑起来的项目,但是项目体积相当的大,达到了200MB左右了,这还是没怎么进行业务逻辑附加的情况下,如果有业务逻辑附加,再加上各种各样的资源文件的加入,估计轻轻松松突破300MB也是非常轻松的事儿。这样一来,上传这些代码文件和资源文件就是一个比较有挑战的事情。我们来看看yeoman生成的项目结构组成:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/23/c3cb1897379fedc9d9c43633d7d50663.png)
但是实际情况是,这些文件其实不必都上传上去,有些文件是可以用命令行生成的。
.tmp文件夹不用上传,这个文件作为source和dist的中介,不必上传。
bower_components文件夹不用上传,因为团队成员完全可以自己在本地利用bower install命令独立进行下载。
dist文件夹不用上传,这个文件夹专门放置发布的文件。
node_modules文件夹不用上传,这里放置node包。
repository下的.git目录不要删掉,因为这里是git源代码控制器的包。
然后做完这些,就可以将干净的源码上传到源代码服务器,也就是bitbucket中了。
这里我来说一下上传步骤:
首先,我们需要注册一个bitbucket账号,然后用此账号登陆,并在此账号下面创建一个名称为test的repository代码存储仓库:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/23/3af33c0ec191fea8dc011217b9a95c30.png)
然后,我们点击左侧菜单的“Clone”按钮,在弹出的层中,切换到“HTTPS”协议,并将路径拷贝:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/23/887415e7c2fc3f4adabb496db3e39d3e.png)
这里我得到的路径为:https://shichaoyang@bitbucket.org/shichaoyang/test.git
然后打开SourceTree软件(没有的可以在bitbucket上面找链接,目前应该是操纵git方面最好的一套UI了),点击“Clone/New”功能,以便于在将test这个repository克隆到本机上:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/23/99199450e30db1359bb7632a9bed8ee0.png)
点击“Clone”按钮,稍等片刻,就可以看到操作结果了:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/23/53553323c475ef67cf8dbcb166094342.png)
然后我们去安装TortoiseGit软件,具体的软件地址,还是自己百度一下。
安装完毕后,我们将精简的代码拷入到这个路径下,E:\test中,然后右击,在弹出菜单中选择“Git commit->master”命令。在弹出对话框中,全选所有文件,并附加comment,最后点击ok即可:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/23/d22d8702e7ad93d29d4a51283cb2fbee.png)
然后系统会提示我们提交完毕:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/23/e1282af3e6f50fc338e94113bce685ec.png)
最后切换到SourceTree,然后我们就会看到有27个文件已经被提交了上来:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/23/7429bf4c44fa9397b8065934e4d9cea0.png)
最后我们点击“Push”按钮,即可将这些文件全部签入到bitbucket的repository中:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/23/347f1e424ac5b3772dc736e662238a2e.png)
而至于后续的文件修改什么的,则只需要先鼠标右键commit,然后在sourcetree中进行push一下即可。这样我们就可以看到详细的提交记录了。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/23/e9d2a29781af0cedde4d222c0ab1d412.png)
好了,就到这里。
需要提示一下,如果在npm install,bower install,grunt serve,grunt test过程中,遇到python编译的错误,请安装python2.7的版本,然后设置如下的system variables:
PYTHON C:\Program Files (x86)\Python27\python.exe
PYTHONPATH C:\Program Files (x86)\Python27;
以下内容是我在写这篇文章之前测试的时候做的草稿,记录一下经过以便于备忘:
npm install -g n 更新node npm install -g npm 更新npm npm install -g yo 更新yeoman 安装python npm install -g node-gyp 在跑到最后test通过,不要点击enter,直接点击 中断退出。 然后运行 grunt serve 一切通过 最后运行grunt build 可能会遇到imagemin的问题,请删掉npm_components文件夹下面的所有关于imagemin的文件,然后在package.json中,将版本改成 "grunt-contrib-imagemin": "^0.8.0", 最后运行npm install重新安装一遍即可。 如果要更改一些版本,可以通过 npm install imagemin@3.2.1 等方式来进行。或者直接删掉包,利用npm install进行 如果grunt test 无法跑起来,请尝试命令 npm install grunt-karma --save-dev 如果遇到python的错误,请正确设置以下两个 system variable: PYTHON C:\Program Files (x86)\Python27\python.exe PYTHONPATH C:\Program Files (x86)\Python27; ============================以下是提交========================= 首先,在bitbucket上建立一个空的repository,然后点击新建的repository,然后点击左侧的clone菜单,在弹出的对话框中,下拉选择https,然后得到后缀名为git的链接:https://shichaoyang@bitbucket.org/shichaoyang/test.git 拿到链接,在sourcetree中,点击“clone/New”命令,在弹出的对话框中选择,“Clone Repository”标签,输入url,然后选择destination path,最后点击“Clone”命令即可。 如何提交? 首先,编辑你的文件,编辑完毕后,然后在该文件夹内右击鼠标,选择,"git->comit,master",然后输入comment即可提交,提交完毕后,切换到sourcetree中,会看到push命令上有个数字标签,点击push命令,即可提交到bitbucket的repository中。过程完毕。 最好装个 TurtoiseGit 很方便。
相关文章推荐
- 《转载》2015前端开发框架选型清单
- [javascript]定时器的应用
- jquery根据name属性查找
- 对jQuery插件的一点点认识
- 14.3.3.2 Configuring the Rate of InnoDB Buffer Pool Flushing 配置 InnoDB Buffer Pool 刷新频率
- 简单谈谈node.js 版本控制 nvm和 n
- Metronic V4.5.2 Responsive Admin Dashboard Template build with Twitter Bootstrap 3.3.5
- jsp中获取当前时间
- jQuery实现宽屏图片轮播实例教程
- Java NIO (三) Buffer
- unslider.js轮播
- angularJS学习之路(二十五)---创建服务的五大方法---provider
- js和jquery获取各种宽度和盖度
- 一张图告诉你,只会HTML还不够!
- 记一次hadoop datanode进程问题分析
- 最简单的select级联更新
- css动画效果transtion,transform,animation
- jquery 中substring,substr,split的用法
- 117 js option跳转 获取option内的text
- 推荐10个很棒的AngularJS学习指南