こんにちは。
本日はコーディングをする際に色々自動でしてくれる、gulpというタスクランナーについて紹介します。
タスクランナーというのはタスクを走らせる機能で、sassのコンパイル、画像の圧縮、ライブプレビュー、jsの圧縮、cssの圧縮、htmlをphpのように使えるEJSなどのコンパイルをすること等が出来、とても便利なツールです。
本日は、gulpのイメージやおすすめの機能など紹介したいと思います。
gulpとは
gulpとはNode.jsという物を使って動かすタスクランナーツールです。
必要なものは、Node.jsというシステムを動かすjavascriptのツール、npmというパッケージツール、などを使って動かすことが出来ます。
個人的におすすめの機能としては、
- 画像圧縮
- EJS
- ライブプレビュー
- sassのコンパイル
- ベンダープレフィックス
あたりが良く使う機能となります。
特にライブプレビューとsassのコンパイルとベンダープレフィックスは、優先度が高い機能となります！
こちらだけでも、gulpを使うメリットはあると思います。
ただvscodeの拡張機能でも、似たような機能があるので、簡単な制作などの場合はそちらで代用したりしています。
導入方法
導入方法はコチラのサイトがとても分かりやすいので私はこちらを参考に致しました。
絶対つまずかないGulp 4入門(2021年版)インストールとSassを使うまでの手順
https://ics.media/entry/3290/
こちら記載通りすれば、gulpを動かすことが出来ます。
流れとしては
- Node.jsをインストール
- npmの初期化
- Gulpのインストール
- 拡張機能のダウンロード（npmのサイト）
- gulpfile.jsの作成
になります。
一度作成してしまえば使いまわすことが可能
一度gulpの設定をしてしまえば他のプロジェクトで使いまわすことが可能です。
最初は導入に時間がかかりますが（特にバージョンを合わせたり、拡張機能のダウンロードコマンドが古いと正常に動かなくなります。）、そのあとの作業はだいぶ楽になります。
また、共同作業の時も、同じgulpファイルを使えば作業が楽になります。
まとめ
一番最初の導入は時間が掛かりますが、一度使ってしまえば使いまわせるし、設定後はずっと自動で動いてくれるよう設定できるので、結果的に工数が減ります。
是非試してみてください！
コメントを残す