npm-scriptsの使い方。自作のコマンドによるタスク実行方法

畳んだ布団が飼い猫のお気に入りの場所になってます。@It_is_Rです。

npm-scriptsを使うことで、あらかじめタスクをかんたんな名前で指定しておき、そのタスクを素早く実行できるようになります。

今回はnpm-scriptsを使って、自作のコマンドを設定する方法を紹介します。

npm-scriptsについて

gulpやwebpackを使っている方であれば、簡単なコマンドを入力するだけで複雑なことをやってくれる、あの便利さを知っていることでしょう。

そういった処理を、手軽に自分で作れてしまうのがnpm-scriptsです。
あらかじめ、繰り返し使われる処理をnpm-scriptsで作っておけば、指定したコマンドを実行するだけで、簡単に複雑な処理をおこなうことができるようになります。

またnpm-scriptsは、Node.jsと同時にインストールされるnpmの機能です。
Node.jsのインストールについては、以下の記事を参考にしてください。

Windows10にNode.jsをインストールする方法

MacにNode.jsをインストールする方法

npm-scriptsの使い方。かんたんなタスクを作る

npmを使って開発したいディレクトリに移動したら、以下のコマンドを実行します。

$ npm init -y

これでpackage.jsonというファイルが作られます。
package.jsonの中は、以下のようになっています。

{
  "name": "npmscript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

6〜8行目が、npm-scriptsの部分です。ここにコマンドを追加することで、そのコマンドを使えるようになります。
では、この部分を書き換えて、コマンドを作ってみましょう。

{
  "name": "npmscript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "hello": "echo \"hello\""
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

7行目を書き換え、helloというコマンドを作ってみました。
このコマンドを実行するには、以下のようにします。

$ npm run hello

> npmscript@1.0.0 hello
> echo "hello"

hello

helloと出力されれば成功です。

まとめ

今回はnpm-scriptsに書いておく方法を紹介しました。
よく使うオプションをあらかじめ設定しておくことで、作業が捗るようになると思います。

以上、npm-scriptsで自作のコマンドを設定する方法でした。

• Tweet
• Facebook
• はてブ
• Pocket