1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. npm-scriptsの使い方。自作のコマンドによるタスク実行方法

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

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

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

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

目次
  1. npm-scriptsについて
  2. npm-scriptsの使い方。かんたんなタスクを作る
  3. まとめ

npm-scriptsについて

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

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

またnpm-scriptsは、Node.jsと同時にインストールされるnpmの機能です。
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で自作のコマンドを設定する方法でした。

スポンサードリンク

関連コンテンツ

オススメ記事

【解決!】Macで「デフォルトシェルはzshになった」と表示されるときの対処法

MacOSをアップデートしてから、ターミナルを開くたびに、「The default interactive shell is now zsh.」というメッセージが表示されるようになりました。 これは

PythonでUSBメモリのパスワードを解析。総当たりでロック解除してみよう!

みなさんこんにちは。@It_is_Rです。今回はPythonを使って、総当たりでUSBメモリのパスワードを解析する方法を紹介します。(※このストーリーはフィクションです) Rりこ師匠、

ファイルを分けるべよ!

【JavaScript】ファイルを分けて管理してみよう! 小学生からのプログラミング入門

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、今回もはじめていきましょう! 前回はりこちゃんを方向キーで操作《そうさ》することができるようになりました。しか

ショートコード

BEMによるCSS設計の方法を解説。命名規則から使い方まで。

完璧を求めすぎて、平均以下な@It_is_Rです。 CSSは比較的簡単なものですが、CSS設計をしっかりしておかなければ、余分なコードが多くなったり、後から修正が大変になったりしてこまることにな

Python(Tkinter)でウィンドウを表示するための基本

ゲームなどのアプリを作成したいとき、まず、ウィンドウを表示する必要があります。そこで今回は、Python(Tkinter)を使って、ウィンドウを表示する方法と、その設定を変える方法を紹介します。

Pythonのtkinterで、画像つきのおみくじゲームを作ろう!

さて、今日《きょう》も楽《たの》しくプログラミングを学《まな》んでいきましょう。 今回《こんかい》はPython《パイソン》のtkinterを使《つか》って、本格的《ほんかくてき》なおみくじゲ

Bootstrap 4によるボタンの作り方。色やサイズなどの指定方法!

Bootstrap4の使い方、第5回目となりました。 Bootstrapの機能のひとつとして、クラスを組み合わせて指定するだけで、色々なボタンが作れます。 今回はBootstrap4を使ったボタンの

【Android Studio】レイアウト( Layout )の種類を覚えよう!

服に膝を入れるのが癖です。@It_is_Rです。 Androidアプリ開発、9回目となりました。 さて今回は、ボタンやテキストのレイアウトを整える方法を、解説していきたいと思います。 水平(Ho

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。背景を変更する。

三度の飯よりも好きなものが多すぎて比較にならない@It_is_Rです。 FC2ブログ"最強"カスタマイズ入門講座の続きですね。最強にカスタマイズしていきましょう。 今回は背景色の変更をメインに

webpackの設定ファイル「webpack.config.js」の使い方を覚えよう

webpack.config.jsはwebpackを使う上での設定ファイルです。今回は、webpack.config.jsの使い方を紹介します。 webpack.config.jsとは

コメントを残す(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。