tasks.jsonの使い方の基礎【VS Code使い方②】

# 使い道

この記事は順番に実行したいタスクがあるときに役立ちます。
例えば、以下のような場面です。

- 開発環境に[SFTP](https://marketplace.visualstudio.com/items?itemName=liximomo.sftp)で接続してWordpressの子テーマを開発
  - 区切りがいいところでZip化して「Zip削除→Zip圧縮→本番Wordpressにアップロード」のループが面倒
- `npm run build` して、`firebase deploy`する２段コマンドが面倒
- AWS Lambda function にソースをアップロードしたい
  - serverless frameworkを使えば`serverless deploy`で終わりだが、使うほどのコード量でもない
  - zip圧縮が面倒だが、連番圧縮しても容量の無駄なので、過去バージョンは自動で消したい

::: note
上記の中には、<a href="https://www.jenkins.io/">jenkins</a> や <a href="https://github.co.jp/features/actions">Github actions</a> で対応したほうがいい内容もあります。
:::

# やること

1. `tasks.json`の基本
1. `tasks.json`で順次実行
1. `7z`と連携してみる
1. `npm`とか連携してみる

# `tasks.json`の基本

初めての人はメニュー→Terminal（ターミナル）→Configure Tasks（タスクの構成）→Otherすると`tasks.json`が作成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134703/451b3e63-9634-5035-19e4-a2ae6866b005.png)
プロジェクトフォルダ直下に`.vscode`というフォルダが自動作成され、その下に`tasks.json`が確認できると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134703/d79c2964-5d7d-7bce-e4d7-662e9787f9bf.png)

そうしたら、その`tasks.json`の中身を編集していきます。

```json-doc
{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "task Hello",
            "type": "shell",
            "command": "echo Hello Task Json!",
        }
    ]
}
```

これで`task Hello`が作成できました。

今さっき作成した`task Hello`を実行してみましょう。

メニュー→Terminal（ターミナル）→Run Tasks（タスクの実行）で`task Hello`を選択してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134703/e533d861-d4be-078c-c3b8-62ef4bbff11d.png)

`echo`コマンドが実行されて、`Hello Task Json!`が表示されていることが確認できました。

# `tasks.json`で順次実行

それでは次に、複数のタスクを順番に実行する方法を見ていきましょう。

まずは、先ほど作った`tasks.json`にタスクを３つ追加します。

```json-doc
{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "task Hello",
            "type": "shell",
            "command": "echo Hello Task Json!",
        },
        {
            "label": "task one",
            "type": "shell",
            "command": "echo One!",
        },
        {
            "label": "task two",
            "type": "shell",
            "command": "echo Two!",
        },
        {
            "label": "Task Sequence",
            "type": "shell",
            "command": "echo Three!",
            "dependsOrder": "sequence",
            "dependsOn": [
                "task one",
                "task two"
            ]
        }
    ]
}
```

`task one`では、`One!`が`echo`され、`task two`では、`Two!`が`echo`されます。これらを順番に実行した後に、`Three!`と`echo`したいので、そのための`Task Sequence`を作成しました。

`Task Sequence`を実行すると、`One!`→`Two!`→`Three!`の順に`echo`表示されます。
試しに実行してみましょう。

先ほどと同じように、メニュー→Terminal（ターミナル）→Run Tasks（タスクの実行）で`Task Sequence`を選択してみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134703/8dc9d380-26d9-dac1-7148-140e392a9735.png)

キレイに順番通りに表示できています。

より実践的な見た目に近づけるのであれば、こんな感じになるでしょう。

```json-doc
{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "first prosess",
            "type": "shell",
            "command": "echo finish first process!",
        },
        {
            "label": "second prosess",
            "type": "shell",
            "command": "echo finish second process!",
        },
        {
            "label": "run all tasks",
            "type": "shell",
            "command": "echo finish All tasks!",
            "dependsOrder": "sequence",
            "dependsOn": [
                "first process",
                "second process"
            ]
        }
    ]
}
```

# 7z と連携してみる

