Web制作に使える!Gulpのおすすめプラグイン6+3選

優れたプラグインが多いGulpですが、似たような機能を持つプラグインが複数あったりもして、最初はどのプラグインがいいかわからないのではないでしょうか。

このページでは、私が実際に使用した中で、個人的に使用頻度が高く、かつ導入が容易だった、おすすめのプラグインを9つご紹介します。

Gulpでまず入れたいおすすめプラグイン

まずは、使い始めたら手放せない、とりあえず入れて試してほしいプラグインをご紹介します。
インストールのコマンドとプラグインのページへのリンクもあわせて載せておきます。

「gulp-imagemin」:画像圧縮

PNG、JPEG、GIF、SVG画像を圧縮します。

npm install --save-dev gulp-imagemin

https://www.npmjs.com/package/gulp-imagemin

「gulp-uglify」:JavaScript圧縮

JavaScriptを圧縮します。

npm install --save-dev gulp-uglify

https://www.npmjs.com/package/gulp-uglify

「gulp-sass」:Sass

Sassコンパイルを可能にするGulpプラグインです。圧縮の強度も指定可能。

npm install --save-dev gulp-sass

https://www.npmjs.com/package/gulp-sass

「gulp-autoprefixer」:CSSベンダープレフィックスを追加

ベンダープレフィックスを自動で追加することができます。ブラウザの対応範囲も指定可能。gulp-sassとあわせて使うといい感じ。

npm install --save-dev gulp-autoprefixer

https://www.npmjs.com/package/gulp-autoprefixer

「gulp-ejs」:EJS

テンプレートエンジン「EJS」を使用可能にします。静的サイトの制作に便利。

npm install --save-dev gulp-ejs

https://www.npmjs.com/package/gulp-ejs

「vinyl-ftp」:FTP

FTPでのファイル転送を可能にします。

npm install --save-dev vinyl-ftp

https://www.npmjs.com/package/vinyl-ftp

タスク作成時にあると便利なプラグイン

以下のプラグインを使用することで、タスクをより効率的に実行できます。

「gulp-changed」:ファイル差分の取得

ファイルの差分を抽出し、タスクの実行対象等として指定することができるようになります。

npm install --save-dev gulp-changed

https://www.npmjs.com/package/gulp-changed

「gulp-cached」:変更のあったファイルを取得

変更のあったファイルだけを抽出し、タスクの実行対象等として指定することができるようになります。

npm install --save-dev gulp-cached

https://www.npmjs.com/package/gulp-cached

「gulp-plumber」:エラー発生時に監視継続

watchタスクがエラー発生時に自動停止してしまうことを防ぎ、監視を継続するようにできます。

npm install --save-dev gulp-plumber

https://www.npmjs.com/package/gulp-plumber