gulp5がリリースされたけどnpm-scriptsでタスク処理する話
こんにちは、デザイナーのarimaです。
2024年3月ごろgulpの新しいバージョン（gulp5）がリリースされましたね。過去5年ほど更新が滞っていた期間があったので、この5年間でgulpから他のツールに移行した方も多いのではないでしょうか。
今回は機能拡張により新規リポジトリでゼロベースから環境構築をする好機だったため、gulpをアップデートして使用する…のではなくnpm-scriptsで実行してみました。その理由と方法についてまとめます。
gulp5を採用しなかった経緯とnpm-scriptsを使ってみた経緯
アトラスでは、有志で集まり週に1回1時間「フロントエンド・デザインワーキング（通称：FDワーキング）」という名のもくもく会をやっています。フロントエンド・デザインを中心とした知識の向上のため、各自テーマを決めて記事をまとめたり技術検証をしています。活動内容詳細は、過去当ブログでとりあげた「フロントエンドワーキングの活動」「フロントエンド（・デザイン）ワーキングの1年間とこれから」からご覧ください。
gulp以外のタスクランナーを検討する話や、npm-scriptsはどうだろうかという話は以前から挙がっていたため、npm-scriptsが使えそうかFDワーキングの一環でやってみたのがきっかけになりました。
まずgulp5を採用しなかった経緯についてです。gulpそのものが新バージョンになっても、gulpで使用するプラグインの更新は滞っているため、不具合が出た場合に解消されるか見通しが立ちません。gulp本体が今後も継続的に更新され続ける保証もないため、他のタスクランナーを検討しました。
今までgulp機能の中でもデザイナーとしてはSassのコンパイルを主に使用していたこと、今回新規リポジトリで開発する機能はJavaScriptのライブラリやフレームワークに何を使用するか決まっていなかったこと（使わない可能性もあった）から、少なくとも今まで通りSassのコンパイルができればOKという状況でした。
npm-scriptsならnpmのパッケージ更新でエラーになることはありません。package.jsonにタスクを登録して、使用時にコマンドを叩いてタスクを呼び出すだけで利用できるのでgulpのように別ファイルを用意する必要もなくコードはかなりシンプルになります。
というわけでnpm-scriptsで今までgulpで対応していたSassのコンパイルをやってみました。
npm-scriptsにタスクを登録・実行する
Node.jsとnpmがインストールされている前提で話を進めます。
まずは必要なパッケージをインストールしました。
| パッケージ | 概要 |
|---|---|
sass |
Dart Sassを利用できるようになる |
npm-run-all |
複数のスクリプトを実行する |
postcss |
コンパイルされたstyle.cssに追加で処理を行うためのもの |
postcss-cli |
postCSSをコマンドから利用できるようにする |
autoprefixer |
ベンダープレフィックスを自動で付与する |
postcss-combine-media-query |
同じブレイクポイントのメディアクエリを一つにまとめる |
postcss-scss |
PostCSSでSassを処理するためのもの |
そしてpackage.jsonに登録したタスクがこちら。
|
1 2 3 4 5 6 7 8 9 |
"scripts": { "mock:sass": "sass mock/sass/:mock/css --watch --no-source-map --style compressed", "mock:postcss": "postcss sass mock/css/*.css --use autoprefixer -d mock/css", "src:sass": "sass mock/sass/:src/main/resources/static/css --watch --source-map --style compressed", "src:postcss": "postcss sass src/main/resources/static/*.css --use autoprefixer -d src/main/resources/static/css", "build:mocksass": "npm run mock:sass && npm run mock:postcss", "build:srcsass": "npm run src:sass && npm run src:postcss", "build:allsass": "npm-run-all --parallel build:mocksass build:srcsass" } |
いろいろタスクが登録されていますが、一番最後に登録されているタスクをnpm run build:allsassで実行すれば登録した処理を一気にやってくれます。
それぞれのタスクについて説明します。
|
1 |
"mock:sass": "sass mock/sass/:mock/css --watch --no-source-map --style compressed" |
いちばん最初に登録したタスクで、モック内に作成したSassをmockフォルダ内のcssフォルダにコンパイルしています。コンパイル時にCSSの圧縮・ソースマップ不要・Sassの変更を監視するようにしています。
|
1 |
"mock:postcss": "postcss sass mock/css/*.css --use autoprefixer -d mock/css" |
その次に登録したタスクで、ベンダープレフィックスを付与しています。2024年現在、ベンダープレフィックスが必要なプロパティはかなり限られていますが入れておいて損はないでしょう。
|
1 2 |
"src:sass": "sass mock/sass/:src/main/resources/static/css --watch --source-map --style compressed", "src:postcss": "postcss sass src/main/resources/static/*.css --use autoprefixer -d src/main/resources/static/css" |
その次に登録したタスクで、本番環境にも同様にCSSがコンパイルされるようにしています。こちらはソースマップありでコンパイルしています。
|
1 2 3 |
"build:mocksass": "npm run mock:sass && npm run mock:postcss", "build:srcsass": "npm run src:sass && npm run src:postcss", "build:allsass": "npm-run-all --parallel build:mocksass build:srcsass" |
いままで登録したタスクをまとめて処理するのが最後の3つのタスクです。最終的に実行したいタスクはbuild:allsassに集約されています。
余談ですが、実行コードも単語登録しておけば一瞬でコンパイルできますね。
私は1日に何度も利用することがあるため、日本語入力でさっsと入力したらnpm run build:sassが変換候補に出るようにしています。
今回は載せていませんが、JavaScriptの圧縮やファイルコピーもできるため、バニラ Javascript（フレームワークや中間言語を使用しないことを意味します）で十分なプロダクトであればnpm-scriptsは気軽に使えて学習コストも少ないため良いのではと思います。
おわりに
今回はバージョンアップや最新技術への乗り換えではない方法を選択しました。もちろん今後さらに別の選択肢にシフトすることが求められるかもしれません。変化の激しいIT業界、最新技術をキャッチアップすることも、プロダクトにマッチする技術を選ぶことも大事なので、その時々で見極められるようになりたいですね。
