フロントエンドのタスクランナーに 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