cpx と 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 によるディレクトリ削除は対象が存在しない場合にエラーとなるため、これを避けるべくディレクトリ作成してから実行。また各種ファイル操作で個別に mkdirp、copyfiles、ncp を利用している。これらの合わせ技による冗長感がなんともキツイ。よって解決のために 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:mkdir、copyfiles、copydirs が不要になった。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 2016-10-21T00:18:30Z
参考にさせていただきました。ありがとうございました。