说道代码管控,一般都会提到TFS、Git等,但是在这里我们将要用到Bitbucket,其实其操作方式和Git基本上一样,但是和TFS则有很大的不同了。但是原理基本上都是一致的。

这里我不会过多的涉及到代码的签入,签入,迁移,产生branch,合并等等。我们主要讲解以下几点:

1. 由yeoman产生的项目如何进行精简,然后放入到团队开发的repository server上。

2.如何利用bitbucket进行代码管控。

首先我们来谈谈第一点。

在前面的文章中,我们利用yeoman的各种脚手架搭建了一个能够跑起来的项目,但是项目体积相当的大,达到了200MB左右了,这还是没怎么进行业务逻辑附加的情况下,如果有业务逻辑附加,再加上各种各样的资源文件的加入,估计轻轻松松突破300MB也是非常轻松的事儿。这样一来,上传这些代码文件和资源文件就是一个比较有挑战的事情。我们来看看yeoman生成的项目结构组成:

但是实际情况是,这些文件其实不必都上传上去,有些文件是可以用命令行生成的。

.tmp文件夹不用上传,这个文件作为source和dist的中介,不必上传。
bower_components文件夹不用上传,因为团队成员完全可以自己在本地利用bower install命令独立进行下载。
dist文件夹不用上传,这个文件夹专门放置发布的文件。
node_modules文件夹不用上传,这里放置node包。
repository下的.git目录不要删掉,因为这里是git源代码控制器的包。

然后做完这些,就可以将干净的源码上传到源代码服务器,也就是bitbucket中了。

这里我来说一下上传步骤:

首先,我们需要注册一个bitbucket账号,然后用此账号登陆,并在此账号下面创建一个名称为test的repository代码存储仓库:

然后,我们点击左侧菜单的“Clone”按钮,在弹出的层中,切换到“HTTPS”协议,并将路径拷贝:

这里我得到的路径为:https://shichaoyang@bitbucket.org/shichaoyang/test.git

然后打开SourceTree软件(没有的可以在bitbucket上面找链接,目前应该是操纵git方面最好的一套UI了),点击“Clone/New”功能,以便于在将test这个repository克隆到本机上:

点击“Clone”按钮,稍等片刻,就可以看到操作结果了:

然后我们去安装TortoiseGit软件,具体的软件地址,还是自己百度一下。

安装完毕后,我们将精简的代码拷入到这个路径下,E:\test中,然后右击,在弹出菜单中选择“Git commit->master”命令。在弹出对话框中,全选所有文件,并附加comment,最后点击ok即可:

然后系统会提示我们提交完毕:

最后切换到SourceTree,然后我们就会看到有27个文件已经被提交了上来:

最后我们点击“Push”按钮,即可将这些文件全部签入到bitbucket的repository中:

而至于后续的文件修改什么的,则只需要先鼠标右键commit,然后在sourcetree中进行push一下即可。这样我们就可以看到详细的提交记录了。

好了,就到这里。

需要提示一下,如果在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 很方便。

  

