Jacky's blog Jacky's blog
首页
  • 编码专题
  • 深入浅出 Vite
  • 深入浅出 babel
  • 快速上手API
  • 深入浅出 react
  • Node

    • code-notebook
  • 状态管理

    • redux
  • 前端工程化

    • Wepack
  • React源码

    • React源码
  • 组件库封装

    • 组件库
  • 开发工具

    • Vscode 插件
  • 项目展示
  • 案例中心 (opens new window)
  • First Project
  • 基础算法题
  • 链表题
  • 动态规划
  • 双指针
  • 递归
  • 数据结构
  • 前端学习计划 (opens new window)
  • 技术随笔
  • 转载文章
  • 包管理工具
  • 前端学习周报
  • VSCode插件
  • Promise 专题
  • 函数技巧
  • React 专题
  • 配置文件

    • TSCONFIG-配置 (opens new window)
    • NGINX-配置 (opens new window)
    • 正则规则查询手册 (opens new window)
    • Lint 配置 (opens new window)
  • 教程

    • GIT-教程
    • NPM SCRIPTS-工作流 (opens new window)
    • DOCKER-教程 (opens new window)
    • LERNA-教程 (opens new window)
    • GIT-常用操作整理 (opens new window)
  • VSCode

    • LAUNCH.JSON (opens new window)
  • 指令

    • NPM 指令 (opens new window)
    • NVM 指令 (opens new window)
    • Nginx 指令 (opens new window)
    • YARN 指令 (opens new window)
    • PNPM 指令 (opens new window)
  • 库

    • FS-EXTRA 库 (opens new window)
    • NODE 库-PATH (opens new window)
  • 永远的神

    • 魔法师卡颂-自顶向下学 React 源码 (opens new window)
    • 全栈潇晨 (opens new window)
    • 博客-程序员山月-Daily (opens new window)
    • 淘系前端:冴羽 (opens new window)
  • 系列文章

    • 《图解HTTP》 (opens new window)
    • 《ES6标准入门》 (opens new window)
    • 《现代JavaScript教程》 (opens new window)
    • 《深入浅出Webpack》 (opens new window)
    • VSCode 插件系列:小茗同学 (opens new window)
    • JEST 教程 (opens new window)
    • 前端精读周刊:各种精读系列 (opens new window)
    • 一文吃透系列 (opens new window)
    • 图解 REACT 原理 (opens new window)
  • 实用网站

    • MDN (opens new window)
    • CAN I USE (opens new window)
    • TYPESCRIPT-ESLint-RULES (opens new window)
    • ESLint-RULES (opens new window)
    • FRONT-END TREND (opens new window)
    • NPM TREND (opens new window)
    • 在线分析 Node 依赖 (opens new window)
    • FIND NPM (opens new window)
    • CODE PEN (opens new window)
    • 印记中文 (opens new window)
    • TOOL.LU (opens new window)
    • 阮一峰-网道 (opens new window)
    • DIGITAL OCEAN (opens new window)
    • DEVDOCS.IO (opens new window)
    • JOI (opens new window)
  • 算法

    • 小浩算法 (opens new window)
    • LABULADONG 的算法小抄 (opens new window)
    • 力扣 SOLUTION (opens new window)
    • HACKER RANK (opens new window)
    • 代码随想录 (opens new window)
  • 博客系列

    • 美团大佬 (opens new window)
    • 蜡笔小伟 (opens new window)
    • 优秀博客1 (opens new window)
    • 优秀博客2-umi (opens new window)
    • 优质博客 (opens new window)
  • CSS

    • CSS-EASING 库 (opens new window)
    • ROUGH.JS (opens new window)
    • CSS 网站收集
    • UNOCSS (opens new window)
  • 前端

    • PROMISE (opens new window)
    • UNDERSCORE.JS (opens new window)
    • study with BGM (opens new window)
    • nginx【B站视频】 (opens new window)
    • 机器学习
    • Js基础
  • 掘金已购课程

    • 前端自动化测试精讲 (opens new window)
    • 深入浅出 Vite (opens new window)
    • 现代 Web 布局 (opens new window)
    • 前端算法与数据结构 (opens new window)
    • 基于 Vite 的 SSG 框架开发实战 (opens new window)
    • SSR 实战:官网开发指南 (opens new window)
    • WebGL 入门与实践 (opens new window)
    • 玩转 CSS 的艺术之美 (opens new window)
    • 前端调试通关秘籍 (opens new window)
    • React 进阶实践指南 (opens new window)
    • TypeScript 全面进阶指南 (opens new window)
    • 前端缓存技术与方案解析 (opens new window)
    • npm scripts 前端工作流 (opens new window)
    • Webpack5 核心原理与应用实践 (opens new window)
  • 购物车

    • 张鑫旭-技术写作指南 (opens new window)
    • 深入剖析 Node.js 底层原理 (opens new window)
    • 前端开发者的现代 C++ 课 (opens new window)
    • 从前端到全栈 (opens new window)
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Jacky Wang

