cidermitaina

フロントエンドエンジニアをやっています。
25歳です。頑張るから読んでほしい。

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のエイリアスとして用いる。




npm-scriptのメリット、デメリット

npm-scriptsのメリット、デメリットをまとめてみます。

メリット

  1. シンプルな開発環境

  2. スクランナー独自のルールを学習しなくて済む

  3. 豊富なnode_modulesを直接叩ける

スクランナーを使うと、タスクランナーの勉強コストがかかってしまったり、タスクランナー用のnode_modulesの開発が止まったりして、詰まってしまうことがあります。

npm-scriptsだと、package.json だけで設定と処理が完結するのでとてもシンプルです。


デメリット

  1. 環境依存

  2. 可読性が悪くなる

実際に使ってみて、macでは動くのにWindowsでは動かない問題に直面してしまいました。 原因はmacだとUnixコマンドラインで動作、WindowsだとWindowsコマンドラインで動作するので同じ記述だと動作しなかったのです。。。 記述を変えて解決しました。。。

また、多くのタスクを増やそうとすると、可読性が悪くなります。。。



まとめ

お仕事ではまだ使っていないのですが、npm-scriptsを使った開発環境は気に入っています。

案件によってケースバイケースだなあと思い、今年は、 LPを作る時はnpm-script、ページものを作成する時はgulpを使おうかなあ(ejsを使ったり、複数人で開発のため環境依存や可読性が悪いのはやだなと思ったため)と個人的に考えています。




最後に作った環境をあげておきます。

github.com