タスクランナーの代わりにnpm-scriptsを使う #JavaScript

仕事で簡単なサイトを作った時に、タスクランナー代わりにnpm-scriptsを使った話

個人的フロント環境事情

最近のフロント開発では生でJSやCSSを書くことはほぼ無くなってきていて、何かしらのaltjsやCSSPreprocessorを使っている。

これらを使うにはgulp/gruntのようなタスクランナーが必要だけど、関連ファイルが多くなったり、環境の用意が面倒だったり、規模の小さいプロジェクトで使うには冗長だなーと感じていた。

npm-scripts

そこで以下の理由からnpm-scriptsを使うことにした。

package.jsonのみで完結できる
package.jsonに定義してあるパッケージに依存するので、グローバルにnode-sassとかbrowserifyを入れる必要がなく、環境構築が容易

JS/CSSのビルドとファイル監視のscriptsを含めたpackage.jsonだと以下にようになる。

package.json

{
  "name": "npm-scripts",
  "version": "1.0.0",
  "description": "",
  "main": "",
  "scripts": {
    "build:css": "node-sass assets/css/app.sass dist/css/app.css",
    "build:js": "browserify assets/js/app.js -t babelify --outfile dist/js/app.js",
    "watch:css": "watch 'npm run build:css' assets/css",
    "watch:js": "watch 'npm run build:js' assets/js",
    "watch": "npm run watch:js & npm run watch:css"
  },
  "author": "",
  "license": "",
  "devDependencies": {
    "babel-cli": "^6.7.5",
    "babel-preset-es2015": "^6.6.0",
    "babelify": "^7.2.0",
    "browserify": "^13.0.0",
    "node-sass": "^3.4.2",
    "watch": "^0.17.1"
  }
}

あとはnpm installしてからnpm run watchを打てばファイル監視がスタートする。

プロジェクトの規模や状況によるけど選択肢のひとつとしてnpm-scriptsは有りだなと思った。