npm-scriptsを使った開発環境

いつもgulpを使って開発をしていたのですが、ハマってしまうとなぜかいつも抜け出せなくて開発環境を整理するだけで時間がかかってしまうことがありました。

もっとシンプルな環境が作れないかなあ、と調べていて見つけたのが、npm-scriptを使った開発環境です。

npm scriptsって？

そもそもnpm scriptsって何だろう？と疑問に思ったのでメモ。

npm-scriptsとは、package.jsonファイルに記述可能なシェルスクリプトのエイリアスです。

具体的にどういうことなのかというと

【package.json】

"scripts": {
    "start": "npm run server",
    "server": "browser-sync start --server ./ --port 3000 --files \"./**/*.html,./assets/css/style.css,./assets/js/bundle.js\"",
  },

このpackage,jsonの記述を例にすると

$ npm startでサーバーが立ち上がり、ファイルの監視がはじまります。

このようにシェルスクリプトやエイリアスコマンドを「scripts」というフィールド登録できます。

手順

1. $ npm init
2. $ npm install module名
3. package.jsonのscriptsを編集

実行

$ npm run scripts名 でscirptを実行できます。

この例でいうと$npm run serverでserverが実行されます。

serverはbrowser-syncを使ってローカルサーバーを作って、ファイルの変更を監視オートリロードするタスクです。

予約語

npm-scriptsには予約語が4つあります。それらはrunをつけずに実行できます。さっきの例だと$ npm startで serverタスクが動きます。

$ npm start
　appを起動するようなshell scriptのエイリアスとして用いる。
$ npm restart
　appを再起動させるためのshell scriptのエイリアスとして用いる。
$ npm stop
　appを停止させるためのshell scriptのエイリアスとして用いる。
$ npm test
　appをテストするようなshell scriptのエイリアスとして用いる。