はじめに
今回はgulpのおすすめプラグインについてまとましたので紹介していきます。
最近gulpを導入したけどどういうプラグインを導入すればいいか分からない、といった方に見ていただけるとうれしいです。
web制作をしている方はgulpを使えるようになるとできる幅が広がるのでぜひ参考にしてください。
gulpの使い方まとめについてはこちら。
gulpfile.jsのテンプレート紹介についてはこちら。
それではおすすめのプラグインを紹介していきます。
sassをコンパイルする
sassをコンパイルするプラグインです。
sassをコンパイルする途中でglob機能を使ったり、ベンダープレフィックスを自動付与することでより便利に使用できる方法を紹介しています。
以下のプラグインを使用しています。
gulp-sass
sassのコンパイルをしてくれるプラグインです。
gulp-sass-glob
glob機能を使って@import文を省略することができるプラグインです。
gulp-autoprefixer
ベンダープレフィックスを自動付与するプラグインです。
gulp-plumber
watch中にエラーが発生してもwatchが止まらないようにするプラグインです。
Dart Sassでsassをコンパイルする
Dart Sassでsassをコンパイルするプラグインです。
最新のsassの書き方に合わせたい場合はDart Sassでコンパイルするようにしてください。
以下のプラグインを使用しています。
sass
Dart Sassを使えるようにするプラグインです。
gulp-sass
先ほども紹介しました。
sassのコンパイルをしてくれるプラグインです。
gulp-sass-glob-use-forward
glob機能を使って@useや@forwardを省略するプラグインです。
gulp-autoprefixer
先ほども紹介しました。
ベンダープレフィックスを自動付与するプラグインです。
gulp-plumber
先ほども紹介しました。
watch中にエラーが発生してもwatchが止まらないようにするプラグインです。
画像をリサイズする
画像をリサイズするプラグインです。
画像の縦と横の幅を自由に変更することができます。
以下のプラグインを使用しています。
gulp-image-resize
画像のリサイズするだけでなく、リサイズ後画像をトリミングしたり拡大したいするなどの細かい設定をすることができます。
画像を圧縮する
画像のファイルサイズを圧縮することができるプラグインです。
.jpg や.png 、.svg などなど様々な拡張子に対して圧縮することができます。
以下のプラグインを使用しています。
gulp-imagemin
画像を圧縮するためのプラグインです。
imagemin-mozjpeg
gulp-imageminのプラグインになります。
.jpegファイル を圧縮することができるようになります。
imagemin-pngquant
こちらもgulp-imageminのプラグインです。
.pngファイル を高い圧縮率で圧縮してくれるプラグインになります。
gulp-changed
出力先ファイルを監視して、実行済みなら同じファイルに対してgulpを実行させないようにするプラグインです。
ここでは画像の再圧縮を無くして画像圧縮全体の処理時間を減らしてくれます。
cssファイルを圧縮する
cssファイルを圧縮することができるプラグインです。
cssを圧縮することでcssファイルの読み込み時間を軽減してサイトの表示スピードを向上してくれます。
以下のプラグインを使用しています。
gulp-purgecss
htmlやJavaScriptで使用されているクラスを見て、cssファイルの未使用スタイルを削除するプラグインです。
gulp-clean-css
ファイル内の不要な空白や改行、コメントなどを削除するプラグインです。
gulp-plumber
先ほども紹介しました。
watch中にエラーが発生してもwatchが止まらないようにするプラグインです。
JavaScriptを圧縮する
JavaScriptファイルを圧縮することができるプラグインです。
サイトの表示スピードを向上したり、ソースコードの難読化をすることができます。
以下のプラグインを使用しています。
gulp-uglify
JavaScriptを圧縮するプラグインです。
空白や改行を削除してファイルの圧縮をしてくれます。
また変数名や関数名を短くしてソースコードの難読化もしてくれます。
gulp-plumber
先ほども紹介しました。
watch中にエラーが発生してもwatchが止まらないようにするプラグインです。
ブラウザを自動リロードする
browser-syncはgulpのプラグインではないのですが、gulpで使用するため紹介します。
htmlやcssでコーディング後自動でブラウザを更新してくれます。
以下のプラグインを使用しています。
browser-sync
browser-syncというプラグインを使用するだけで自動リロードをすることができます。
WordPressのローカル環境でブラウザをリロードする
こちらもbrowser-syncの紹介になります。
先ほど違うのはhtml/cssではなく、Local by FlywheelのWordPress環境でブラウザを自動リロードするやり方の紹介です。
以下のプラグインを使用しています。
browser-sync
先ほど紹介した場合とbrowser-syncのオプション設定を変更しています。
cssのminify・autoprefix・mqpackをまとめて実行する
cssの圧縮やベンダープレフィックスの付与、メディアクエリをまとめるといった処理を1つのプラグインのみで実現できるやり方について紹介しています。
少ないプラグインで同様の処理ができるようになります。
以下のプラグインを使用しています。
gulp-pleeease
cssの圧縮やベンダープレフィックスの付与、メディアクエリをまとめるといった複数の処理ができるプラグインです。
gulp-plumber
先ほども紹介しました。
watch中にエラーが発生してもwatchが止まらないようにするプラグインです。
モジュール読み込みを省略する
gulpのプラグインをたくさん導入するようになってくるとモジュール読み込みの宣言が大量になってコードの見通しが悪くなってきます。
そのような場合にgulp-load-pluginsを使用するとモジュール読み込み部分を省略出来てコードがスッキリします。
以下のプラグインを使用しています。
gulp-load-plugins
モジュール読み込みを省略することができるプラグインです。
gulpのプラグインが大量になってきてコードの見通しが悪くなってきた方は使用してみてください。
おわりに
以上gulpのおすすめプラグインについてまとめてみました。
いかがだったでしょうか。
gulpを扱えるようになるとweb制作でのできる幅が広がるのでぜひ導入を検討してみてください。
コメント