前回：gulpの環境構築【導入編】の続きです。
無事gulpファイルを使用する環境が整ったので、次は早速コーディングするにあたって
gulpにどう助けてもらいたいのか、その具体的な内容をファイルに書いてセッティングしていきます。
前回の記事はこちら
※最近はgulpからwebpackに移行するのが主流だとういう記事も見かけました。
ただ、私の今の知識ではwebpackが難解だったこと、やっとgulpを覚えたこと、正直gulpであまり不便なことはないことから現時点ではgulpfileを使用しています。（将来移行できたら…）
①gulpのプラグインのインストール
私はSitesというフォルダにコーディングするファイルは全て格納しています。
そこの中にnode_modulesが置いてあります。
下記のブログで紹介されているやり方がとても良かったのでマネさせていただいています。
▼Gulp(ガルプ)で爆速コーディング！複数の案件でGulpを使い回してみよう
https://yatteq.com/gulp-cording03/
これはnode_modulesのシンボリックリンク（ショートカット）を各案件に作成しgulpfile.jsのみ各案件に設置するというもの。
node_modulesはファイル数も多いですし毎回案件ごとにコピーしてたらキリがないですよね。
②インストールしたプラグイン一覧
初期のインストール段階では、node_modulesの中のフォルダも必要最低限しかありません。
gulpを使うにあたって、必要な機能をインストールする必要があります。
プラグインのインストール・アンインストールする際のコマンドをまとめました。
/* パッケージをインストール */
npm i -D パッケージ名
/* パッケージをアンインストール */
npm rm 削除したいパッケージ
/* パッケージのバージョンを指定してインストール */
npm i -D パッケージ名@バージョン下記がインストールしたプラグイン一覧です。
gulp-imagemin/imagemin-mozjpeg/imagemin-pngquant
画像を自動的に圧縮してくれるプラグイン。画像形式ごとに必要なので計3つ入れました。
gulp-changed
画像を自動的に圧縮する際に、すでにあるものは除いて変更されたものに適用するためのプラグイン
gulp-dart-sass
sass環境のためのプラグイン
gulp-plumber
sassのエラーが出た時にも引き続き動作を続けるためのプラグイン
gulp-notify
sassのエラーが出た時にデスクトップ上で通知してくれるプラグイン
gulp-autoprefixer
sassのコンパイルをしたときに自動的にベンダープレフィックスをつけてくれる
gulp-webserver
ローカルサーバーを立ち上げる
③gulpfile.jsの中身
2021年12月時点の私の使用しているgulpファイルの内容です。
"use strict";
const gulp = require("gulp");
const webserver = require("gulp-webserver");
const sass = require("gulp-dart-sass");
const plumber = require("gulp-plumber");
const notify = require("gulp-notify");
const autoprefixer = require("gulp-autoprefixer");
const imagemin = require("gulp-imagemin");
const mozjpeg = require("imagemin-mozjpeg");
const pngquant = require("imagemin-pngquant");
const changed = require("gulp-changed");
// ローカルサーバー
const server = () => {
return gulp.src("./").pipe(
webserver({
host: "localhost",
port: 8080,
livereload: true,
})
);
};
// sassコンパイル
const cssSass = () => {
return gulp
.src("assets/scss/*.scss", {
sourcemaps: true,
})
.pipe(
plumber({
errorHandler: notify.onError("Error: <%= error.message %>"),
})
)
.pipe(autoprefixer())
.pipe(sass({ outputStyle: "expanded" }))
.pipe(gulp.dest("assets/css", { sourcemaps: "./" }));
};
// 画像圧縮
const image = () => {
return gulp
.src("assets/img/**")
.pipe(changed("assets/dist/img"))
.pipe(
imagemin([
pngquant({
quality: [0.6, 0.7], // 画質
speed: 1, // スピード
}),
mozjpeg({ quality: 65 }), // 画質
imagemin.svgo(),
imagemin.optipng(),
imagemin.gifsicle({ optimizationLevel: 3 }), // 圧縮率
])
)
.pipe(gulp.dest("assets/dist/img"));
};
// watch
const watchFiles = () => {
gulp.watch("assets/scss/*.scss", gulp.series(cssSass));
gulp.watch("assets/img/**", gulp.series(image));
};
// 実行
exports.default = gulp.series(
gulp.parallel(server, cssSass),
gulp.parallel(watchFiles)
);
色んなサイトで紹介されている方法をかき集めて参考にさせていただきました。
ちなみに上記だと
gulp-notify: [Error running notifier] Could not send message: Unexpected token { in JSON at position 129というエラーが出てしまい、検索したところpacakege.jsonの”gulp-notify”: {}の括弧内に
"title": "Gulp Task Complete",
"message": "Message",この2つを追加したところエラーが解消されました。
参考ページはこちら
▼Error: SyntaxError in plugin ‘gulp-notify’ #129
https://github.com/mikaelbr/gulp-notify/issues/129
個人的に手間取ったgulp環境構築ですが、うまく動くようになればとても便利です。
もしまだgulpを使用したことのないコーダーの方いらっしゃいましたらぜひ参考にしてみてください。
