1.はじめに
2.タスクランナーって何？
3.Gulp-Webpack-rollup
4.最後に
はじめに
初めまして！私は社会人１年目の新米エンジニアです！
普段はweb制作会社に入りデザインに沿ってwebサイトを制作しているわけですが、会社で用意された環境で作業しているので、開発環境についてあまり理解していません笑
このままではいかんと思い個人開発を始めましたが、自分で開発環境が作れずに苦戦していたので、今回は備忘録がてらタスクランナーとは何か調べていこうと思います！
※参考記事 かなり古い記事ですが非常にわかりやすかったので多々流用させていただきました。
タスクランナーって何？
タスクランナー（Task Runner）は、プログラム開発において、自動化されたタスクの実行を管理するツールのことです。タスクランナーは、通常、ビルド、テスト、デプロイなどのタスクを自動的に実行することができます。
例えば、GulpやGruntといったタスクランナーは、JavaScriptやCSSファイルの圧縮、ファイルのコンパイル、画像の最適化、テストの実行などのタスクを自動化することができます。これらのタスクランナーを使用することで、開発者は手動でこれらのタスクを実行する必要がなくなり、作業の自動化によって開発プロセスを効率化することができます。
なるほど、普段ビルドしている時に画像の圧縮などを自動で行ってくれていたのか...
他にも調べてみると、さまざまなコンテンツがありました。
- EJSやpug、HAMLなどのテンプレートエンジン
- SASS, PostCSSなどのCSSプリプロセッサ
- BabelやTypescriptなどのJavascriptトランスパイラ
- ReactやVue、Angularなどのフレームワーク
- CommonJSやAMDなどのモジュールバンドラ
- eslintやstylelintなどの構文チェッカー
あれ？EJSやSASS、Reactもタスクランナーの一つなのか。
私が今回知りたいのはgulpやwebpackについてなので、少し範囲が広過ぎたかもしれません。
上記のサイトにてこのような文章を目にしました。
上記で紹介したライブラリやフレームワークのほとんど、またそれを扱うタスクランナー自体がNode.js で開発され、パッケージとして公開されています。
なるほど...なんとなく理解はしていましたが、タスクランナーを開発しているのが「Node.js」であり、そのパッケージをインストール・管理しているのが「npm、yarn、pnpm」なのか（今更知ったんかい笑）
gulp-webpack-rollup
ここからはよく名前を聞く４つのビルドツールについて調べていこうと思います。
それぞれ一長一短であり、記事を見ていると二種類以上併用している方もいらっしゃったので（私の会社はgulpとrollupを併用しています）、どれか一つに絞る必要はなさそうですね。
これらを使用して自分で開発環境を作成できるようになります！
Gulp
新進気鋭のタスクランナー達の中ではそこそこ歴史の古いものです。タスクの設定はgulpfile.jsに定義します。ひとつひとつのタスクを定義し、組み合わせて様々なことを行えます。自由度がかなり高くファイルの管理や認識のAPIも豊富です。ごく基本的・静的なWebページを作りたい時や、逆にEJSなどのテンプレートエンジンを使ってJSONからページを量産するなど、ちょっと特殊なことがしたいときにもおすすめです。反面、Javssriptのモジュール管理にはこれ単体だとかなり不便です。
長所
- タスクランナーとしての機能が豊富で、ファイルの圧縮、コードの最適化、ファイルの結合などのタスクを簡単に実行できます。
- 自由度がかなり高く、リファレンスやプラグインが豊富
- コードを書くだけでタスクを実行することができるため、開発プロセスを自動化することができます。
短所
- 複雑なビルドプロセスに対応しづらい
- 他のビルドツールに比べて機能が限定的(モジュールバンドルやTree shakingが使用できない)
感想
Gulpは基本的な機能が十分に備わっており、学習コストもあまり高くない印象を受けました。
その理屈で言うとnpm scriptも良いかなと思いましたが、あまり使用している人を見ないので、gulpを使用したいと思います。
Webpack
Browserifyに変わるモジュールバンドラ(兼タスクランナー)として近年とても人気が出ました。loaderと呼ばれるプラグインを組み合わせて様々な処理を行います。基本的な目的はJavascriptファイルの統合であり、CSSや画像すらもJavascriptとしてひとつのファイルにまとめることができます。SCSSや画像を普通にコンパイルしたり圧縮もできますが、そのような場合はgulpと組み合わせて使用したほうが良いです。ReactやAngularなどのモダンなJSフレームワークによる開発で使われることが多いです。設定が煩雑になりがちで、敷居が高めなのが欠点でしょうか。
長所
- モジュールバンドル機能が強力
- プラグインやローダーが豊富
- 多様な機能を備えている（Live ReloadやHMRなど）
短所
- 学習コストが高い
- コンフィグファイルの記述が複雑
- 開発時のビルド時間が長い
感想
高性能でできることが多いがその分学習コストが高いので、簡単なサイト制作やアプリケーションの開発では不要なのでは？と感じました。
しかし個人的に最もよく聞く名前ですし、最近Rustベースで作られたTurbopackが注目さてれいることもあり、学習も兼ねて使用したいと思いました。
rollup
ビルドはwebpackより若干遅めですが、Minifyした生成ファイルが非常に小さくなるのが特徴です。そのため、ライブラリなどを開発する際に使用されることが多いです。設定ファイルはwebpackに似ています。他のモジュールバンドラ同様、タスクランナーとしては貧弱なので単体で使うのは不便かもしれません。
長所
- モジュールバンドル機能が高速（必要なコードのみをバンドルするため）
- Tree-shaking機能が強力
- ES6モジュールに対応
短所
- プラグインやローダーが少ない
- 柔軟性に欠ける
- コミュニティが小さい
感想
gulpやwebpackほどの利用者ではないものの、minifyした生成ファイルが非常に小さくなるなどの利点があることから、他のビルドツールと併用されることが多い印象を受けました。
機能自体がそこまで豊富なわけではないですし、ライブラリを開発する予定もないので正直使用したいという気は起きませんでした。
最後に
今回はタスクランナーについて...というかビルドツールの話になってしまいましたが、理解が曖昧だったものを調べることができました。
人生初めての投稿だったので読みづらい記事となりましたが、ここまで読んでくださりありがとうございます。
私の現段階での結論としては、「Gulp+Webpack」の併用で環境を作りたいと思います！
今後実際に環境構築してみて適宜変えていくと思いますが、最も利用されているものを学習したかったのでこの結論に至りました。
使用してみた感想もバシバシ投稿していきたいと思うので、よろしければご覧ください！