こんにちは！ハッサク(@hassaku_888)と申します。
2022年6月からデイトラのWeb制作コース受講開始。日々勉学に励んでいます。
日々の学習記録は主にTwitterで配信していますが、振り返りたい内容や量が多い場合は、こちらのブログでまとめています。
コーディングを効率化するGulpを勉強しました。
Gulpはタスクを事前に登録しておくことで、決まった処理を自動で実行できるようにするものです。
講義内容にそってまとめようと思いましたが、先人が残したまとめが非常に分かりやすかった為、デイトラの動画視聴→以下ブログを読む を繰り返し、勉強しました。（先人の方有難うございます🙏）
デイトラの講義内容に添いつつ、書き手の見解も含まれ大変参考になりました。
▼参考サイト
上記まとめ以外で、個人的に気になった部分だけピックアップして以下にまとめたいと思います。
Gulpの導入(gulpインストール〜コンパイル環境の整備)
基本的には以下手順。
- 「package.json」をインストールする
ターミナルを開く ＞「npm init -y」と入力 ＞Enter ＞package.jsonが追加される - 必要なパッケージをインストールする
「npm install –save-dev インストールしたいパッケージ名」をターミナルに入力
※コンパイル環境を作る時は、npm install –save-dev gulp gulp-sass sass gulp-postcss autoprefixer css-declaration-sorter gulp-merge-media-queries を入力した - インストールしたパッケージ名が「package.json」に記載されるため確認
- タスクを作るため、ファイル「gulpfile.js」を作成
- ファイル「gulpfile.js」内で、必要なパッケージを読み込む
※書き方は「const gulp = require(“インストールしたパッケージ名”);」 - タスクの追加(コンパイル設定等)を行う
例：function compileSass() { 〜 - ターミナルでコマンドが使える様にコマンドを登録する
例：exports.default = watch; - コンパイルできるか確認するためファイルを用意
- ターミナルに「npx gulp」入力 ＞ Enter でコンパイルされれば完了
※以下はDAY27の「コンパイル環境の整備」で入力した内容
//必要なパッケージを読み込む
const gulp = require("gulp");
const sass = require("gulp-sass")(require("sass"));
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const cssSorter = require("css-declaration-sorter");
const mmq = require("gulp-merge-media-queries");
//タスクの追加（以下は、Sassのコンパイル処理を設定）
function compileSass() {
return gulp.src("./src/assets/sass/**/*.scss")
.pipe(sass())
.pipe(postcss([autoprefixer(), cssSorter()]))
.pipe(mmq())
.pipe(gulp.dest("./public/assets/css/"))
}
function watch() {
gulp.watch("./src/assets/sass/**/*.scss", compileSass)
}
//コマンドの登録
exports.default = watch;静的サイトにGulpを導入
基本的には以下手順。
- 事前に作成した「gulpfile.js」と「package.json」を入れる
※「browserslist」は「package.json」内に記述済とする - ターミナルを開き「npm install」を入力、Enter
→「node_modules」と「 package-lock.json」が追加される - 「gulpfile.js」を開き、ディレクトリ部分の見直し&修正
- ターミナルを開き「npx gulp build」を入力、Enter
→３で設定したディレクトリ構造どおりに、ファイルが出力されているか確認する - ブラウザを開き、cssやhtml等を更新→更新内容が即時反映されるか確認できればOK
フォルダ構成
src(開発用)とpublic(本番用)という名前のフォルダを2つ用意。
srcからpublicへ、gulpファイルを通して出力します。お客様へはsrcではなく、publicフォルダを提出します。
public ∟index.html ∟assets ∟ img ∟ js ∟ css src ∟index.html ∟assets ∟ img ∟ js ∟ sass node_modules gulpfile.js package-lock.json package.json
複数ページ必要な場合は、src配下(index.htmlと同階層)にaboutフォルダ作成＞中にindex.htmlを作成すればOK。
開発環境で表示したURL末尾に「/about」をつければページが確認できます。
動的サイトにGulpを導入
フォルダ構成が参考になったため、記録しておきます。
dev ∟ node_modules ∟ gulpfile.js ∟ package-lock.json ∟ package.json ∟ src ∟ img ∟ js ∟ sass css img js 404.php archive.php footer.php front-page.php functions.php 以下phpファイルが続く。
- 静的サイトではpublicフォルダ内に本番用データ(css,img,js)をあげていたが、動的サイトでは一番上の階層(dev)と同階層にあるcss,img,jsフォルダ内にあげる
- 納品時はdev以外のフォルダをお渡しする(アップロードする)
- htmlファイルはないので、phpを直接編集する
→WordPressのようなローカル環境を予め作って構築するような場合は「browserSync.init」の記述が静的サイトと異なるので注意（以下参照）
//ブラウザ立ち上げ処理
function browserInit() {
browserSync.init({
// 静的サイトはコメントアウトの記述でOK
// server: {
// baseDir: "./public/"
// }
proxy: "http://localhost:8888/dev" //URLは開発環境のサイトURLを記載すること
});
}静的サイトか・動的サイトかで、html(php)・public・srcの場所が変わったり、publicに至っては動的サイトだとフォルダがないので、どこに何を配置するか先に考えてからフォルダを構成しようね。
ちなみにディレクトリ構造は、gulpfile.jsを起点に見るので、動的サイトのフォルダ構成の場合、一番上にあるimgフォルダのディレクトリは「”../img/”」で指定します。
