【rimraf】npm-scriptsでファイル&フォルダの削除のやり方

Node.jsを使った開発では、ビルド時にdistフォルダなどの公開用フォルダのクリーンアップや、.mapファイルなどの開発時にしか使用しないファイルを削除するシーンがあります。

今回はnpm-scriptsで特定のファイルやフォルダを削除するrimrafというNode.jsのパッケージについて解説します。

Node.jsのバージョン管理ツール「Volta」のインストール・導入方法・使い方を解説

【初心者】npm-scriptsの使い方、web製作・webデザイナー・コーダー向けに1番分かりやすく解説

INDEX

`rimraf`とは

rimrafとは、ファイルやディレクトリを削除するためのNode.jsのパッケージです。
ビルド時の公開用フォルダのクリーンアップや、開発時にしか使用しないファイルの削除など、ビルドプロセスの一つとして使用されます。

そもそもNode.jsではパッケージを利用せずにデフォルトのコマンドでもファイルの削除は行えますが、クロスプラットフォームに対応していなかったりと、デフォルトの機能だけではデメリットが多い状況です。

そのためクロスプラットフォームに対応しているrimrafパッケージを利用することで、安全に効率的なファイルやディレクトリの削除を行えます。

今回のサンプルでは下記のような、.mapファイルを使用した開発を想定して進めていきます。
それでは以下のディレクトリとファイルを参考に、それぞれ適当なファイルを準備してください。

htdocs
└dist/
  └assets/
    └css/
     └style.css
     └style.css.map
    └js/
     └main.js
     └main.js.map

プロジェクトフォルダを作成したら以下のコマンドでpackage.jsonを作成します。

npm init -y

以下のコマンドで今回利用するrimrafのパッケージをインストールします。

npm i -D rimraf

package.jsonのdevDependenciesに以下のようにインストールしたパッケージが記載されたら成功です。

{
  "devDependencies": {
    "rimraf": "^5.0.5"
  }
}

rimrafでは対象の指定方法が複数ありますのでそれぞれ解説してきます。
それではpackage.jsonのscriptsフィールドに以下のコードを記述し、動作を確認していきましょう。

{
  "scripts": {
    "clean:file": "rimraf dist/assets/css/style.css.map"
  },
}

対象のファイル一つを、削除するスクリプトです。
ターミナルでnpm run clean:fileコマンドを実行し、対象のファイルが削除されていることを確認してください。

{
  "scripts": {
    "clean:map": "rimraf dist/assets/**/*.map"
  },
}

拡張子を指定したファイル削除のスクリプトです。
全ての.mapファイルを対象として削除を行ってみましょう。

/**と書くことで、そのディレクトリ以下の全てのファイルを対象として指定されます。

また、拡張子は複数選択することも可能です。
複数選択する場合は、拡張子を{}で囲み、,で拡張子を繋いで指定します。

{
  "scripts": {
    "clean:files": "rimraf dist/assets/**/*.{css,js}"
  },
}

{
  "scripts": {
    "clean:folder": "rimraf dist/assets"
  },
}

対象フォルダとその中のすべてのファイルを削除するスクリプトです。
フォルダごと削除されていることを確認してください。

{
  "scripts": {
    "clean:multi": "rimraf dist/assets/css dist/assets/js/main.js.map"
  },
}

対象ファイルとフォルダを一つのスクリプトで複数指定することも可能です。
複数のファイルやフォルダを同時に削除する場合は、対象のファイル・フォルダをスペースで区切って指定します。

以上でnpm-scriptsのrimrafパッケージでファイルを削除する開発環境の完成です。

プロジェクトごとにそれぞれカスタマイズをしてご自身のプロジェクトに活かしていただけますと幸いです。