前端见微知著番外篇:Bitbucket进行代码管控的更多相关文章

  1. 前端见微知著番外篇:GIT舍我其谁?

    在上一篇中,我们讲到了利用纯UI的软件如何实现代码的提交.但是在MAC机器上,是没有turtoiseGit这类软件的,所以利用命令行的方式就是我们的首选了. 下面我们来描述两种主要的Git使用场景: ...

  2. electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google JavaScript Style Guide代码规范

    我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google ...

  3. 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库(MVC5+EF6)

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  4. python自动化测试应用-番外篇--接口测试1

    篇1                 book-python-auto-test-番外篇--接口测试1 --lamecho辣么丑 1.1概要 大家好! 我是lamecho(辣么丑),至今<安卓a ...

  5. #3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)

    #3使用html+css+js制作网页 番外篇 使用python flask 框架 II第二部 0. 本系列教程 1. 登录功能准备 a.python中操控mysql b. 安装数据库 c.安装mys ...

  6. #3使用html+css+js制作网页 番外篇 使用python flask 框架 (I)

    #3使用html+css+js制作网页 番外篇 使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...

  7. #3使用html+css+js制作网页 番外篇 制作接收php

    使用html+css+js制作网页 番外篇 制作接收php 本系列链接 基础 php语法 例子 本系列链接 #1使用html+css+js制作网站教程 准备 #2使用html+css+js制作网站教程 ...

  8. 渗透测试思路 - CTF(番外篇)

    渗透测试思路 ​ Another:影子 (主要记录一下平时渗透的一些小流程和一些小经验) CTF(番外篇) ​ 笔者是一个WEB狗,更多的是做一些WEB类型题目,只能怪笔者太菜,哭~~ 前言 ​ 本篇 ...

  9. 《手把手教你》系列技巧篇(三十一)-java+ selenium自动化测试- Actions的相关操作-番外篇(详解教程)

    1.简介 上一篇中,宏哥说的宏哥在最后提到网站的反爬虫机制,那么宏哥在自己本地做一个网页,没有那个反爬虫的机制,谷歌浏览器是不是就可以验证成功了,宏哥就想验证一下自己想法,于是写了这一篇文章,另外也是 ...

随机推荐

  1. php鼠标滚动加载

    http://www.thinkphp.cn/extend/772.html 滚动距离js判断 i = 1; //设置当前页数 $(function() { var totalpage = 6; // ...

  2. linux 学习随笔-vim

    在自己的home/username目录下 更改vim的配置文件 如果没这个文件 copy其他人的配置文件 然后拖到此目录下 执行mv vimrc ~/.vimrc 更改名字 即可生效 只对当前用户生效 ...

  3. [gist]在浏览器里免查看源代码格式化var_dump输出

    Gist Link /** * 格式化var_dump输出... * 我勒个去..早怎么没想到..就加了个pre啊,, */ function var_dump_html($var){ echo &q ...

  4. Spark SQL 官方文档-中文翻译

    Spark SQL 官方文档-中文翻译 Spark版本:Spark 1.5.2 转载请注明出处:http://www.cnblogs.com/BYRans/ 1 概述(Overview) 2 Data ...

  5. 【转】单表60亿记录等大数据场景的MySQL优化和运维之道 | 高可用架构

    此文是根据杨尚刚在[QCON高可用架构群]中,针对MySQL在单表海量记录等场景下,业界广泛关注的MySQL问题的经验分享整理而成,转发请注明出处. 杨尚刚,美图公司数据库高级DBA,负责美图后端数据 ...

  6. iOS播放铃声及震动,适用于扫描、新消息等

    iOS播放铃声或者设置震动实现:   铃声:     SystemSoundID soundID = 1007;     AudioServicesPlaySystemSound(soundID); ...

  7. Linux小技巧总结

    1.fdisk创建磁盘分区不重启系统partprobe 使用fdisk工具只是将分区信息写到磁盘,如果需要mkfs磁盘分区则需要重启系统才能够读取到/dev/sda*,而使用partprobe则可以使 ...

  8. ubuntu14.04下的NVIDIA Tesla K80显卡驱动的安装教程

    搞深度学习如何能够不与浑身是“核”的显卡打交道呢? 人工智能的兴起除了数据量的大量提升,算法的不断改进,计算能力的逐步提高,还离不开软件基础设施的逐步完善.当下的主流的深度学习工具软件无论是Caffe ...

  9. Python字符串的编码与解码(encode与decode)

    首先要搞清楚,字符串在Python内部的表示是unicode编码,因此,在做编码转换时,通常需要以unicode作为中间编码,即先将其他编码的字符串解码(decode)成unicode,再从unico ...

  10. Java文件选择对话框(文件选择器JFileChooser)的使用:以一个文件加密器为例

    文件加密器,操作过程肯定涉及到文件选择器的使用,所以这里以文件加密器为例.下例为我自己写的一个文件加密器,没什么特别的加密算法,只为演示文件选择器JFileChooser的使用. 加密器界面如图: 项 ...