ありがとうさようならGulp【Webデザイナー/コーダー向けの2021年版 Gulp設定】

HTML / CSS
この記事は約6分で読めます。

どうも上かるびです。

現在タスクランナーとしてgulpを使用しているのですが、jsを書く機会が増えてきたのでjsのバンドル・構文チェックだけwebpackに任せて、別々で動かしている感じです。

上かるび
上かるび

今までは「画像もバンドルする必要あるのか?」とか「gulpで事足りるなら今のままでいいかな」とか考えてました。

が、webpackの知識をインプットをしているうちに
「監視・リロードもできるんかい」とか
「ESLintとかPrettier併用するならwebpack一択やん」とか
「gulp+webpackの合わせ技だと今後面倒になるかも」とか
思い始めました。

そこで他の方はどんな感じでやっているのか、Twitterでアンケートを取ってみました。

スポンサードサーチ

Twitterでのタスクランナー世論調査


Webデザイナーさんを含めた、フロントをコーディングしている方を対象にタスクランナーのアンケートを取ったところ、下記のような結果でした。

 

gulpのみか、webpackのみが圧倒的。

また何人かの方とリプをやり取りする中で、gulp+webpackのメリットがあまり感じられず、webpack一本またはgulp一本が進めやすそうという印象を受けました。

世界レベルでのビルドツールのランキング

State of JS 2020記載されている「ビルドツール」におけるランキングがこちら。

利用度(シェア率)ランキング

予想通りgulpよりwebpackの方が利用度が高いようです。

引用:https://2020.stateofjs.com/ja-JP/technologies/build-tools/

満足度ランキング

webpackが88%なのに対し、gulpは35%まで落ちてしまいました。。。

引用:https://2020.stateofjs.com/ja-JP/technologies/build-tools/

snowpackやesbuildなどビルドツールもありましたが、歴史や汎用性を考えるとwebpackが良さそうです。

 

また「満足度・ユーザー数」での比較結果がこちら。

結論「webpack一本に乗り換えます」

Twitterでのご意見や世界的な動向を踏まえ、わたくし上かるびはwebpack一本に乗り換えることにしました!

上かるび
上かるび

4月からはVue.jsも使うしね。

スポンサードサーチ

これからgulpを使う人のためのgulp.js(2021年版)

シェア率や満足度はwebpackの方が人気ですが、Sassを使うくらいであればgulpで十分ですし、何よりgulpの方が(体感として)簡単に導入できると思いますので、一応私のgulpも記事として遺しておきます。

誰かがgulpを構築するときにヒントの1つになればいいなと思います。

gulp.jsの中身、インストール用のコマンドも載せてますので、簡単に同じ環境を作れます。

はじめてgulpを導入する方や構築の仕方を知りたい方は、下記の記事を参考にするとよいです。

gulpでやっていたこと

前提として、私の場合は主に下記のことをgulpでやっていました。

  • HTMLファイルの圧縮(コメント削除など)
  • Sassのコンパイル(DartSass)
    • CSSへ変換
    • ベンダープレフィクス付与
    • メディアクエリをまとめる
    • CSSのプロパティ順を並び替える(最近ベンダープレフィックスの記述順で不具合を見つけたのでやめました)
  • JavaScriptの変換(Babel)
  • 画像の圧縮
  • ローカルサーバー起動
  • 変更があったら自動リロード
上かるび
上かるび

Sassは近い将来、LibSass(現行)→DartSassへ移行されますが、本記事はDartSassに対応済みです。

gulp.js

browserslistはpackage.jsonへ

時々gulp.jsに書いてある記事を見かけますが、非推奨なのでpackage.jsonに書きましょう。

(例)

必要なパッケージをインストールする

下記コマンドをターミナルなどで叩けば必要なものをインストールできます。(バージョンはすべて2021年3月時点の最新版で検証したところ、エラーは出ておりません。)

ネコーダー
ネコーダー

browserslistや@babe/coreはgulp.jsに記述はないけど、gulpを動かす上では必要になってくるパッケージなので必ずインストールしましょう。

ググって出てくるgulpの記事では非推奨の書き方やパッケージを使っている場合があります。(本記事のパッケージは2021年3月現在、非推奨のものは使っていませんのでご安心ください。)

 

【例】
・gulp.task~の書き方は非推奨。
・メディアクエリをまとめる「css-mqpacker」は非推奨。
↓非推奨のものは、npm公式サイトでこのような表示がされます。

ネコーダー
ネコーダー

インストールする前にnpm公式サイトで確認するようにしよう!

上かるび
上かるび

非推奨でも普通に動くのもあるよね。

ネコーダー
ネコーダー

せやな。そこは自己責任で。

ディレクトリ構造

まだwebpackへ乗り換え途中ですが、完全に乗り換えることができたらまたご紹介しようかなと思います。

ご質問などありましたらコメントやTwitterでお問い合わせください。

コメント

タイトルとURLをコピーしました