前回迄にnpmを用いてSass、Pugをインストールしましたが、コーディングの都度、コマンドプロンプトやターミナルを開いてSass、Pugの起動コマンドを入力するのは少々手間です。慣れないうちは長いコマンドを打ち間違えることもあるでしょう。
また、Sass、Pugを同時に起動したい場合はどうすれば良いのでしょう？
これらを解決できるものとして、タスクランナーというものがあり、以前まではその一つとしてGulpがよく使われていました。(私もGulpを使用していました)
npmを用いている場合、タスクランナーとしてnpm scriptsを使用することができ、これらの作業の自動化が可能です！
npm scriptsを使用するにはpackage.jsonファイルを編集していく必要があります。
早速やっていきましょう！
Sass、Pugの導入は↓の記事で紹介しています！
JSONファイルって何？
以前の記事でSass、Pugをインストールしたフォルダで> npm init -yとし、package.jsonを作成しました。
そもそもJSONファイルとは JavaScript Object Notation の略称で、テキストベースで各種のデータを保存するファイルであり、package.jsonは、Node.jsパッケージのデータが保存されています。
package.jsonをエディタで開くと、以下のようになっているかと思います。
{
"name": "sample",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}JavaScriptでのオブジェクトの形{プロパティ: 値, プロパティ:値, ...}にとても似ていますが、JSONは次のようなルールが定められています。
{キー: 値,キー: 値, ...}のようキーとそれに対応する値のペアをカンマで区切る- キーはダブルクォーテーションで囲った文字列型
- 値は文字列、数値、真偽(
true、false)、null、オブジェクト、配列のいずれか - ファイル拡張子は
.json
このようなルールに従って、JSONファイルを記述していく事となります。
npm scripts の編集
package.json内のscriptsキーにはオブジェクトが登録されています。
このオブジェクト内のキーを、npm run ●●●●とすると、キーに対応する値に指定されているコマンドを呼出すことができます。
package.jsonのscriptsの部分を以下のように編集し、以前の記事で紹介したPug、Sassを起動するコマンドを登録してみましょう。もともとの"test": ... の行は削除してしまってOKです。
{
...
"scripts": {
"pug": "pug --watch src/pug --out public --pretty", "sass": "sass --watch src/sass:public/css" }
...
}上記のようにpackage.jsonを編集した上で、次のコマンドを入力します。
> npm run pugこれはscriptsのpugキーに登録されたコマンドを実行します。
pug --watch src/pug --out public --prettyまた、次の様にすると、
> npm run sasssassキーに登録されたコマンドを実行します。
sass --watch src/sass:public/css尚、VSCodeでpackage.jsonを含むフォルダを開いている場合は、NPM SCRIPTSの欄に、登録しているscriptsが表示されていると思います。
ここにマウスカーソルをかざすとアイコンが出てくるので、そちらをクリックしてもコマンドが実行されます。
複数のコマンドを同時に実行する
複数のコマンドを同時に実行するためにはnpm-run-allパッケージをインストールします。
このパッケージもよく使うので-gオプションにてグローバルインストールでいいでしょう。
> npm install -g npm-run-allインストールが完了すると、npm-run-allが使用可能となります。
先程、package.jsonファイルのscriptsにpug、sassを登録しました。
{
...
"scripts": {
"pug": "pug --watch src/pug --out public --pretty", "sass": "sass --watch src/sass:public/css" }
...
}npm run ●●●●と同様に、npm-run-allもこのscriptsに登録されたものを渡すことができ、こちらはスペースで区切って複数指定できます。
また、-pまたは--parallelオプションを付けると、複数コマンドを並列に実行し、-sまたは--serialオプションを付けると、複数コマンドを順次実行することになります。
とりあえずscriptsに登録されたpugとsassを並列に実行してみましょう。
コマンドプロンプトまたはターミナルを開き、
> npm-run-all -p pug sassとすると、Pug・Sassが同時に起動し、両方の指定されたフォルダの監視が始まります。
npm-run-allをscriptsに登録する
どうせなので、npm-run-all ●●●●もscriptsに登録してしまいましょう。package.jsonのscripts内にstartキーを追加します。
キーを追加するので、前のsassキーの行の末尾にカンマを追加するのを忘れずに…
{
...
"scripts": {
"pug": "pug --watch src/pug --out public --pretty",
"sass": "sass --watch src/sass:public/css",
"start": "npm-run-all -p pug sass" }
...
}ここではstartと登録しましたが、このstartは予約語となっており、
> npm run startと、入力せずとも
> npm startとするだけでstartに登録したコマンドを実行できます。
最初のPug、Sasの起動コマンドに比べかなり簡単になりましたね！
まとめ
コマンドの入力や、package.jsonの編集等、少し取っつきにくいものが多いかもしれませんが、使いこなせれば作業がとても楽になるので是非チャレンジしてみてください。
次回の記事では、まだあるWEB制作に必要なパッケージと、それらのnpm scriptsへの登録を紹介してきます！
次の記事
まだまだあるWEB制作に必要なパッケージを紹介します！