行到水穷处,坐看云起时
首页
  • 编码专题
  • 深入浅出 Vite
  • 深入浅出 babel
  • 快速上手API
  • 深入浅出 react
  • Node

    • code-notebook
  • 状态管理

    • redux
  • 前端工程化

    • Wepack
  • React源码

    • React源码
  • 组件库封装

    • 组件库
  • 开发工具

    • Vscode 插件
  • 项目展示
  • 案例中心 (opens new window)
  • First Project
  • 基础算法题
  • 链表题
  • 动态规划
  • 双指针
  • 递归
  • 数据结构
  • 前端学习计划 (opens new window)
  • 技术随笔
  • 转载文章
  • 包管理工具
  • 前端学习周报
  • VSCode插件
  • Promise 专题
  • 函数技巧
  • React 专题
  • 配置文件

    • TSCONFIG-配置 (opens new window)
    • NGINX-配置 (opens new window)
    • 正则规则查询手册 (opens new window)
    • Lint 配置 (opens new window)
  • 教程

    • GIT-教程
    • NPM SCRIPTS-工作流 (opens new window)
    • DOCKER-教程 (opens new window)
    • LERNA-教程 (opens new window)
    • GIT-常用操作整理 (opens new window)
  • VSCode

    • LAUNCH.JSON (opens new window)
  • 指令

    • NPM 指令 (opens new window)
    • NVM 指令 (opens new window)
    • Nginx 指令 (opens new window)
    • YARN 指令 (opens new window)
    • PNPM 指令 (opens new window)
  • 库

    • FS-EXTRA 库 (opens new window)
    • NODE 库-PATH (opens new window)
  • 永远的神

    • 魔法师卡颂-自顶向下学 React 源码 (opens new window)
    • 全栈潇晨 (opens new window)
    • 博客-程序员山月-Daily (opens new window)
    • 淘系前端:冴羽 (opens new window)
  • 系列文章

    • 《图解HTTP》 (opens new window)
    • 《ES6标准入门》 (opens new window)
    • 《现代JavaScript教程》 (opens new window)
    • 《深入浅出Webpack》 (opens new window)
    • VSCode 插件系列:小茗同学 (opens new window)
    • JEST 教程 (opens new window)
    • 前端精读周刊:各种精读系列 (opens new window)
    • 一文吃透系列 (opens new window)
    • 图解 REACT 原理 (opens new window)
  • 实用网站

    • MDN (opens new window)
    • CAN I USE (opens new window)
    • TYPESCRIPT-ESLint-RULES (opens new window)
    • ESLint-RULES (opens new window)
    • FRONT-END TREND (opens new window)
    • NPM TREND (opens new window)
    • 在线分析 Node 依赖 (opens new window)
    • FIND NPM (opens new window)
    • CODE PEN (opens new window)
    • 印记中文 (opens new window)
    • TOOL.LU (opens new window)
    • 阮一峰-网道 (opens new window)
    • DIGITAL OCEAN (opens new window)
    • DEVDOCS.IO (opens new window)
    • JOI (opens new window)
  • 算法

    • 小浩算法 (opens new window)
    • LABULADONG 的算法小抄 (opens new window)
    • 力扣 SOLUTION (opens new window)
    • HACKER RANK (opens new window)
    • 代码随想录 (opens new window)
  • 博客系列

    • 美团大佬 (opens new window)
    • 蜡笔小伟 (opens new window)
    • 优秀博客1 (opens new window)
    • 优秀博客2-umi (opens new window)
    • 优质博客 (opens new window)
  • CSS

    • CSS-EASING 库 (opens new window)
    • ROUGH.JS (opens new window)
    • CSS 网站收集
    • UNOCSS (opens new window)
  • 前端

    • PROMISE (opens new window)
    • UNDERSCORE.JS (opens new window)
    • study with BGM (opens new window)
    • nginx【B站视频】 (opens new window)
    • 机器学习
    • Js基础
  • 掘金已购课程

    • 前端自动化测试精讲 (opens new window)
    • 深入浅出 Vite (opens new window)
    • 现代 Web 布局 (opens new window)
    • 前端算法与数据结构 (opens new window)
    • 基于 Vite 的 SSG 框架开发实战 (opens new window)
    • SSR 实战:官网开发指南 (opens new window)
    • WebGL 入门与实践 (opens new window)
    • 玩转 CSS 的艺术之美 (opens new window)
    • 前端调试通关秘籍 (opens new window)
    • React 进阶实践指南 (opens new window)
    • TypeScript 全面进阶指南 (opens new window)
    • 前端缓存技术与方案解析 (opens new window)
    • npm scripts 前端工作流 (opens new window)
    • Webpack5 核心原理与应用实践 (opens new window)
  • 购物车

    • 张鑫旭-技术写作指南 (opens new window)
    • 深入剖析 Node.js 底层原理 (opens new window)
    • 前端开发者的现代 C++ 课 (opens new window)
    • 从前端到全栈 (opens new window)
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 技术随笔

    • git教程
      • Git的背景
      • 本地端的版本管理流程
      • 进阶场景应用
        • 版本切换
        • 撤回操作
        • 管理修改
        • 删除文件
      • ⭐️远程仓库的使用
        • 先有本地库,再创建Github的远程库,再将两者关联
        • 先有远程库,再clone到本地
    • 前端模块化:CommonJS,AMD,CMD,ES6
    • 如何动态加载本地图片
    • GitHub自动部署脚本
    • React生命周期详解
    • 将父组件的props作为组件的初始state的几种方案
    • webpack基础入门
    • StackOver记录:如何在function中使用redux
    • React中使用onClick时的三种性能优化
    • 思考React状态管理
    • forEach/for..in/of
    • styled-components使用记录
    • 深入理解forEach与forof
    • Node技术架构
    • Redux、Mobx状态管理杂谈
    • JS中的类型检测
    • 如何判断图片是否在可视区域
    • 如何使用图片的懒加载操作
    • JavaScript模块化:从CommonJS到AMD
    • git查看:修改用户名、密码
    • 保持数据Immutable的几种写法
    • 如何实现一个Promise.all
    • resolve(Promise对象)会多出两个微任务
    • todo_基于Mocha的测试驱动开发
    • 浏览器页面渲染机制
    • todo-响应式编程之数据劫持
    • todo-immer库的介绍
    • React-Hooks 基础原理解析
    • JS基本功
    • 函数闭包与this指针
    • 收集 DUMI 配置过程中遇到的问题
    • typescript 类型工具
    • 统一接口的导入导出
    • 网络安全:如何预防 XSS 攻击
    • 浏览器页面渲染机制【2023】
    • 跨域资源请求
    • 浏览器事件循环机制
    • 如何理解浏览器的 user agent 用户代理的含义?
  • 转载文章

  • Mac相关

  • 前端学习周报

  • 包管理工具

  • 技术随笔
  • 技术随笔
