This is the 9th original article of The year 2021, work hard with the big Ice in the front field!! 💪

Writing in the front

Git visualization tool SourceTree is used frequently in git projects. It is bound to encounter a variety of tricky little problems, such as code merging, conflicts, version rollback, etc. No matter how old or new you are, you can make a mistake when typing a command. In a large project, if the code version control goes wrong, it can be very costly, and you may lose your bonus this month.

Of course, many editors now have their own git management tools, such as VSCode, IDEA and so on have integrated their own git management tools, but according to my personal habits and experience, the editor’s own Git management tools are not as good as professional git visualization tools, after all, the industry has specialized.

What is the Git visualization tool

After git is installed, you must use git Bash on the command line to manipulate the code version. Tapping on the command line, however, doesn’t allow us to see in real time what happened to our code version before and after it changed. If you’re a compulsive programmer, you’ll have to take a second look at your Online Git repository.

On the other hand, typing on the command line looks easy and convenient, but it’s actually very error-prone. You can type wrong, you can remember wrong. Sometimes a command error can take an hour or two to fix.

We all know that Linux installation requires a command line tap, while Windows is just a mouse click away. Windows can be understood as visual, and Linux now has a lot of great interface visualization tools. Git visualization tool is just like the interface visualization tool of Linux system. You can operate the code version directly in the tool interface without typing the command line.

At present, SourceTree is the most useful, stable and easy to use visualization tool in big Ice cube. So today we introduce SourceTree. I will write the basic operation in detail from installation to use, and record the corresponding GIF.

The installation of SourceTree

SourceTree is a free Git visualization tool developed by Atlassian. It is stable and easy to use and can connect to any Git library.

First we open the official website address, select Windows or Mac version, click Download ==> check the consent agreement ==> Download. As shown below:

By default, you have git installed. If not, install it first. Next ==> Next ==> Next ==> Enter the user name and email address. Next ==> Load the SSH key? Choose no.

And you’re done!

The following interface is displayed when the installation is successful:

The use of SourceTree

To the most commonly used functions

Cloning project

We can open a local warehouse or pull a new one from a remote location.

Take remote cloning as an example:

The current project has been cloned as follows:

Pull and switch to the new remote branch

Expand “Remote”, right click “Origin”, click “Get from Origin”, expand “Origin”, double click the corresponding branch, “Check new branch” ok.

Creating a Local Branch

Click Branch ==> enter the name of the new branch ==> Create a branch, it will automatically switch to the new branch after creation.

A local branch is created and pushed to a remote branch

After creating a new local branch ==> right-click the current new branch ==> push to ==> Origin ==> push

Switching local branches

Double-click the branch to switch to switch to the corresponding branch.

Submit code

Two ways:

1, temporarily save all or temporarily selected ==> Fill in the submission description ==> Submit ==> Push to the specified branch

2, Temporarily save all or temporarily selected ==> Fill in the submission instructions ==> select “Push changes to XXXX now” ==> Submit

Merges other branches into the current branch

For example, to merge the xiaoMing branch into the bigIce branch, first switch to the bigIce branch and right-click the xiaoMing branch and choose Merge xiaoMing to the current branch

Resolve the conflict

For conflicting files, SourceTree can right-click the corresponding file in the file state and choose to resolve the conflict with the current version or with the incoming version.

But we usually resolve them in the editor, so it’s easier to verify if the code has any errors after resolving the conflict. If no error occurs, right-click the file where the conflict occurred and mark it as resolved.

Version back

Right-click on a commit record in History ==> reset current branch to commit ==> OK.

Storage code

The main functions of caching code are:

1. Avoid failure to pull due to conflicts before pulling code.

2. The current code is not needed for now, but may be needed later.

If my colleague Xiaoming added A piece of code in file A and uploaded it, then after we get and pull the code, it will show that the current code conflicts with the pulled code, so it cannot be pulled. You need to store the code first.

After the cache is complete, pull the code, right click the corresponding cache, apply the current cache, and then resolve the conflict.

Only files that are managed by Git are cached. New files are not cached.

Storage and application storage:

Store menu bar store ==> Enter store description ==> Confirm Application store sidebar store ==> Application store XXXX==> OK

Other Points of attention

You should follow the steps of getting ==> pulling ==> submitting ==> push. If you do not get pulling, directly submitting push will probably generate an error because your colleague pushed the code of the same file before you, so push will fail.

If there is no conflict, we need to go through the step of get ==> pull ==> commit ==> push again.

If there is a conflict, go to the step of get ==> pull ==> submit ==> push again after the conflict is resolved.

I believe that through the above learning, you will be able to use SourceTree proficiently in the project, the visualization tool is very easy to learn.

Write in the back

This is the first article of big ice “front-end tools series”, “front-end tools series” aims at some front-end development process often used to explain the tools and use, hoping to help the front-end tools just contact or not skilled partners. In the meantime, you are welcome to click on another series of articles to discuss and learn:

  • Do you promise to use Symbol after reading the series?
  • “Read to understand series” talk about the principle and implementation of data burying point
  • Has Ajax single-handedly created the entire front-end ecosystem?
  • Is permission management complex in The Wikis project?
  • You know what? Oh, my God! It’s so easy to figure out throttling and anti-shaking
  • 15 ways to play with strings
  • The differences and usage between the string interception methods substr(), slice(), and substring()
  • JS play algorithm series sea King fish pond

Original is not easy, if there are mistakes, welcome to correct.

If it helps you, please give big ice quietly praise attention, your praise attention is my motivation to write down.

Let’s make progress on the front end together ~🤭