脱gulpにむけて、npm-scriptsに移行中に、参考にしたコードを正確に書いたにも関わらずにうまく動かない。
ファイルの更新を監視するwatchを走らせた際に、なぜかエラーが発生する。
結論から言うと、
OSがWindowsの人は、シングルクーテーション「'」ではうまく機能しません!!
package.jsonの書き換える必要があります
#参考にしたwatchは以下の書き方
"scripts":{
"watch:server": "browser-sync start --server dist --files 'dist, **/*.html, !node_modules/**/*'",
"watch:css": "watch 'npm run css' ./src/sass",
"watch:js": "watch 'npm run js' ./src/js",
"watch": "npm-run-all -p watch:*"
},
##npm run watchをした場合の、エラー内容
$npm run watch
> Watching run
> Watching css'
> Watching ./src/sass
C:\Users\...\node_modules\watch\main.js:73
if (err) throw err;
^
[Error: ENOENT: no such file or directory, stat 'C:\Users\\...\\run'] {
errno: -4058,
code: 'ENOENT',
syscall: 'stat',
path: 'C:\\Users\\...\\run'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sample@1.0.0 watch:css: `watch 'npm run css' ./src/sass`
npm ERR! Exit status 1
npm ERR!
npm ERR!npm Failed at the study@1.0.0 watch:css script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sample@1.0.0 watch:js: `watch 'npm run js' ./src/js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the sample@1.0.0 watch:js script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
同じようにWatching ./src/jsもエラーがかえってきます。
##どこが動いていないのか探る
browser-syncを指定したwatch:serverを個別にrunすると、ちゃんとブラウザがたちあがります。watchそのものが動いていないのではないようです。
npm run css
で指定したscssコンパイルも、npm run js
でjs圧縮も個別にrunするとちゃんと動きます。
npm-run-allで指定したコマンドですべてを動かすと、動きません。
ということで、
"watch:css": "watch 'npm run css' ./src/sass",
"watch:js": "watch 'npm run js' ./src/js",
この記述に問題がありそうです。
##GitHubのissueに記述発見!
GitHub / npm watch#109
こちらによると、
windowsの人は、シングルクオーテーションの部分を以下のように書き換えます。
"watch:css": "watch \"npm run css\" ./src/sass",
"watch:js": "watch \"npm run js\" ./src/js",
###Windowsの人は、文字列を\でエスケープが必要です!
無事、記述したnpm scriptsが動くようになりました。
ぜひ、Windowsでエラーが起こった人は上記をためしてみてください。
#参考
https://hibi-update.org/javascript/npm-scripts/