フロントエンドのタスクランナーに npm script
概要
フロントエンドの開発環境で npm script が使える
フロントエンド開発を始めようと思うと、最近はいろんなものを組み合わせて開発環境を作るのが普通に感じた。
タスクランナーだと下記のものがよく使われてるように感じるけど、正直使い方がよくわからない。
- glunt
- gulp
npm script を使ってみる
プロジェクトの初期設定
対話的にプロジェクトの初期設定をする。
$ npm init .
ちょっと試して見たいだけなら、全部 Enter で大丈夫。
終了すると、 package.json
が作成される。
package.json にはプロジェクトの設定が記述されていて、以降で作成するタスクもこのファイルに記述する。
プロジェクトに必要なライブラリのインストール
他の人が作成したプロジェクトを使うときなどは、下記コマンドで開発環境を作成することができる。
$ npm install
タスクの作成
タスクは package.json に記述する。
以下は npm init
で作成された例
{ "name": "test-package", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }
ここで、タスクは
"scripts": { "test": "echo \"Error: no test specified\" && exit 1" },
の部分に記載する。
例
コンソールに test
と出力するスクリプトを書いてみる。
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "echo": "echo test" },
実行
$ npm run echo
※ 今回の例では echo
というコマンドを作成した為上記のコマンドで実行できる。
タスクの実行は
$ npm run <タスク名>
実行結果
$ npm run echo test