10 thousand word front-end efficiency series 🚀 : 9. Basic knowledge and working practice of Git and Shell

In our work, we need to use Git for code management, version control and team collaboration. Need to use the Shell to run command line tools, control the server; This article will take you to learn About Git and Shell from basics to practice.

Git

Git is a distributed version control system that we use for multiple developers to collaborate on the same project. Here are some basics and some project practices that can be used

Basic concepts and mechanisms

Since Git is intended for collaborative development projects, you need a common remote repository to hold project files. To set up a remote repository, you can use an online GitHub, code cloud, or your own GitLab. With a common repository, developers can clone the common repository locally, develop the code locally, and then push changes to the common repository. The process of building a common warehouse together.

The general process is as follows: establish remote warehouse -> clone to local -> local development and temporary storage + submit -> local push changes to the remote branch, so that the remote branch and local changes are consistent.

In Git, every change is committed in the unit of commit. A commit contains information such as the content of the change file, the commit person, commit time, commit instructions, and so on. Here we start from a new warehouse operation to try:

Create and enter a new folder
mkdir example
cd example
Create a readme. md file with "# example" in the first line.
echo "# example" >> README.md
Initialize a Git repository
git init
# change readme. md to temporary
git add README.md
Commit temporary changes (currently there is only one readme.md change) to the local repository and note "First commit". This will record the submitter, commit time and generate a commitID.
git commit -m "first commit"
Name the current branch master
git branch -M master
# to local warehouse associated remote warehouse (warehouse address https://github.com/xxxxxxx/example.git)
git remote add origin https://github.com/xxxxxxx/example.git
Mysql > alter database master commit commitID; mysql > alter database master commit commitID
git push -u origin master
Copy the code

The first commit above requires the repository and branch association, and the second commit is easier

# add a line "222222"
echo "222222" >> README.md
# change temporary storage
git add .
# commit the change locally, note "second commit"
git commit -m "second commit"
Commit local commit to master
git push
# If other students submit, we can use Git pull to synchronize the update
Copy the code

The master branch of the remote repository now has two commits that look like this:

< first time > -> < second time >

To protect the master branch from abnormal operations, we will cut off a dev branch from the master branch:

git checkout -b dev
Copy the code

The dev branch is cut from the master branch, so the dev branch’s current project file is the same as that of the master branch.

Working process and skills in a team

At work we usually have different branches for different environments: the master formal production environment branch; Pre grayscale pre-hair branch; Test is a branch of the test environment (which may differ from team to team but is similar), each of which corresponds to a different deployment environment. The code for the Master branch is usually tested and secure

A popular one is the Merge workflow, for example:

< change type >/< Change description >-< Project date >, e.g. Feat/add-some-Page -20220407 Fix Fixes bugs and docs documents. Style formatting; Refactor code; Chore construction, dependency and other miscellaneous modifications; Test Test cases and so on
Merge Request (MR or Pull Request PR) is submitted to the Master branch before the branch is completed. This is usually done on the web page. In practice, MR should be submitted as soon as possible, so as to have a more intuitive view of the current development situation. For huge requirements, some code review can be carried out in advance.
For the development branch, if there are few developers, you can directly commit to the development branch; if there are many developers, you are advised to cut out the personal development branch and submit to the development branch in the form of MR.
Once it’s developed, it’s ready to merge into the Master branch. If new changes are made to the master branch, the development branch should rebase the master branch first to form a gradual iteration in the form of “building blocks”.

For rebase, suppose that when we cut the development branch, the history of both the master branch and the feat branch is < first > -> < second >. After a few days of development, the feat branch becomes 1 -> 2 -> 3 -> 4. It became one -> two -> five -> six. At this point we want the merged master to be one -> two -> five -> six -> three -> four. This is more consistent with the change being master-based.

Git rebase origin/master git rebase origin/master Itself changes back to origin/master, may need to be resolved at this time between the three, four and five, six code conflict, which may change to one line of code.