wangjiasheng
2019-12-20
目录

git教程

# Git的背景

  • Git是什么?

    • 目前世界上最先进的分布式版本控制系统
  • 版本控制

    现实情况 希望做到的样子
  • 集中式vs分布式

    • 集中式:版本库是集中存放在中央服务器的,而干活的时候,用的都是自己的电脑,所以要先从中央服务器取得最新的版本,然后开始干活,干完活了,再把自己的活推送给中央服务器。中央服务器就好比是一个图书馆,你要改一本书,必须先从图书馆借出来,然后回到家自己改,改完了,再放回图书馆。
    • 分布式:每个人电脑里都有完整的版本库,不必联网
  • Git的诞生

    • Linus创建开源的Linux,志愿者提供源代码
    • Linus 抵制CVS和SVN等集中式版本控制系统,缺点必须联网才能使用。稍好一点的商业版本控制需要付费,也不开源。
    • 2002年,Linux发展十年,Linus无法通过手工方式管理,选择商业版本控制软件系统BitKeeper
    • 2005年,两者谈崩,一个月内用C语言写了一个分布式版本控制系统Git
    • 2008年,Github网站上线,为开源项目免费提供Git存储。

# 本地端的版本管理流程

  • 创建版本库

    • 第一步:本地创建一个目录
    • 第二步:git init可以让一个目录变成可以被git管理的文件夹
      • 多出一个.git文件
      • 目录中的每一个文件都能被Git跟踪管理
        • 传统的txt,或者code等可以被跟踪到内容(第几行插入内容是...)
        • 二进制文件只能跟踪文件的大小变化(word就是个二进制文件)
  • 大象放到冰箱有3步,而Git只有两步

    • git add readme.txt

      • 这应该没有消息(代表正确)
    • git commit -m ""

      • 这步才会提醒你具体修改的文件内容
      $ git commit -m "wrote a readme file"
      [master (root-commit) eaadf4e] wrote a readme file
       1 file changed, 2 insertions(+)
       create mode 100644 readme.txt
      
      1
      2
      3
      4
  • 查看缓存区的情况:git status

    • 概念说明:工作区+版本库

    • git status会提示三个类的内容

      $ git status
      On branch master
      Changes not staged for commit:
        (use "git add <file>..." to update what will be committed)
        (use "git checkout -- <file>..." to discard changes in working directory)
      
      Untracked files:
        (use "git add <file>..." to include in what will be committed)
      
      Changes to be committed:
        (use "git reset HEAD <file>..." to unstage)
        
      nothing to commit, working tree clean
      
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      1. Untrack的意思是:工作区的内容没有被加入到版本库中
      2. Changes not staged for commit的意思是:版本库中存着某个文件,现在检测到工作区修改了,接下来的可能操作有两个:
        • 将修改后的文件 git add
        • 将版本库中的文件撤回到工作区:git checkout --<file>
      3. Changes to be committed:提示你去commit再stage中的changegit commit-m""
      4. 所有都OK,则显示stage是干净的。working tree clean
  • 小节

    • 基础语法就只有三个
      • git add
      • git commit -m""
      • git status
    • 经过以上的操作,就搭建完成了一个本地端的版本管理流程。