さらに実践的にするために、今度はzipツールを利用してましょう。

7z は OSS界では最強の圧縮解凍ツールです。
簡単なインストール方法はこうです。[Chocolatey](https://chocolatey.org/)や[Homebrew](https://brew.sh/)を事前に導入しておくと早いです。

```posh:Win
choco install 7zip
```

```shell:Mac
brew install p7zip
```

7zの公式ドキュメントを見ながら、コマンドを使ってみましょう。

https://sevenzip.osdn.jp/chm/cmdline/commands/add.htm

```shell
7z a deploy.zip *.php *.css
```

出来ました。これを実行すると、フォルダ内のphpファイルとcssファイルの全てを`deploy.zip`に圧縮できます。

圧縮はこれで良いとして、２回目からは古い`deploy.zip`を消してから作らなければいけません。

```shell
rm -f ./deploy.zip
```

こんな感じのコマンドで良いでしょう。このコマンドを実行すれば`deploy.zip`を削除できます。

:::note info
Powershell において、rm は Remove-Item の Alias です。
:::

それでは、zipの削除と作成を合わせてタスクを作ってみましょう。

```json-doc
{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "delete zip",
            "type": "shell",
            "command": "rm",
            "args": [
                "-f",
                "./deploy.zip",
            ],
        },
        {
            "label": "make zip",
            "type": "shell",
            "command": "7z",
            "args": [
                "a",
                "./deploy.zip",
                "*.php",
                "*.css",
            ],
        },
        {
            "label": "run all tasks",
            "type": "shell",
            "command": "echo update zip file!",
            "dependsOrder": "sequence",
            "dependsOn": [
                "delete zip",
                "make zip"
            ],
        },
    ]
}
```

前回は`command`にコマンド１行で設定していましたが、今回は、`commmand`はあくまでコマンドの名前を、`args`に引数を別途書いています。なんというか、見やすくなった気がします。

これで、タスクの作成は完了しました。試しに、phpファイルやcssファイルをプロジェクトフォルダ直下に置いてタスクを動かしてみてください。

# npm とか連携してみる

先ほどの7z連携でも、そうだったのですが、実は、順次実行のタスクの場合は、`&&`でも実行できたりします。

```shell
echo Alpha && echo Bravo && echo Charlie
```

このように、echo の連撃が可能です。

https://qiita.com/egawa_kun/items/714394609eef6be8e0bf

そのため、`npm`で`build`してから、`firebase`で`deploy`するときなんかは、

```shell
npm run build && firebase deploy
```

現実問題として、こうするか？というと、[github-actions](https://docs.github.com/ja/actions/learn-github-actions)を使い始めれば、ローカル環境ではやらなくなると思います。

`npm run build && firebase deploy`は短いし、上記の7zと比べれば、変数が無く、打ち間違いのリスクもありません。そのため、`tasks.json`に書き込む価値は低いかもしれません。強いて言えば、ビルドタスクに登録すればショートカットキーが効くので便利なくらいですね。

```json-doc:long_version
{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "build and deploy",
            "type": "shell",
            "command": "npm run build && firebase deploy",
        },
    ]
}
```

```json-doc:split_n_merge_command
{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "build",
            "type": "shell",
            "command": "npm run build",
        },
        {
            "label": "deploy",
            "type": "shell",
            "command": "firebase deploy",
        },
        {
            "label": "build and deploy",
            "type": "shell",
            "command": "build and deploy finish!",
            "dependsOrder": "sequence",
            "dependsOn": [
                "build",
                "deploy"
            ]
        },
    ]
}
```

# デフォルトビルドタスク

このように、デフォルトビルドタスクに設定すると、ショートカットキーが効くようになります。
Windowsの場合は、`Ctrl`+`Shift`+`B`で、Macの場合は、`⌘`+`Shift`+`B`ですね。

```diff_jsondoc
{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "deploy",
            "type": "shell",
            "command": "firebase deploy",
+            "problemMatcher": [],
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            }
        },
    ]
}
```

# 原典

https://code.visualstudio.com/docs/editor/tasks

**Excelsior!**