Webデザイナーやコーダー、マークアップエンジニアにとってはCLI（いわゆる黒い画面）に抵抗感を抱く人は割と多いのではないでしょうか。
フロントエンドを本格的にやる場合、CLIでの操作が必要になってきます。
最近ではpackage.jsonのnpm-scriptsにコマンドを記述しておき、CLI側でキーを入力して実行することが多いです。（npm run * とか yarn * とか）
よく使うコマンドやパッケージの調べ方あたりを簡単ではありますが、紹介します。
Linuxコマンド
仕様頻度の高いものだけにとどめておきます。
オプションで詳細設定や違うこともできますが、その辺は参考記事をご確認ください。
| コマンド | 内容 |
|---|---|
| ls | ファイル・ディレクトリを表示 参考：【 ls 】 ファイルやディレクトリの情報を表示する |
| cd 移動先ディレクトリ | ディレクトリの移動cd ../：一つ上のディレクトリへ移動cd js/vendor：js/vendorへ移動cd /home/user1：/home/user1へ移動参考：【 cd 】 ディレクトリを移動する |
| mkdir ディレクトリ名 | ディレクトリの作成 下層ディレクトリを作成する場合は-pが必要 参考：【 mkdir 】 ディレクトリを作成する |
| touch 作成ファイル名 | 空ファイルの新規作成 参考：【 touch 】 ファイルのタイム・スタンプを変更する |
npm公式サイト（英語）に慣れる
「npm パッケージ名」で検索するとよく上位に出てきます。
日本語で紹介されていないパッケージはどうしても公式を読むことになります。
英語がわからなくてもコマンドやコードを読めばなんとなくわかるようになってきます。
知りたいことは
- どうやってインストールするか（Installation）
- どうやって使うか（Usage）
- どのようなオプションがあるか（Options）
- 例えばどのように書くか（Examples）
だいたいこれくらいだと思います。
インストールは極力グローバル（-g）は避けましょう。ローカルにインストールする場合、バージョンの差異で将来苦しむ可能性があります。
-gはつけず-Dでpackage.jsonでプロジェクトごとの管理にしましょう。
npm-scriptsの中に
{
"scripts": {
"test": "使いたいコマンド"
}
}
と書いておき、CLIで
$ npm test
と実行すれば大体はOKです。（※後述）
最初は慣れないかもしれませんが、オプションは同じようなものを使うことが多いので慣れてしまえばラクです。
パッケージによっては「***-cli」という名前で提供しているものがあり、CLIを使用したい場合はこちらのインストールが必要な場合があります。
※オプションは大文字・小文字がパッケージによって違うことがあるので使用前に必ず公式を確認してください。
よくあるオプション
| オプション | 内容 |
|---|---|
| -h, --help | ヘルプを表示 |
| -v, --version | バージョンを表示 |
| -w, --watch | 監視 |
| -d, --dir | 出力先ディレクトリの指定 |
| -o, --output | 出力先ファイルの指定 |
注意事項
CLIに直接入力して実行する場合とnpm-scripts側に用意し呼び出して実行する場合（※前述）があります。
npm-scripts側に用意し呼び出して実行する場合、Linuxコマンド
がそのまま通らないことがあったりOSごとに記述が違って複数OSでの実行ができなかったりします。
そこを解決するパッケージが存在するので、もしエラーを吐いてしまった場合にLinuxコマンドを使用していれば確認してみると良いでしょう。
Linuxコマンドの機能を提供するパッケージ
| パッケージ名 | |
|---|---|
| rimraf | ファイルやディレクトリを削除するrm -rfを実行するツール参考：【 rm 】 ファイルやディレクトリを削除する |
| mkdirp | ディレクトリ作成をnpm-scriptsで使用できる機能を提供mkdir -pを実行するツール |
さいごに
フロントエンドの作業をおこなう時のCLIに関する内容をまとめました。
他にもたくさんできることはありますが、最初の取っ掛かりとして参考になればと思います。