# 进阶场景应用

# 版本切换

  • 假设对readme.txt进行了三次操作,在Git仓库中应有(通过commit区分):

    • 版本1:wrote a readme file

      Git is a version control system.
      Git is free software.
      
      1
      2
    • 版本2:add distributed

      Git is a distributed version control system.
      Git is free software.
      
      1
      2
    • 版本3:append GPL

      Git is a distributed version control system.
      Git is free software distributed under the GPL.
      
      1
      2
  • 查看文件的修改

    • 每一个comment对应着一个comment id,可以通过git log或git log --pretty=oneline查看对应的ID号

      $ git log
      commit 1094adb7b9b3807259d8cb349e7df1d4d6477073 (HEAD -> master)
      Author: Michael Liao <askxuefeng@gmail.com>
      Date:   Fri May 18 21:06:15 2018 +0800
      
          append GPL
      
      commit e475afc93c209a690c39c13a46716e8fa000c366
      Author: Michael Liao <askxuefeng@gmail.com>
      Date:   Fri May 18 21:03:36 2018 +0800
      
          add distributed
      
      commit eaadf4e385e865d25c48e7ca9c8395c3f7dfaef0
      Author: Michael Liao <askxuefeng@gmail.com>
      Date:   Fri May 18 20:59:18 2018 +0800
      
          wrote a readme file
      
      $ git log --pretty=oneline
      
      1094adb7b9b3807259d8cb349e7df1d4d6477073 (HEAD -> master) append GPL
      e475afc93c209a690c39c13a46716e8fa000c366 add distributed
      eaadf4e385e865d25c48e7ca9c8395c3f7dfaef0 wrote a readme file
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
    • HEAD指向的版本就是当前版本,因此,Git允许我们在版本的历史之间穿梭

      ┌────┐
      │HEAD│
      └────┘
         │
         └──> ○ append GPL
              │
              ○ add distributed
              │
              ○ wrote a readme file
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      • 使用git reset--hard Head^切换上一版本
      • 使用git reset--hard Head^^切换上上一版本
      • 使用git reset--hard ID切换指定ID版本
      $ git reset --hard 1094a #只需要输入ID中的前几位即可
      HEAD is now at 83b0afe append GPL
      
      1
      2
        ┌────┐
        │HEAD│
        └────┘
           │
           │    ○ append GPL
           │    │
           └──> ○ add distributed
                │
                ○ wrote a readme file
    
    1
    2
    3
    4
    5
    6
    7
    8
    9

    注:一旦切换后,当前的版本就无法通过git log查询,需要通过git reflog查看命令历史。

