みなさん、Gulpってますか？
僕は毎日Gulpってます！
Gulpって色々な作業を自動化できるので本当に便利ですよね！
今回は、僕が実際に使っているGulpのおすすめパッケージを紹介します。
コーディングで頻繁に発生する作業を自動化しているので、少しはお役に立つかなぁと思います。
最後まで読んでいただけると嬉しいです！
ちなみに、Gulpの導入方法や使い方が分からない方は以下の記事を読んでみてください。
それでは、Gulpのおすすめパッケージをひとつずつ紹介していきます。
目次
BrowserSync – ブラウザのオートリロード
初めに紹介するのは「BrowserSync」というパッケージです。
BrowserSyncを使うと、ファイル更新時にブラウザを自動でリロードすることが出来ます。
と言っても伝わりにくいと思うので、もう少し具体的に説明しますね。
通常、コーディングの流れは以下の様になります。
- エディタでHTMLやCSSを編集して保存
- ブラウザをリロード
- 編集した内容を確認
これが、BrowserSyncを使うと以下の様になります。
- エディタでHTMLやCSSを編集して保存
- ブラウザが自動でリロード
- 編集した内容を確認
HTMLファイルやCSSファイルを保存すると、BrowserSyncがブラウザを自動でリロードしてくれるので、自分でブラウザをリロードする必要がなくなります。
些細なことですが、使ってみるとすごく便利で作業効率も上がります！
あと、ブラウザのウインドウにいちいち移動しなくて良いのも楽ですね。
また、BrowserSyncを使うと複数の端末でスクロールやページ遷移を同期することが出来ます。
PCとスマートフォンで同じページを開いておき、PCでページをスクロールするとスマートフォンで開いているページもスクロールします。
初めて見た時は「魔法みたい！」と思いました。
複数の端末の表示を確認する際は、かなり便利な機能です！
BrowserSyncの使い方
BrowserSyncの使い方を簡単に説明しておきます。
まずは以下のコマンドでBrowserSyncをインストールします。
※Gulpはすでにインストール済みの想定です。
$ npm install --save-dev browser-syncgulpfile.jsの内容は以下の通りです。
const gulp = require("gulp");
const browserSync = require("browser-sync");
function server(done) {
browserSync.init({
server: {
baseDir: "./",
index: "index.html",
},
});
done();
}
function reloadBrowser(done) {
browserSync.reload();
done();
}
function watchFiles() {
gulp.watch("./**/*.html", reloadBrowser);
gulp.watch("./**/*.css", reloadBrowser);
}
exports.default = gulp.series(server, watchFiles);gulp.watchで変更を監視するファイルを指定しているので、ご自身の環境に合わせてパスを変更してください。
実行コマンドは以下の通りです。
$ npx gulpコマンドを実行するとブラウザが立ち上がってindex.htmlの内容が表示されます。
HTMLファイルやCSSファイルを編集して保存すると、ブラウザが自動的にリロードして、編集した内容が反映されます。
BrowserSyncはローカルで構築しているWordPressでも利用できます。
WordPressで利用する場合は、テーマディレクトリにGulpとBrowserSyncをインストールします。
gulpfile.jsの内容は以下の様になります。
const gulp = require("gulp");
const browserSync = require("browser-sync");
function server(done) {
browserSync.init({
proxy: "ryob.net", // ローカルのWordPressのドメインを指定
});
done();
}
function reloadBrowser(done) {
browserSync.reload();
done();
}
function watchFiles() {
gulp.watch("./**/*.php", reloadBrowser);
gulp.watch("./**/*.css", reloadBrowser);
}
exports.default = gulp.series(server, watchFiles);browserSync.initのproxyでローカルのWordPressのドメインを指定します。
監視するファイルをHTMLからPHPに変更しました。
ちなみに、ローカルでWordPressを構築する場合は「Local」というアプリが便利です！
以下の記事で紹介しているので、興味がある方は読んでみてください。
gulp-sass – Sassファイルのコンパイル
「gulp-sass」はSassファイルをコンパイルしてCSSファイルを出力するパッケージです。
Sassファイルを監視して、変更があれば自動的にコンパイルしてCSSを出力することも出来ます。
gulp-sassの使い方
実際にgulp-sassでSassファイルのコンパイルを自動化する方法を解説します。
まずはgulp-sassをインストールしてください。
$ npm install --save-dev gulp-sassgulpfile.jsの内容は以下の様な感じです。
const gulp = require("gulp");
const sass = require("gulp-sass");
function compileSass() {
return gulp
.src("./style.scss", { sourcemaps: true })
.pipe(
sass({
outputStyle: "expanded",
})
)
.on("error", sass.logError)
.pipe(gulp.dest("./", { sourcemaps: "./" }));
}
function watchFiles() {
gulp.watch("./style.scss", compileSass);
}
exports.default = watchFiles;以下のコマンドでタスクを実行します。
$ npx gulpstyle.scssの監視が始まり、style.scssを編集して保存すると自動的にstyle.cssが出力されます。
また、style.cssと同じディレクトリにソースマップを作成するようにしています。
かなり頻繁に発生する作業なので、自動化するメリットは大きいですね！
gulp-postcss – ベンダープレフィックス追加など
「gulp-postcss」は色々なことが出来ますが、僕は主に以下の2つの作業で利用しています。
- CSSにベンダープレフィックスを追加する
- Sassで書いたメディアクエリをまとめる
今回はCSSにベンダープレフィックスを追加する方法を解説します。
Sassで書いたメディアクエリをまとめる方法は、少し長くなりそうなので別の記事で紹介したいと思います。
gulp-postcssの使い方
CSSにベンダープレフィックスを追加するためには「gulp-postcss」と「autoprefixer」というパッケージをインストールします。
$ npm install --save-dev gulp-postcss autoprefixergulpfile.jsは以下の様になります。
const gulp = require("gulp");
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
function vendorPrefix() {
return gulp
.src("./src/*.css")
.pipe(postcss([autoprefixer()]))
.pipe(gulp.dest("./dest"));
}
exports.default = vendorPrefix;srcフォルダにベンダープレフィックス追加前のCSSファイルを入れ、タスクを実行するとdestフォルダにベンダープレフィックスを追加したCSSファイルが出力されます。
タスクの実行コマンドは以下の通りです。
$ npx gulp先ほど紹介したgulp-sassと組み合わせると、Sassファイルのコンパイル時にベンダープレフィックスを追加できるようになります。
const gulp = require("gulp");
const sass = require("gulp-sass");
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
function compileSass() {
return gulp
.src("./style.scss", { sourcemaps: true })
.pipe(
sass({
outputStyle: "expanded",
})
)
.on("error", sass.logError)
.pipe(postcss([autoprefixer()]))
.pipe(gulp.dest("./", { sourcemaps: "./" }));
}
function watchFiles() {
gulp.watch("./style.scss", compileSass);
}
exports.default = watchFiles;Sassファイルを保存すると、自動的にベンダープレフィックスを追加したCSSファイルを出力できます。
gulp-rename – ファイル名を操作する
「gulp-rename」はタスク実行時にファイル名を操作することが出来ます。
例えば、style.cssをGulpで圧縮してstyle.min.cssとして出力できます。
使い方は次に紹介する「gulp-clean-css」と一緒に解説したいと思います。
gulp-clean-css – CSSを圧縮する
「gulp-clean-css」はCSSファイル内のコメントや改行を削除し、ファイル容量を減らすことが出来ます。
gulp-clean-cssの使い方
先ほど紹介した「gulp-rename」と組み合わせて、style.cssを圧縮してstyle.min.cssとして出力します。
まずは、gulp-clean-cssとgulp-renameをインストールしましょう。
$ npm install --save-dev gulp-clean-css gulp-renamegulpfile.jsの内容は以下の通りです。
const gulp = require("gulp");
const cleanCSS = require("gulp-clean-css");
const rename = require("gulp-rename");
function minifyCss() {
return gulp
.src("./style.css")
.pipe(cleanCSS())
.pipe(rename({ suffix: ".min" }))
.pipe(gulp.dest("./"));
}
exports.default = minifyCss;以下のコマンドでCSSファイルの圧縮を実行します。
$ npx gulpstyle.cssが圧縮され、style.min.cssとして出力されます。
gulp-uglify – JavaScriptを圧縮する
「gulp-uglify」はJavaScript版の「gulp-clean-css」といった感じです。
JavaScriptを圧縮してファイル容量を減らすことが出来ます。
使い方もgulp-clean-cssとほぼ同じ感じです。
gulp-uglifyの使い方
jsフォルダ内のscript.jsを圧縮してscript.min.jsを出力しようと思います。
圧縮後のファイル名にminを追加するためにgulp-renameを使います。
まずは、gulp-uglifyとgulp-renameをインストールします。
$ npm install --save-dev gulp-uglify gulp-renamegulpfile.jsは以下の様になります。
const gulp = require("gulp");
const uglify = require("gulp-uglify");
const rename = require("gulp-rename");
function minifyJs() {
return gulp
.src("./js/script.js")
.pipe(uglify())
.pipe(rename({ suffix: ".min" }))
.pipe(gulp.dest("./js"));
}
exports.default = minifyJs;以下のコマンドでタスクを実行します。
$ npx gulpjsフォルダ内のscript.jsが圧縮されて、script.min.jsとして出力されます。
gulp-changed – 変更したファイルのみにタスク実行
gulp-changedを使うと、監視しているファイルの中で変更されたファイルのみにタスクを実行できます。
例えば、imgフォルダ内のJPEGを監視しているとします。
imgフォルダ内には10枚のJPEGがあり、その内の1枚を編集しました。
すると10枚のJPEGに対してタスクが実行されます。
本来であれば、編集した1枚のJPEGに対してタスクを実行すれば事足ります。
しかし、Gulpの標準機能では監視対象全てに対してタスクが実行されてしまうのです。
この問題を解決してくれるのがgulp-changedという訳です。
gulp-changedの使い方は、次に紹介するgulp-imageminと一緒に解説します。
gulp-imageminとimagemin-pngquant – 画像を圧縮
gulp-imageminは画像を圧縮してファイル容量を減らしてくれるパッケージです。
JPEG、PNG、GIF、SVGなど色々な形式の画像を圧縮できます。
ただし、PNGに関してはimagemin-pngquantというパッケージを使った方が圧縮率が高いので、gulp-imageminとimagemin-pngquantの併用がオススメです！
gulp-imageminとimagemin-pngquantの使い方
srcフォルダ内の画像を圧縮してdestフォルダに出力するタスクを作成しようと思います。
編集した画像だけにタスクを実行したいので、先ほど紹介したgulp-changedも併用します。
まずはパッケージのインストールから。
$ npm install --save-dev gulp-imagemin imagemin-pngquant gulp-changedgulpfile.jsは以下の通りです。
const gulp = require("gulp");
const imagemin = require("gulp-imagemin");
const pngquant = require("imagemin-pngquant");
const changed = require("gulp-changed");
function minifyImage() {
return gulp
.src("./src/*.{png,jpg,jpeg,gif,svg}")
.pipe(changed("./dest"))
.pipe(
imagemin([
imagemin.mozjpeg({ quality: 80 }),
imagemin.svgo({
plugins: [{ removeViewBox: true }, { cleanupIDs: false }],
}),
imagemin.gifsicle({
interlaced: true,
}),
pngquant({
quality: [0.65, 0.8],
speed: 1,
}),
])
)
.pipe(gulp.dest("./dest"));
}
exports.default = minifyImage;
タスク実行は以下のコマンドです。
$ npx gulpsrcフォルダ内の画像が圧縮されてdestフォルダに出力されます。
srcフォルダとdestフォルダの画像を比べると、destフォルダの画像の方がファイル容量が小さくなっているはずです。
gulp-imageminについては以下の記事でも解説しているので、もしよければ読んでみてください。
gulp-webp – 画像をwebP形式に変換
gulp-webpはJPEGやPNGをwebPに変換するためのパッケージです。
大量の画像を一括でwebPに変更できるのでとても便利です。
WebサイトでwebPを利用する際は必ず使っています。
webPについては過去の記事で紹介しているので、興味がある方は読んでみてください。
gulp-webpの使い方
imgフォルダ内の画像をwebPに変換するタスクを作成します。
webPの出力先は元画像と同じimgフォルダにします。
gulp-renameを使って、出力するファイル名を「img.jpg.webp」の様にしようと思います。
ファイル名に変換前の拡張子を含めることによって、imgフォルダ内にimg.jpgとimg.pngが存在する場合に競合を防ぐことが出来ます。
まずは必要なパッケージをインストールしましょう。
$ npm install --save-dev gulp-webp gulp-renamegulpfile.jsの内容は以下の通りです。
const gulp = require("gulp");
const webp = require("gulp-webp");
const rename = require("gulp-rename");
function conversionWebp() {
return gulp
.src("./img/*.{png,jpg,jpeg}")
.pipe(
rename(function (path) {
path.basename += path.extname;
})
)
.pipe(webp())
.pipe(gulp.dest("./img"));
}
exports.default = conversionWebp;タスクを実行します。
$ npx gulpimgフォルダ内の画像がwebPに変換されたと思います。
JPEGやPNGと比べて、ファイル容量が小さくなったのではないでしょうか？
画像のファイル容量を小さく出来るので、ページの表示速度の改善に繋がりますね！
実際に使っているGulpのタスクを公開します
簡単ではありましたが、僕がオススメするGulpのパッケージと、その使い方を紹介しました。
僕も実際にご紹介したパッケージを組み合わせてコーディングしています。
何かの参考になればと思い、僕が普段から使っているGulpのタスクを公開します。
自分が使いやすい様に作成したタスクなので、ご自身に合わせてカスタマイズしてください。
まず、ディレクトリの構造は以下の様にしています。
root/
├ dest/
│ ├ css/
│ │ └ style.css
│ ├ img/
│ └ js/
│ └ script.min.js
├ src/
│ ├ img/
│ ├ js/
│ │ └ script.js
│ └ scss/
│ └ style.scss
├ gulpfile.js
├ index.html
└ package.json基本的にsrcフォルダの画像、Sass、JavaScriptをdestフォルダに出力します。
自分で編集するのはsrcフォルダ内のファイルのみで、destフォルダは出力専用です。
index.htmlに内容は以下のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ページタイトル</title>
<link rel="stylesheet" href="./dest/css/style.css" />
</head>
<body>
<script src="./dest/js/script.min.js"></script>
</body>
</html>
destフォルダ内のCSSとJavaScriptを読み込んでいるだけですね。
package.jsonの内容は以下の通りです。
{
"name": "project-name",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.2.5",
"browser-sync": "^2.26.14",
"css-mqpacker": "^7.0.0",
"gulp": "^4.0.2",
"gulp-changed": "^4.0.2",
"gulp-clean-css": "^4.3.0",
"gulp-imagemin": "^7.1.0",
"gulp-postcss": "^9.0.0",
"gulp-rename": "^2.0.0",
"gulp-sass": "^4.1.0",
"gulp-uglify": "^3.0.2",
"gulp-webp": "^4.0.1",
"imagemin-pngquant": "^9.0.2"
}
}gulpfile.jsの内容は以下のようにしています。
const gulp = require("gulp");
const browserSync = require("browser-sync");
const sass = require("gulp-sass");
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const mqpacker = require("css-mqpacker");
const cleanCSS = require("gulp-clean-css");
const uglify = require("gulp-uglify");
const imagemin = require("gulp-imagemin");
const pngquant = require("imagemin-pngquant");
const webp = require("gulp-webp");
const rename = require("gulp-rename");
const changed = require("gulp-changed");
// ローカルサーバーを起動
function server(done) {
browserSync.init({
server: {
baseDir: "./",
index: "index.html",
},
});
done();
}
// ブラウザを更新
function reloadBrowser(done) {
browserSync.reload();
done();
}
// Sassをコンパイル
function compileSass() {
return gulp
.src("./src/scss/**/*.scss", { sourcemaps: true })
.pipe(
sass({
outputStyle: "expanded",
})
)
.on("error", sass.logError)
.pipe(postcss([autoprefixer()]))
.pipe(postcss([mqpacker()]))
.pipe(gulp.dest("./dest/css", { sourcemaps: "./" }))
.pipe(browserSync.stream());
}
// CSSを圧縮
function minifyCss() {
return gulp
.src("./dest/css/**/*.css")
.pipe(cleanCSS())
.pipe(rename({ suffix: ".min" }))
.pipe(gulp.dest("./dest/css"));
}
// JavaScriptを圧縮
function minifyJs() {
return gulp
.src("./src/js/**/*.js")
.pipe(uglify())
.pipe(rename({ suffix: ".min" }))
.pipe(gulp.dest("./dest/js"));
}
// 画像を圧縮
function minifyImage() {
return gulp
.src("./src/img/*.{png,jpg,jpeg,gif,svg}")
.pipe(changed("./dest/img"))
.pipe(
imagemin([
imagemin.mozjpeg({ quality: 80 }),
imagemin.svgo({
plugins: [{ removeViewBox: true }, { cleanupIDs: false }],
}),
imagemin.gifsicle({
interlaced: true,
}),
pngquant({
quality: [0.65, 0.8],
speed: 1,
}),
])
)
.pipe(gulp.dest("./dest/img"));
}
// webPを作成
function conversionWebp() {
return gulp
.src("./src/img/*.{png,jpg,jpeg}")
.pipe(changed("./dest/img"))
.pipe(
rename(function (path) {
path.basename += path.extname;
})
)
.pipe(webp())
.pipe(gulp.dest("./dest/img"));
}
// ファイルを監視
function watchFiles() {
gulp.watch("./**/*.html", reloadBrowser);
gulp.watch("./src/scss/**/*.scss", compileSass);
gulp.watch("./src/js/**/*.js", gulp.series(minifyJs, reloadBrowser));
gulp.watch("./src/img/**/*.{png,jpg,jpeg,gif,svg}", gulp.series(conversionWebp, minifyImage, reloadBrowser));
}
// 関数をタスク化
exports.server = server;
exports.compileSass = compileSass;
exports.minifyCss = minifyCss;
exports.minifyJs = minifyJs;
exports.minifyImage = minifyImage;
exports.conversionWebp = conversionWebp;
exports.default = gulp.series(server, watchFiles);この記事で紹介したGulpパッケージをgulp.watchで自動化している感じですね。
使い方
使い方はとても簡単です。
まずはGulpパッケージをインストールします。
必要なパッケージはpackage.jsonに記述しているので、以下のコマンドで一括インストールできます。
$ npm installそして、Gulpを実行するだけ。
$ npx gulpすると、ローカルサーバーが起動し、HTMとsrcフォルダ内の監視がスタートします。
HTMLやsrcフォルダ内のファイルを編集すると、自動的にタスクが実行してブラウザをリロードします。
各ファイルに施す処理は以下の通りです。
画像
画像ファイルの置き場所は./src/imgです。
このフォルダ内に画像を追加したり編集したりすると、./dest/imgに圧縮した画像とwebPに変換した画像が出力されます。
Sass
Sassファイルの置き場所は./src/scssです。
このフォルダ内のSassファイルを変数すると、./dest/cssにCSSファイルとソースマップが出力されます。
また、CSSにコンパイルする際にベンダープレフィックスを追加し、Sassファイル内に散らばったメディアクエリをまとめるようにしています。
JavaScript
JavaScriptファイルの置き場所は./src/jsです。
このフォルダ内のJavaScriptファイルを編集すると、./dest/jsに圧縮したJavaScriptファイルが出力されます。
圧縮後はファイル名の後ろに「.min」が追加されます。
各タスクは個別に実行することもできます。
| コマンド | 実行されるタスク |
|---|---|
| $ npx gulp server | ローカルサーバー（BrowserSync）の起動 |
| $ npx gulp compileSass | SassをCSSにコンパイル |
| $ npx gulp minifyCss | CSSファイルを圧縮 |
| $ npx gulp minifyJs | JavaScriptファイルを圧縮 |
| $ npx gulp minifyImage | 画像を圧縮 |
| $ npx gulp conversionWebp | 画像をwebPに変換 |
Gulpについては、ちょこちょこ手を加えているので、その時はこの記事を更新していこうと思います。
まとめ
Gulpは色々なことが出来るので奥が深いですよね。
今回ご紹介したパッケージも僕の中では必要最小限といった感じです。
今後も色々と調べながら手を加えていこうと思っています！
もし、分かりにくい部分や間違っている部分があればお気軽にコメントください。
最後まで読んでいただきありがとうございました！