Web制作を効率化！よく使うおすすめgulpプラグイン 24選

「gulp-postcss」は､いろいろなプラグインを用いてCSSを変換するポストプロセッサーです｡
「gulp-postcss」単体で何かをするというわけではなく､CSS系のいろいろなプラグインを統合するためのプラグインという感じです｡

GulpでSassを使うためのプラグインです｡
元々､Sassを使うためにGulpを導入する人が多いと思います｡
Sassは簡単にいうと「プログラムが使えるCSS」という感じです｡
「Scss」とも呼ばれます｡
本当は少し書き方が違うものですが､だいたいどちらでも通じると思います｡

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

古いブラウザに対応するためにつける「ベンダープレフィックス」を自動でつけてくれるプラグインです｡
どのプロパティがどのブラウザまでを対応しているかをすべて覚えることは現実的に不可能です｡
ブラウザ対応が必要なバージョンを指定して「ベンダープレフィックス」をつけてくれます｡

Sassのコンパイル前の行数がわかるようにするプラグインです｡
このプラグインを使うことでデベロッパーツールでSassのエラーの場所の特定が速くでき､効率よくコーディングができます｡

CSSのプロパティを指定した並び順に並び替えてくれるプラグインです｡
クライアントからプロパティの並び順に指定がある場合､自分のやり方は変えずに自動で指示とおりにできるので便利です｡

media queryごとにまとめてくれるプラグインです｡
レスポンシブで普通にCSSを書いていくと､PCのとき､スマホのときと､量が多くなればなるほど移動が大きくなって大変です｡
タグごとにmedia queryを書いていっても､media queryを統合してCSSファイルをコンパイルしてくれます｡
現在は､廃止されているようです｡
別のプラグインに変更になったのか､今後､確認が必要ですね｡

CSSファイルの改行や余分な空白を削除してくれるプラグインです｡
一般的に「●●.min.css」というファイル名にすることが多いです｡

分割されたSassファイルをすべてインポートを書く必要がなく自動で統合してくれるプラグインです｡
ページごとや､機能ごとに分けたSassファイルを統合してくれるので､便利さだけでなく､読み込みの高速化にもつながります｡

使用していないCSSを自動的に削除してくれるプラグインです｡
ローカル環境でXAMPPを使ってWordPress開発をしている場合は､うまく使えないようです｡

ファイルを統合してくれるプラグインです｡
JavaScriptで使っていますが､他のファイルの統合にも使えます｡

JavaScriptの構文チェックをしてくれるプラグインです｡
書き方の間違いにすぐ気がつくことができるので､「なんで動かないんだろう？」と悩むことが少なくなり作業効率が上がります｡

JavaScriptファイルの改行や余分な空白を削除してくれるプラグインです｡
一般的に「●●.min.js」というファイル名にすることが多いです｡

画像を指定したフォルダに入れるだけで圧縮してくれるプラグインです｡
Webツール等を使う必要がなくなるのでとても便利です｡

「gulp-imagemin」のプラグインとしてjpg､jpegファイルを圧縮してくれます｡

「gulp-imagemin」のプラグインとしてpngファイルを圧縮してくれます｡

画像を指定したフォルダに入れるだけでwebpファイルを生成してくれるプラグインです｡
これもWebツールを使う必要がないので便利です｡

変更を監視するファイルを指定して､変更したファイルだけを処理させるプラグインです｡

エラーが発生したときに､タスクが終了してしまわないようにするプラグインです｡

エラーが発生したときに､エラーをデスクトップ通知するプラグインです｡

ファイルを変更を監視して､自動でブラウザリロードをしてくれるプラグインです｡
これだけでも作業効率がかなり改善します｡

大画面4Kモニターを使えば､複数ブラウザを同時に開いておけるので､さらに作業効率が上がります｡

42.5インチ4Kモニター「43UN700-B」については､こちらの記事で解説しています｡

LG 43UN700-Bのレビュー【42.5インチ 4Kモニター BAJP同等】

LGの42.5インチ4Kモニター『43UN700-B』の購入を検討していますか？この記事では43UN700-Bのレビュー、感想、実際に使ってみてのメリット、デメリットやおすすめする人、おすすめしない人について紹介しています。ぜひご覧ください。

ファイル名を変更するプラグインです｡
「●●.min.css」「●●.min.js」という名前に追加､変更するときに使います｡

ファイル内のテキストを置換するプラグインです｡
事前に指定しておけばエディタの機能を使わずにテキスト置換ができます｡

特別な指定をすることで､スタイルガイドをつくってくれるプラグインです｡
絶対必要なプラグインではありませんが､複数人でコーディングをするときや､大規模なサイトを制作するときはスタイルガイドをつくっておいたほうがいいと思います｡

ローカル環境でWordPressを使わない案件のときは､GulpをPHPに接続してを動かすことができます｡