# 撤回操作

一般而言,我们会对三种场景中需要撤回操作

  • 恢复工作区中的修改:最简单直接git checkout --file
  • 恢复缓存区的修改:
    • 将缓存区的修改撤销掉:git reset HEAD <file>
    • 再还原原本的缓存区还原原本的工作区:上步
  • 恢复版本库:需要参照上节版本切换内容

# 管理修改

  • 正确的做法

    第一次修改 -> git add -> 第二次修改 -> git add -> git commit

  • 比较差异

    • git diff HEAD -- <file>:比较工作区与版本库中的差别
    • git diff filename:比较工作区和暂存区

# 删除文件

  • git rm:同时删除版本库和本地的文件
  • 等同操作:先rm <本地file>,再git add <file>等同于git rm <file>
  • 问题:
    • 如何删除版本库中的文件,而不修改工作区的文件
    • 如何查看工作区的文件
    • 关联操作不是很会,还有就是SSH是个什么东西

# ⭐️远程仓库的使用

  • 设置本地库与远程库的传递方式

    Git支持多种协议,默认的git://使用ssh(原生git协议速度最快),但也可以使用https等其他协议。SHH协议需要在本地创建SSH Key。秘钥分为公钥和私钥。一个私钥可以产生无数个公钥。而公钥需要提交到github网站,告知每次push都是本人操作,就不用反复输密码了。

    • 根据不同的传输方式,Github的地址可分为:
      • https://github.com/michaelliao/gitskills.git[https传输方式]
      • git@github.com:michaelliao/learngit.git[SSH传输方式]
    • 若使用SHH传输方式,需要进行以下的设置
      • 创建SHH Key $ ssh-keygen -t rsa -C "youremail@example.com"
      • 创建完毕后,在.ssh目录下就会有id_rsa和id_rsa.pub这两个文件
      • 登录Github,打开“Account settings”的"SSH Keys"页面,在Key文本框中黏贴公钥id_rsa.pub的文本内容
  • 有关远程库的一些基本使用

    # 列出已经存在的远程仓库
    $ git remote
    origin 
    
    # 列出远程仓库的详细信息,在别名后面列出URL地址
    $ git remote -v
    $ git remote --verbose
    origin https://github.com/kekec/Test.git (fetch)
    origin https://github.com/kekec/Test.git (push)
    
    # 添加远程仓库
    $ git remote add <远程仓库的别名> <远程仓库的URL地址>
    
    # 修改远程仓库的别名
    $ git remote rename <原远程仓库的别名> <新的别名>
    
    # 删除指定名称的远程仓库
    $ git remote rm <远程仓库的别名>
    
    # 修改/显示远程仓库的 URL 地址
    $ git remote set-url <远程仓库的别名> <新的远程仓库URL地址>
    $ git remoter get-url <远程仓库的别名>
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22

# 先有本地库,再创建Github的远程库,再将两者关联

  1. git init:会生成.git文件夹

  2. git remote add origin https://github.com/wangjs-jacky/Jupyter-notebook.git:远程库的名称为origin,URL的传输方式是https。填入的远程仓库的地址也是https。

  3. 第一次推送master的信息git push -u origin master

    之后的提交:git push origin master

注:至2020年10月1日起,默认分支为main,第一次创建库的时候,会有步骤提示,如下:

# 先有远程库,再clone到本地

  • 直接在桌面:git clone https://github.com/wangjs-jacky/Jupyter-notebook.git `
编辑 (opens new window)
#git
上次更新: 2022/06/26, 23:06:00
前端模块化:CommonJS,AMD,CMD,ES6

前端模块化:CommonJS,AMD,CMD,ES6→

最近更新
01
如何理解浏览器的 user agent 用户代理的含义?
11-05
02
浏览器事件循环机制
10-31
03
浏览器页面渲染机制【2023】
10-15
更多文章>
Theme by Vdoing | Copyright © 2020-2023
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式