Git rebase Origin /master: git rebase origin/ Master: Git rebase origin/ Master This is why it is recommended to use MR to change the feat branch if there are many developers.
Once rebase has been tested and is ready to go live, it is safe to merge the code on the web page by clicking merge. After merge, the master will become one -> two -> five -> six -> three -> four.

QA:

Git rebase: Merge git rebase: merge git rebase: merge git rebase When a conflict occurs, current change and incoming change appear in the file. The purpose of conflict resolution is to get the final code correct. If not, contact the incoming author to review the logic. Git add. Git rebase/merge –continue You can also abort the merge by calling Git rebase/merge –abort.
Commit 1 -> 2 -> 3 -> 4 ->… One hundred. Git commit -m “merge instructions” merges the three to one hundred changes into a commit. Git push -f git push -f git push -f git push -f One hundred becomes one -> two -> after merge
Git cherry-pick

git cherry-pick

You can take the merged changes separately. If your development branch is only one -> two -> merged, then the final code for cherry-pick and merge is the same.

Learning materials

Git Flight Guide

Shell

Shell is a program running commands and a bridge of human-computer interaction. It mainly runs in the terminal. At work, we will use Shell to run commands such as git, NPM, vim, nginx, SSH, SCP and so on. You can open terminals in different operating systems as follows:

Under Windows you can use XShell, Windows Terminal, Git, and so on.
On MacOS, choose Boot Console > Other > Terminal to open the built-in terminal application.
In Linux, you can open a terminal by using an application or establishing an SSH connection based on the Linux operating system.
VSCode editor (for all platforms, shortcutsctrl + `) can open the application terminal window, convenient while developing while using.

There are two common Shell interpreters: bash and ZSH. There is little difference in basic use. ZSH’s intelligent completion experience is better.

Common Built-in commands

# Check the current directory
pwd
View the files in the current directory
ls
# View the files in the current directory, and display the file permissions, size and other information
ls -l
CD./ XXX go to the XXX folder under the current directory. cd .. Returns the upper directory; CD /usr Go to the absolute /usr directory, where./ indicates the current relative path. . / indicates the directory at the upper level of the current path. / XXX indicates an absolute path
cdThe < path >Create a directory named XXX
mkdir xxx
# rm -rf xxxdir # rm -rf xxxdir
rm xxx
Copy the bg. PNG file from the current directory to xxxdir
cp bg.png xxxdir/
# Move the bg. PNG file from the current directory to xxxdir
mv bg.png xxxdir/
Press I under vim to start the input mode, press Esc to exit the input mode, press :wq to save and exitVim < file path >Check whether port 8000 is occupied. A row of data with PID is returned
lsof -i:8000
# Stop the 
      
        process to free up the port
      
kill -9 <PID>
Copy the code

Here is a super useful shortcut key (from the old operation and maintenance veteran). Press CTRL + R in the terminal to quickly search for the command you have entered, such as:

Once edited nginx config, don’t want to through the nginx – t to find the file path Press CTRL + r in the terminal, input vim/again, at this time will search to vim/usr/local/etc/nginx/nginx. Conf
Once entered lsof -I :8000, press CTRL + R in the terminal, and then enter Lso to search for lsof. If it does not meet the search expectation, press CTRL + R again
You can use ↑ and ↓ to search for the latest command or CTRL + R to search for a long command that has been executed

Learning materials in this section:

Linux Commands
Linux vi/vim tutorial

Write custom global commands

Instead of using CTRL + R to find the command that was entered, you can write commands as global functions to call them quickly. Bashrc file, ZSH file ~/.zshrc file. Here are some quick global functions THAT I personally use (be careful not to have conflicting names) :

To create a new branch named feat/ XXX, type cob feat/ XXX. Git checkout -b feat/ XXX
cob() {
    git checkout -b The $1
}

# gcmit "git add."
gcmit() {
    git add .
    git commit -m "The $1"
}

GCP 
      
        = git cherry-pick "commitID"
      
gcp() {
    git cherry-pick "The $1"
}

Common Git operations can be written as shortcut global functions
gp() {
    git pull --rebase
}

Type JV 8 to switch Java to JDK 1.8
jv() {
    version=The $1
    case "$version" in
    6)
        The JAVA_HOME path must be the same as the path where Java was installed locally
        export JAVA_HOME='/ Library/Java/JavaVirtualMachines jdk1.6.0 _132. JDK/Contents/Home'
        ;;
    8)
        export JAVA_HOME='/ Library/Java/JavaVirtualMachines jdk1.8.0 _181. JDK/Contents/Home'
        ;;
    esac
}

Copy the code

Don’t forget to execute source ~/.bashrc, source ~/.zshrc, or restart the terminal to enable the changed configuration.

Install the global command line tool using NodeJS

NPM install -g < tool name > to install global dependencies, for example:

Vue CLI, install commandsnpm install -g @vue/cliAfter the installation is successful, you can use the cli toolvue createCreate a Vue project.
serve, install commandsnpm install -g serve, using the commandserveStart the local static file service.
nrm, install commandsnpm install -g nrm, using the commandnrm ls 和 nrm use cnpmSwitch the NPM dependent mirror source.
ts-node, install commandsnpm install -g ts-node, using the commandts-node script.tsExecute the.ts file directly on the console.
yarn, install commandsnpm install -g yarn, using the commandyarn installInstead of NPM.

Use SSH to connect to the server and perform operations

In our work, we will not only use the command line tool on the machine, but also board the server or physical machine bought by each major cloud platform for operation. Here are some common commands:

# SSH [email protected] Log in as root to the server whose IP address is 111.222.333.44SSH < Login user >@< Server IP address ># SCP - r/user/repo/my - app/dist [email protected]: / usr/local/opt/nginx/HTML
Upload the entire package directory (-r) to the serverSCP < local file > < login user >@< server IP>:< server directory >X86_64 indicates 64-bit, i686 indicates 32-bit, and i686 indicates 32-bit
uname -a

## The following is how the server installs NodeJS
Download the NodeJS installation packageWget HTTP: / / https://registry.npmmirror.com/-/binary/node/v16.14.2/node-v16.14.2-linux-x64.tar.gzUnzip the installation packageThe tar - ZXVF node - v16.14.2 - Linux - x64. Tar. GzMove the unzipped file to the appropriate locationNode - mv v16.14.2 - Linux - x64 / optEdit the bash configuration file
vim /etc/profile

Configure environment variables
vim /etc/profile

In the vim environment, press I to enter editing mode, press Esc to exit editing, press :wq to save and exit
export NODE_HOME=$PATH: / opt/node - v16.14.2 - Linux - x64 / bin# Apply the changed configuration
source /etc/profile

# soft link node and NPM commands to global commandsLn -s/opt/node - v16.14.2 - Linux - x64 / bin/node/usr /local/bin/node
ln -s /opt/node-v16.14.2-linux-x64/bin/npm /usr/local/bin/npm

Verify that the command succeeded
node -v
npm -v
## NodeJS installed successfully
Copy the code

You are advised to check the commands you are not familiar with before executing them. In the online environment, you are advised to differentiate user rights and avoid login with root rights.

Eight, front-end need to understand the operation and maintenance deployment tools

10 thousand word front-end efficiency series 🚀 : 9. Basic knowledge and working practice of Git and Shell

Git

Basic concepts and mechanisms

Working process and skills in a team

Learning materials

Shell

Common Built-in commands

Write custom global commands

Install the global command line tool using NodeJS

Use SSH to connect to the server and perform operations

Related Posts

Taro introduction to learning notes

Comic | a programmer can refuse such a girlfriend

H5 Notification Desktop notification of the browser