要点

npm scriptのタスクはjsファイルに書き出せる
package.jsonに書く場合と違ってコメントが残せる
デメリットとして書き出した分だけ処理を追うコストがかかる

脱gulpに向けて

「フロントの仕事はあまり振られないし、脱gulpはそのうち、そのうち......」
と思っていたら、「そのうち」が来たので、gulpに依存せず、npm scriptでタスクを実現する書き方について調べた。

シェル！コマンド！ワンライナー！

npm run <task> でタスクを実行する方法を調べてみると、package.jsonの scripts に処理を書き、npm packageを直接操作する方法が多く見つかった。
この書き方をする場合、各タスクがどんなことをするのかを知るために、package.jsonだけを見ればいい。

しかし、複雑な処理を一つにまとめた場合に、複雑怪奇なワンライナーが生まれてしまう。
例えば、 browser-sync を例に挙げるとこんな感じ。

packege.json

{
    "name": "sample",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "start": "./node_modules/browser-sync/dist/bin.js start --server htdocs --port 8080 --watch ./htdocs --https --open local --no-notify",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "devDependencies": {
        "browser-sync": "^2.26.7"
    }
}

オプションが増えるとどうしても見辛くなる。
加えて、ファイル形式がjsonであるが故に、コメントを残すことができない。

タスクをjsファイルに書き出してみる

上記のタスクをjsファイルに書き出してみると、こんな感じになる。

main.js

'use strict';

const browserSync = require('browser-sync');

// Can write comment, because this is js file.
browserSync({
    server: {
        baseDir: 'htdocs', // DocumentRoot
        port: 8080,
        watch: true,       // Browser reload, if change target files?
        https: true,       // Is use https?
        open: 'local'      // Which into tab, if reloaded browser?
    },
    files: './htdocs/*',   // Watch taget files.
});

package.json側の呼び出しはこんな感じに。

package.json

{
    "name": "sample",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "start": "node main.js",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "devDependencies": {
        "browser-sync": "^2.26.7"
    }
}

nodeコマンドで処理の書いてあるjsファイルを実行するだけの記述になるため、見通しがよくなった。

その分タスクファイル管理は煩雑に...

この書き方のデメリットは、タスクの数だけjsファイルが増えること。
引き継ぎ等で初見の場合は、タスク数分のファイルをすべて確認することになるので結構手間かも。

ワンライナーで書くのもいいですが、タスクをファイルに書き出すことができることも知っておくと、柔軟なタスク管理ができると思い、初Qiitaとして本記事を書かせていただきました。