As a front-end development engineer, what commands do we need to know? If you are familiar with these commands, they will greatly improve your productivity. Today Xiaolan shares with you the knowledge points of CLI commands.
1. tree
Guys, do you know how to list the file structure of a directory like below?
It does a good job of showing directory relationships between files, which is really cool.
commands
├── a.js
├── b.js
├── c.js
├── copy-apps
│ └── fe-apps
│ └── a.js
├── fe-apps
│ └── a.js
├── test.log
└── xxx
└── yyy
Before that, you need to install the command tree.
brew install tree
Then just execute the tree command in the file directory.
2.wc
wc is the abbreviation of word count, which is often used for file statistics. It can count words, lines, characters, bytes, etc.
I use it a lot to count the lines of code in a file.
3.du
Print out file size information for a directory. We use it less, but it is a very worthwhile command to learn.
du -h: Print out human-readable information.
du -a: list the file size information in the directory;
du -s: only display the total size, not specific information.
➜ commands git:(master) ✗ du
0 ./xxx/yyy
0 ./xxx
0 ./fe-apps
0 ./copy-apps/fe-apps
0 ./copy-apps
0 ./.git/objects/pack
0 ./.git/objects/info
0 ./.git/objects
8 ./.git/info
104 ./.git/hooks
0 ./.git/refs/heads
0 ./.git/refs/tags
0 ./.git/refs
136 ./.git
168 .
➜ commands git:(master) ✗ du -h
0B ./xxx/yyy
0B ./xxx
0B ./fe-apps
0B ./copy-apps/fe-apps
0B ./copy-apps
0B ./.git/objects/pack
0B ./.git/objects/info
0B ./.git/objects
4.0K ./.git/info
52K ./.git/hooks
0B ./.git/refs/heads
0B ./.git/refs/tags
0B ./.git/refs
68K ./.git
84K .
➜ commands git:(master) ✗ du -ha
4.0K ./a.js
0B ./xxx/yyy
0B ./xxx
0B ./fe-apps/a.js
0B ./fe-apps
4.0K ./test.log
0B ./copy-apps/fe-apps/a.js
0B ./copy-apps/fe-apps
0B ./copy-apps
4.0K ./c.js
4.0K ./.git/config
0B ./.git/objects/pack
0B ./.git/objects/info
0B ./.git/objects
4.0K ./.git/HEAD
4.0K ./.git/info/exclude
4.0K ./.git/info
4.0K ./.git/description
4.0K ./.git/hooks/commit-msg.sample
8.0K ./.git/hooks/pre-rebase.sample
4.0K ./.git/hooks/pre-commit.sample
4.0K ./.git/hooks/applypatch-msg.sample
4.0K ./.git/hooks/fsmonitor-watchman.sample
4.0K ./.git/hooks/pre-receive.sample
4.0K ./.git/hooks/prepare-commit-msg.sample
4.0K ./.git/hooks/post-update.sample
4.0K ./.git/hooks/pre-merge-commit.sample
4.0K ./.git/hooks/pre-applypatch.sample
4.0K ./.git/hooks/pre-push.sample
4.0K ./.git/hooks/update.sample
52K ./.git/hooks
0B ./.git/refs/heads
0B ./.git/refs/tags
0B ./.git/refs
68K ./.git
4.0K ./b.js
84K .
du -sh
4. alias
The alias command is used to set the alias of the command. If you just type alias, all current alias settings will be listed.
Let's try setting up an alias for git status
alias gs="git status"
Note: if you want the gs command to be permanent, you should set it in your .profile or .zshrc.
5. grep
We often need to find the contents of log files on the server, and grep will be our handy helper.
There is a log file test.log. It contains the following:
const a = 1
const b = 2
const c = 3
console.log(a + b + c)
How can I highlight where a character is contained? It's easy, isn't it?
grep a test.log
6.cat
The main purpose of cat is to view the contents of a file and print it to the screen.
But it has at least some other uses.
1. Clear the contents of a.js
➜ commands git:(master) ✗ cat a.js // There are two lines of code in a.js
const a = 'fatfish'
console.log(a)%
➜ commands git:(master) ✗ cat /dev/null > a.js // clear the contents of a.js
➜ commands git:(master) ✗ cat a.js // The content in a.js is cleared.
➜ commands git:(master) ✗
2. Copy the content of a.js to b.js
➜ commands git:(master) ✗ cat a.js
const name = 'fatfish'
console.log(name)
➜ commands git:(master) ✗ cat b.js // No content in b.js
➜ commands git:(master) ✗ cat a.js > b.js // Copy the contents of a.js to b.js
➜ commands git:(master) ✗ cat b.js // The content in b.js is the same as in a.js
const name = 'fatfish'
console.log(name)
➜ commands git:(master) ✗ cat a.js
const name = 'fatfish'
console.log(name)
3. Add the content of a.js to the last character of c.js.
➜ commands git:(master) ✗ cat a.js
const name = 'fatfish'
console.log(name)%
➜ commands git:(master) ✗ cat c.js
const age = 100
console.log(age)
➜ commands git:(master) ✗ cat a.js >> c.js
➜ commands git:(master) ✗ cat c.js
const age = 100
console.log(age)const name = 'fatfish'
console.log(name)
7. clear
Sometimes, we need to do something in the terminal that the content on the screen is enough to bore us.
How to clear them? Do we need to delete them line by line?
8.cp
The cp command is used to copy files or directories.
cp -f: When the file to be copied overwrites the existing target file, there will be no prompt message.
cp -r: If the copied file is a directory file, copy all subdirectories and files under the directory.
➜ commands git:(master) ✗ ls -R
a.js b.js copy-apps fe-apps
./copy-apps:
./fe-apps:
// 1. copy a file
➜ commands git:(master) ✗ cp a.js fe-apps
➜ commands git:(master) ✗ ls -R
a.js b.js copy-apps fe-apps
./copy-apps:
./fe-apps:
a.js
➜ commands git:(master) ✗ cp fe-apps copy-apps
cp: fe-apps is a directory (not copied).
// 2. copy a directory
➜ commands git:(master) ✗ cp -rf fe-apps copy-apps
➜ commands git:(master) ✗ ls -R
a.js b.js copy-apps fe-apps
./copy-apps:
fe-apps
./copy-apps/fe-apps:
a.js
./fe-apps:
a.js
9. cd
This article must have no technical content, because there is really nothing to write about cd, as a developer, who is not familiar with it?
Maybe you're right, but I just meant to say that cd - goes back to the directory you were last visiting. I think this is a good trick.
10. ls
This is a frequently used command to display a list of the contents of a file directory.
It can be used in at least 3 ways.
ls -a: Display all files and directories (including directories starting with .)
ls -A: Display all files and directories (excluding directories starting with . directory)
ls -R: Display all files and directories, if there are files in the directory, list them in order
11. rm
It is used to delete files or directories.
rm -i: Delete the files in the directory one by one, before deleting, it will ask whether to delete the files.
rm -r: Process all files in the specified directory and its subdirectories together (Note: Do not delete files.)
rm -f: Used to forcefully delete a file or directory.
12.tail
I think you must also have the experience of viewing log content on the server, and tail is definitely a good helper.
tail -f filename will display the content of the tail of filename on the screen, and when its content changes, you will see the latest content on the screen.
13.MV
Sometimes we want to change the name of a file or directory, or move it to another place, then we can use the mv command.
1. Modify the file name
➜ commands git:(master) ✗ ls
a.js
➜ commands git:(master) ✗ mv a.js xxx.js
➜ commands git:(master) ✗ ls
xxx.js
➜ commands git:(master) ✗
2. Move the file to another directory
➜ commands git:(master) ✗ ls -R
a.js fe-apps
./fe-apps:
xxx.js
➜ commands git:(master) ✗ mv a.js fe-apps
➜ commands git:(master) ✗ ls -R
fe-apps
./fe-apps:
a.js xxx.js
14.touch
I often use the touch command to create a new file, although it is used to modify the time attribute of a file or directory.
15.which
If you want to view the specific path of the command, you can use which.
➜ commands git:(master) ✗ which node
/Users/dz0400229/.nvm/versions/node/v16.0.0/bin/node
➜ commands git:(master) ✗ which npm
/Users/dz0400229/.nvm/versions/node/v16.0.0/bin/npm
➜ commands git:(master) ✗ which npx
/Users/dz0400229/.nvm/versions/node/v16.0.0/bin/npx
➜ commands git:(master) ✗
16. mkdir
Yes, you must have used this command before, nothing to say!
But mkdir -p dirname is really something we rarely use, what is the use of it?
➜ commands git:(master) ✗ ls
a.js b.js copy-apps fe-apps
➜ commands git:(master) ✗ mkdir xxx/yyy // You cannot create the yyy directory because the xxx directory does not exist
mkdir: xxx: No such file or directory
➜ commands git:(master) ✗ mkdir -p xxx/yyy // `-p` will check if the xxx directory already exists, and create it if it doesn't.
➜ commands git:(master) ✗ ls
a.js b.js copy-apps fe-apps xxx
➜ commands git:(master) ✗ ls -R
a.js b.js copy-apps fe-apps xxx
./copy-apps:
fe-apps
./copy-apps/fe-apps:
a.js
./fe-apps:
a.js
./xxx:
yyy
./xxx/yyy:
17.whoami
Display username.
➜ commands git:(master) ✗ whoami
dz0400229
Summarize
At this point, the practical commands about CLI that Xiaolan shared with you today are over. If you think my article is helpful to you, you can forward it or discuss it together.