ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

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

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

「Gulpでどんなプラグインを使えばいいかわからない」
「そもそもGulpを使うとどんなことができるのかわからない」

こんな人に向けた記事です。

  • Gulpでよく使うプラグイン
  • Gulpプラグインでどんなことができるのか

この記事ではこんなことがわかります。

目次
  1. Gulpとは
  2. Gulpおすすめプラグイン (CSS系)
    1. gulp-postcss
    2. gulp-sass
    3. autoprefixer
    4. gulp-sourcemaps
    5. css-declaration-sorter
    6. css-mqpacker
    7. cssnano
    8. gulp-sass-glob
    9. postcss-uncss
  3. Gulpおすすめプラグイン (JavaScript系)
    1. gulp-concat
    2. gulp-eslint
    3. gulp-uglify
  4. Gulpおすすめプラグイン (画像系)
    1. gulp-imagemin
    2. imagemin-mozjpeg
    3. imagemin-pngquant
    4. gulp-webp
  5. Gulpおすすめプラグイン (その他)
    1. gulp-changed
    2. gulp-plumber
    3. gulp-notify
    4. browser-sync
    5. gulp-rename
    6. gulp-replace
    7. gulp-frontnote
    8. gulp-connect-php
  6. まとめ

Gulpとは

Gulpは「タスクランナー」と呼ばれ、Web制作で必要な単純作業等を自動化してくれるツールです。

メリット
構文チェックやファイル縮小等、Webツール等を使わないと難しい作業を、コーディングをしながらリアルタイムでできる
チームで導入すれば品質の向上、統一ができる
デメリット
ある程度、JavaScriptの知識がないと導入が難しい
導入をなんとかできても、エラーやプラグインを追加することができず運用していけない
Gulp導入の解説記事

Gulpの導入はICS Mediaの記事がわかりやすかったです。

絶対つまずかないGulp 4入門(2019年版) - インストールとSassを使うまでの手順

ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。 導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう、ビデオでも解説します。

Gulpおすすめプラグイン (CSS系)

gulp-postcss

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

PostCSSプラグインをさがせるサイト
PostCSS.parts

gulp-sass

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

npm
gulp-sass

autoprefixer

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

gulp-sourcemaps

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

css-declaration-sorter

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

css-mqpacker

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

cssnano

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

npm
cssnano

gulp-sass-glob

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

postcss-uncss

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

Gulpおすすめプラグイン (JavaScript系)

gulp-concat

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

gulp-eslint

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

gulp-uglify

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

Gulpおすすめプラグイン (画像系)

gulp-imagemin

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

imagemin-mozjpeg

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

imagemin-pngquant

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

gulp-webp

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

npm
gulp-webp

Gulpおすすめプラグイン (その他)

gulp-changed

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

gulp-plumber

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

gulp-notify

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

browser-sync

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

gulp-rename

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

gulp-replace

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

gulp-frontnote

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

gulp-connect-php

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

まとめ

Gulpで使っているプラグインを紹介しました。
数が多いですが、使い始めてしまえば、いくつ使っているとか気にすることはなく、「効率化できるプラグインないかな」と、探して追加していくだけなのでどんどん増えていきます。