[npm & Bower] npm: run-script でタスクランナーから解放される

公開日: 2015/12/10
更新日: 2018/10/19

2周遅れくらいでやっと追いついた。

管理するファイルが多すぎてつかれたおじさんに一筋の光明。

Grunt/Gulpで憔悴したおっさんの話 – MOL

普通に元のコマンド叩いたらいいじゃんって思うんです。

助かる！

Contents

とりあえず run-script してみる

package.json を作成する。

% npm init

パッケージをインストール。

% npm install --save-dev stylestats mocha watch

package.json を開くと scripts とあるので、このような形で書いてみる。

package.json
  "scripts": {
    "style":  "stylestats build/stylesheets/all.css",
    "test":   "mocha test/**.js"
  },

ファイルなどは適当に用意して実行。

% npm run style
> bp-middleman@0.1.0 style /Users/****/projects/middleman
> stylestats build/stylesheets/all.css
    :
% npm run test
> bp-middleman@0.1.0 test /Users/****/projects/middleman
> mocha test/**.js
    :

config

config フィールドに記述。
scripts フィールドで $npm_package_config_NAME のように使う。

package.json
  "config": {
    "css_dir":    "build/stylesheets",
    "test_dir":   "test"
  },
  "scripts": {
    "style":      "stylestats $npm_package_config_css_dir/all.css",
    "test":       "mocha $npm_package_config_test_dir/**.js",

ふむふむ。

watch

先ほどまとめてインストールした mikeal/watch を利用。
タスクに意味はない。

package.json
  "config": {
    "css_dir":    "build/stylesheets",
    "test_dir":   "test"
  },
  "scripts": {
    "style":      "stylestats $npm_package_config_css_dir/all.css",
    "test":       "mocha $npm_package_config_test_dir/**.js",
    "watch:css":  "watch 'npm run style' $npm_package_config_css_dir",
    "watch:js":   "watch 'npm run test' $npm_package_config_test_dir",
    "watch":      "npm run watch:js & npm run watch:css"
  },

実行。

% npm run watch
> bp-middleman@0.1.0 watch /Users/****/projects/middleman
> npm run watch:js & npm run watch:css
    :

ctrl + c で止めて良いようだ。

設定した run-script をリストする

ほほう。

% npm run
Lifecycle scripts included in bp-middleman:
  test
    mocha $npm_package_config_test_dir/**.js
available via `npm run-script`:
  style
    stylestats $npm_package_config_css_dir/all.css
  watch:css
    watch 'npm run style' $npm_package_config_css_dir
  watch:js
    watch 'npm run test' $npm_package_config_test_dir
  watch
    npm run watch:js & npm run watch:css

タスクランナーの *-watch と *-shell に集約しようかと考えていましたが、npm だけでまかなえるものが多そうですね。

補遺