回答編集履歴
1
ローカルで挙動を見返した結果、回答内容を大幅変更
answer
CHANGED
|
@@ -1,20 +1,72 @@
|
|
|
1
|
-
|
|
1
|
+
## 前提
|
|
2
|
-
> ただ"message"を実行すると、"message:js"だけが動作し、さらにもともと存在していたindex.cssもbuildフォルダから消えてしまいます。
|
|
3
2
|
|
|
4
|
-
|
|
3
|
+
それぞれのnpm scriptsの内容を踏まえて、それぞれの目的が
|
|
5
4
|
|
|
5
|
+
- `message:js`: 開発時に`src`配下のjsファイルが編集されるたびにコンパイルする
|
|
6
|
+
- `message:css`: 開発時に`src`配下のscssファイルが編集されるたびにコンパイルする
|
|
7
|
+
- `message`: 上記2個のnpm-scriptsを同時に動かして、開発時にjs/scssのどちらかが編集されるたびに適切にコンパイルする
|
|
8
|
+
|
|
9
|
+
という想定で回答します。
|
|
10
|
+
|
|
11
|
+
## 対応方法例（作業的にわかりやすいもの）
|
|
12
|
+
|
|
13
|
+
次の2個を実施する必要があります。
|
|
14
|
+
|
|
15
|
+
- 1回だけ: `package.json`内の`message`の定義に`-p`オプションをつける
|
|
16
|
+
- 都度: `npm run message`実行後に、`scss`ファイルを何もせずに保存だけする
|
|
17
|
+
|
|
18
|
+
```diff
|
|
19
|
+
- "message": "npm-run-all message:*"
|
|
20
|
+
+ "message": "npm-run-all -p message:*"
|
|
6
21
|
```
|
|
7
|
-
"scripts": {
|
|
8
|
-
"message:js": "wp-scripts start blocks/message/src/index.js --output-path=blocks/message/build/",
|
|
9
|
-
"message:css": "node-sass --include-path scss blocks/message/src/index.scss blocks/message/build/index.css -w --output-style compressed",
|
|
10
|
-
"message": "npm-run-all message:js message:css"
|
|
11
|
-
}
|
|
12
|
-
```
|
|
13
22
|
|
|
14
|
-
|
|
23
|
+
## 解説
|
|
15
24
|
|
|
16
|
-
|
|
25
|
+
※手元の挙動確認を前提にした原因説明です
|
|
17
|
-
- `npm-run-all`でワイルドカードを指定した場合は、文字列の昇順でnpm-scriptを実行する
|
|
18
|
-
- `message:css` -> `message:js`の順に実行するため、CSSの生成後にbuildフォルダを空にしてjsを生成する
|
|
19
26
|
|
|
27
|
+
### wp-scripts startの挙動について
|
|
28
|
+
|
|
29
|
+
`message:js`で呼び出しているこのコマンドは、
|
|
30
|
+
|
|
31
|
+
- --output-pathで指定した出力先フォルダをまっ更にして
|
|
32
|
+
- 指定したファイルをコンパイルしして
|
|
20
|
-
|
|
33
|
+
- 指定したファイルに変更が無いかを監視し続ける
|
|
34
|
+
|
|
35
|
+
いうものです。
|
|
36
|
+
つまり、1回限りのコンパイルコマンドではないため、利用者側が止めない限りは終了しません。
|
|
37
|
+
|
|
38
|
+
### node-sass
|
|
39
|
+
|
|
40
|
+
こちらは通常だと1回だけSCSSファイルをCSSにコンパイルするものです。
|
|
41
|
+
ただし、`-w`オプションが指定されているため、こちらも指定したファイルに変化がないかを監視し続けます。
|
|
42
|
+
|
|
43
|
+
### npm-run-allの挙動について
|
|
44
|
+
|
|
45
|
+
`npm-run-all`はパラメータなしに呼び出すと、順番に並んでいるコマンドを順番に実行します。
|
|
46
|
+
|
|
47
|
+
前述の通り`message:js`で定義しているコマンドはファイルを監視し続けるタイプのもののため、`Ctrl-C`などで自分の手で止める必要が出てきます。
|
|
48
|
+
しかしこの状況下で`Ctrl-C`でプロセスを止めても、`npm-run-all`へのプロセス終了シグナルにしかならないようです。
|
|
49
|
+
そのため、「`message:js`が終了→続けて`message:css`を実行」という流れにはなりません。
|
|
50
|
+
|
|
51
|
+
`message:js`の中身が`build`フォルダをまっさらにしてしまう関係上、仮に順番をきちんと定義してもcssが生成されることはありません。（最初の回答が正しくない理由がここです）
|
|
52
|
+
|
|
53
|
+
そこで、どちらのプロセスも同時に動いて、それぞれの監視をしてもらう必要があります。
|
|
54
|
+
こういった用途などのために`npm-run-all`には`-p`という並列実行を行うパラメータがあります。
|
|
55
|
+
|
|
56
|
+
### `npm-run-all -p` での挙動概要と、毎回CSSの保存が必要な理由
|
|
57
|
+
|
|
58
|
+
`message:*`のそれぞれで定義したコマンドはいずれも「コンパイルして監視する」ものです。
|
|
59
|
+
これらを`-p`で同時に実行することで、それぞれの変更を検知してコンパイルが動くようになります。
|
|
60
|
+
|
|
61
|
+
ただし、並列実行のためにどちらが先に最初のコンパイルをするかが不明であり、`message:js`が最初にbuildフォルダをまっさらにしてしまうため、何かしらの形式でscss側に変更を検知させてコンパイルし直させる必要があります。
|
|
62
|
+
|
|
63
|
+
※これは直接的な編集である必要はなく、ファイルをエディタで開いて何もせず`Ctrl-S`で保存すれば問題ないはずです
|
|
64
|
+
|
|
65
|
+
## 余談
|
|
66
|
+
|
|
67
|
+
回答例として上記のことを書いてはみたものの、「`message`実行のたびにscssと何もしなくていいから保存だけする」のはあまり効率出来ではないです。
|
|
68
|
+
（「作業的にわかりやすいもの」と注釈をつけたのはこれが理由です）
|
|
69
|
+
|
|
70
|
+
もし余裕があるのであれば、wp-scriptsが参照可能な`webpack.config.js`に変更を加えて、scssのビルドもwp-scriptsに任せるようにすることを推奨したいです。
|
|
71
|
+
|
|
72
|
+
※[wp-scripts内でsassコンパイルまでしようとしていそうなサイト例](https://webutubutu.com/webdesign/7779#toc_H3-6)
|