前端项目工程构建教程(一)Git篇章

原创 在下乃坑爹君 随笔 git 2229阅读 2017-06-28 08:22:56 举报

之所以做这个教程,是因为有不少小白从外包技术类型的前端转型到产品型技术前端的过程中,遇到不少问题,而且也不是每个公司有哪个哪个高手闲得蛋疼,去手把手教你,除非你是美女,不然你自己躲在角落里泪奔,要么熬夜研究~
虽然遇到问题多多,但是最大最重要的问题,也就是开始一定会遇到的问题那就是前端工程化!!!它是效率开发和团队协作的保证,所以出这部教程带小白进入前端工程化的大门~~~

建议:以我自己的产品公司为例子,这个公司需要的技术就这几个:git webpack vue jq或js原生,本人偏向js原生开发,本教程的工程化运用的就是git和webpack

安装

首页要先装好Node程序,http://nodejs.cn/download/
Windows版的Git,从https://git-scm.com/download/win下载,然后按默认项安装~

安装完成后,在开始菜单.里找到“Git”->“Git Bash”,蹦出.一个类似命令行窗口的东西,就说明Git安装成功!

安装完成后,还需要最后.一步设置,在命令.行输.入:

$ git config --global user.name "Your Name"
$ git config --global user.email "email@example.com"

因为Git是分布式版本控制系统,所以,每个机器都必须.自报家门:你的名字和Email地址。你也许会担.心,如果有人故意冒充别人怎么办?这个没必要担.心,没有人闲得蛋疼去搞你,除非你这个人差到极点招惹人,那你自己活该,另外除非你是极致专家,当你是专家有必要让我教你避免担心这个没营养的问题!!!。

创建版本库

什么是版本库呢?版本库又名仓库,英.文名repository,你可以简单理解成.一个..目录,这个目录里面的所有.文件都可以被Git管理起来,每个.文件的修改、删除,Git都能跟踪,以便任何时刻都可以追踪历史,或者在将来某个时刻可以“还原”。
所以,创建.一个版本库.非常简单,.首先,选择一个合适的地,创建一个空目录(点击鼠标右键,就看到鼠标菜单,点击Git Bash Here就会弹出命令窗口):

$ mkdir veki 创建名字叫veki的文件夹
$ cd veki 进入文件夹veki
$ git --version 查看git版本

第二步,通过git init命令把这个..目录变成Git可以管理的仓库:
$ git init
Initialized empty Git repository in D:/Documents/HBuilderProject/veki/.git/

$ ls 查看当前状况
veki/(命令就会提示目录)

瞬间Git就把仓库建好了,而且告诉你是.一个空的仓库(empty Git repository),有的人可以发现当前目录下多了.一个.git的目录,有的人看不到,是因为这个文件默认是隐藏的,这个是Git来跟踪管理版本库的,没事千万不要手动修改这个文件,否则仓库就报废了。

远程仓库

Git是分布式版本控制系统,同.一个Git仓库,可以分布到不同的机器上。怎么分布呢?最早,肯定只有一台机器有.一个原始版本库,此后,别的机器可以“克隆”这个原始版本库,而且每台机器的版本库其实都是.一样的,并没有主次之分。
你肯定会想,至少需要两台机器才能玩远程库不是?但是我只有一台电脑,怎么玩?其实.一台电脑上也是可以克隆多个版本库的,只要不在同.一个..目录下。不过,现实.生活中是不会有人这么傻的在.一台电脑上搞.几个远程库玩,因为.一台电脑上搞.几个远程库完全没有意
义,而且硬盘挂了会导致所有库都挂掉。

实际情况往往是这样,找一台电脑充当服务器的角色,每天24小时开机,其他每个人都从这个“服务器”仓库克隆一份到.自.己的电脑上,并且各.自把各自的提交推送到服务器仓库.里,也从服务器仓库中拉取别人的提交。
完全可以自己搭建.一台运行Git的服务器,不过现阶段,为了学Git先搭个服务器绝对是小题大作。好在这个世界上有个叫GitHub的神奇的..网站,从名字就可以看出,这个..网站就是提供Git仓库托管服务的,所以,只要注册.一个GitHub账号,就可以免费获得Git远程仓库。说到GitHub,有不少菜逼问我我不懂鸟文啊,不想费劲那啥办,其实国内也出了中国式GitHub,叫码云,中文版,功能几乎都有,我自己也是菜逼之一,所以也用码云了,哈哈,别鄙视我哈,自己去百度注册http://git.oschina.net/
在继续阅读后续内容前,请自行注册GitHub账号。
输入$ git clone git@git..net:veki/veki.git你发现了,下面一堆提示,因为你没有设置ssh,
$ git clone git@git.
.net:veki/veki.git
Cloning into 'veki'...
The authenticity of host 'git.oschina.net (116.211.167.14)' can't be established.
ECDSA key fingerprint is SHA256:FQGC9Kn/eye1W8icdBgrQp+KkGYoFgbVr17bmjey0Wc.
Are you sure you want to continue connecting (yes/no)? yes
Warning: Permanently added 'git.oschina.net,116.211.167.14' (ECDSA) to the list of known hosts.
Authentication failed.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

由于你的本地Git仓库和GitHub仓库之间的传输是通过SSH加密的,所以,需要.一点设置:

Git是分布式的代码管理工具,远程的代码管理是基于SSH的,所以要使用远程的git则需要SSH的配置。
github的SSH配置如下:

一 、设置Git的user name和email:
$ git config --global user.name "xuhaiyan"
$ git config --global user.email "haiyan.xu.vip@gmail.com"

二、生成SSH密钥过程:
1.查看是否已经有了ssh密钥:cd ~/.ssh
如果没有密钥则不会有此文件夹,有则备份删除
2.生存密钥:
$ ssh-keygen -t rsa -C “haiyan.xu.vip@gmail.com”
按3个回车,密码为空。

Your identification has been saved in /home/tekkub/.ssh/id_rsa.
Your public key has been saved in /home/tekkub/.ssh/id_rsa.pub.
The key fingerprint is:
………………

最后得到了两个文件:id_rsa和id_rsa.pub

3.添加密钥到ssh:ssh-add 文件名
需要之前输入密码。
4.在github上添加ssh密钥,这要添加的是“id_rsa.pub”里面的公钥。
打开http://git.oschina.net/ ,项目》管理》(左侧菜单里的部署公钥管理)》公钥管理》右边有个黄色的醒目文字-添加个人公钥》添加ssh进去就OK

设置好了公钥之后,输入下面,就会提示,代表你成功了
$ ssh-keygen -t rsa -C "342752364@qq.com"
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/Administrator/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /c/Users/Administrator/.ssh/id_rsa.
Your public key has been saved in /c/Users/Administrator/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:1nQxdKArz5EC+ldwNeK*****92DbIjIMjQGDxyo “**@qq.com
The key's randomart image is:
+---[RSA 2048]----+

|.. . o ..B.. |
|+ o + = = = |
| = . = o |
|E . . o = = o |
|. +. . S
o |
| o .. o * . |
| o o + o |
| +.ooo+ |
| +.o.oo |
+----[SHA256]-----+

现在,远程库已经准备好了,下.一步是.用命令git clone克隆.一个本地库:
$ git clone git@git.oschina.net:veki/veki.git
Cloning into 'veki'...
remote: Counting objects: 3, done.
remote: Total 3 (delta 0), reused 0 (delta 0)
Receiving objects: 100% (3/3), done.

注:ls -al 可以显示当前目录下的所有文件及文件夹包括隐藏的.和..等并显示详细信息,详细信息包括大小,属组,创建时间
$ ls -al
total 9
drwxr-xr-x 1 Administrator 197121 0 6月 27 23:18 ./
drwxr-xr-x 1 Administrator 197121 0 6月 27 23:18 ../
drwxr-xr-x 1 Administrator 197121 0 6月 27 23:19 .git/
-rw-r--r-- 1 Administrator 197121 7 6月 27 23:18 README.md

好了,这里我们做一个小小的测试:先创建叫index.html的文件~
$ vim index.html
然后命令窗口会出现一列的~的符号,底部有两行信息
一行是你创建好的index.html文件所在的路径,另外一行有“index.html”[新文件]的提示,说明你已经创建成功
然后按shift + :键再次输入wq返回就可以了

接下来输入以下命令,出现fatal: remote origin already exists.意思是远程仓库已经存在
git remote add origin git@git.**.net:veki/veki.git
fatal: remote origin already exists.

当然了,你可以通过
$ git remote rm origin
删除远程仓库,然后
$ git remote add origin git@git.oschina.net:veki/veki.git
重新添加远程仓库,如果执行
$ git remote rm origin
报错的话,我们可以手动修改gitconfig文件的内容
$ vi .git/config
把 [remote “origin”] 那一行删掉就好了。

从服务器获取
$ git pull origin master
From git.oschina.net:veki/veki

  • branch master -> FETCH_HEAD
  • [new branch] master -> origin/master
    Already up-to-date.

$ git add . 他会监控工作区的状态树,使用它会把工作时的所有变化提交到暂存区,包括文件内容修改(modified)以及新文件(new),但不包括被删除的文件。
$ git commit -am 'test' 本地提交信息
上面监控跟踪以及本地提交信息非常重要,否则后面推送远程仓库会失败

把本地master分⽀支的最新修改推送⾄至GitHub或码云,现在起,你就拥有了真正的分布式版本库!
$ git push origin master
Counting objects: 3, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 265 bytes | 0 bytes/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To git.oschina.net:veki/veki.git
5294355..0f137ce master -> master
Branch master set up to track remote branch master from origin.

这样就是成功推送到了远程仓库上了

前端项目工程构建教程(一)Git篇章

要关联⼀一个远程库,使⽤用命令git remote add origin git@server-name:path/repo-name.git;关联后,使⽤用命令git push -u origin master第⼀一次推送master分⽀支的所有内容;此后,每次本地提交后,只要有必要,就可以使⽤用命令git push origin master推送最新修改;

####接下来就是重点了,开始:

项目目录的搭建...(点击进去即可)

评论 ( 5 )
最新评论
qq584493299 2017-07-04 09:04:35 5F

建议来些图片。。。

在下乃坑爹君 2F 2017-06-29 21:02:34 4F

不是哦,这只是前期准备,不过标题这样写确实有点欠缺,看起来毫无关系,我会加以修正 谢谢

人马在冬至追风 2017-06-29 15:43:30 3F

不言中 2017-06-28 17:00:05 2F

... 内容和标题完全不符

18830159776 2017-06-28 10:17:11 1F

谢谢,受教了。