アカベコマイリ

HEAR NOTHING SEE NOTHING SAY NOTHING

cpx と rimraf を試す

September 23, 2015開発cpx, JavaScript, Node, rimraf

gulp なしの Web フロントエンド開発の npm-scripts ではリリース用ファイル処理がイマイチだった。

{
  "scripts": {
    "release:css": "stylus -c ./src/stylus/App.styl -o ./dist/bundle.css",
    "release:js": "browserify -t babelify ./src/js/App.js | uglifyjs > ./dist/bundle.js",
    "release:clean": "trash ./dist",
    "release:mkdir": "mkdirp ./dist && npm run release:clean && mkdirp ./dist",
    "release:copyfiles": "copyfiles -f ./src/*.html ./dist",
    "release:copydirs": "ncp ./src/fonts ./dist/fonts",
    "release:copy": "npm run release:copyfiles && npm run release:copydirs",
    "release": "npm-run-all -s release:mkdir release:clean release:mkdir  release:copyfiles release:copydirs -p release:css release:js"
  }
}

trash によるディレクトリ削除は対象が存在しない場合にエラーとなるため、これを避けるべくディレクトリ作成してから実行。また各種ファイル操作で個別に mkdirpcopyfilesncp を利用している。これらの合わせ技による冗長感がなんともキツイ。よって解決のために cpx と rimraf を試す。

cpx

cpx はファイルのコピーや監視機能を提供するモジュールで。対象を glob 形式で指定できるうえに CLI も提供。コピー先ディレクトリが存在しない場合は自動生成までしてくれる。

gulp なしの〜を書いたとき gulp.src/dest 的な CLI がほしいと思ったのだが cpx は正にそのような感じ。というわけで cpx を使用して npm-scripts のコピー処理を変更。

{
  "scripts": {
    "release:copy": "cpx \"./src/**/{*.html,*.eot,*.svg,*.ttf,*.woff,package.json}\" ./dist"
  }
}

src 内の HTML と fonts ディレクトリ内ファイルについて構造を維持したまま dist にコピーしている。cpx により release:mkdircopyfilescopydirs が不要になった。glob に詳しくなれば更に簡略化できそう。これは将来の課題としておく。

rimraf

rimraf は UNIX の rm -rf に相当する機能を提供するモジュール。CLI もある。使い方は簡単で引数に削除対象を指定するだけ。これを使用して npm-scripts のディレクトリ削除を書き変える。

{
  "scripts": {
    "release:clean": "rimraf ./dist"
  }
}

rimraf は対象ディレクトリが存在しなくてもエラーにならず正常終了する。また trash のように対象をゴミ箱に移動せず直に削除。使用感は del に近い。今回は CLI かつ単体ディレクトリを削除することが目的なので rimraf を採用した。

組み合わせる

cpx と rimraf によるファイル操作を定義したので、これらを npm-run-all で組み合わせる。

{
  "scripts": {
    "release:css": "stylus -c ./src/stylus/App.styl -o ./dist/bundle.css",
    "release:js": "browserify -t babelify ./src/js/App.js | uglifyjs > ./dist/bundle.js",
    "release:clean": "rimraf ./dist",
    "release:copy": "cpx \"./src/**/{*.html,*.eot,*.svg,*.ttf,*.woff,package.json}\" ./dist",
    "release": "npm-run-all -s release:clean release:copy -p release:css release:js"
  }
}

コピー処理が release:copy だけになり release から release:mkdir が消えて非常にスッキリ。npm が減ったため devDependencies も簡潔になった。ありがたい。

今回の対応を反映させたサンプルを以下に公開。

Comments from WordPress

  • dog-ears dog-ears 2016-10-21T00:18:30Z

    参考にさせていただきました。ありがとうございました。