デイトラ40代プログラミング日記【15ヶ月目第2週】アラフォー初心者

覚えておくこと

  return gulp.src("./src/**/*.scss")

☝️ gulpfile.js に上記を書くことで階層の異なるscssも含めてすべてのscssファイルをコンパイルできる

function watch() {
    gulp.watch("./src/**/*.scss", compileSass);
}

exports.test = test;
exports.compileSass = compileSass;

☝️watch機能が働き自動でコンパイルされるようになる（Live Compile Server と同様）

npx gulp watch

☝️ターミナルでこのコマンドを実行するとwatch機能が動き出す

function watch() {
    gulp.watch("./src/**/*.scss", gulp.series(compileSass, browserReload));
}

☝️左から順に実行される（scssをコンパイルしたらブラウザーをリロードする）

👇️左から順番ではなく並行（ブラウザーを立ち上げる、watchするを同時に行う）

exports.dev = gulp.parallel(browserInit, watch);

watch中に何回もリロードできるようにするには👇️を gulpfile.js へ記載必要

function browserReload(done) {
  browserSync.reload();
  done();
}

☝️ done を追記することでリロード何回もできるようになる

A:案件精査・エントリー、【Web制作コース 実務編】を進める

覚えておくこと

npm install --save-dev gulp-clean-css gulp-uglify gulp-rename

☝️パッケージを使うことでJavaScript、CSSの圧縮を簡単にできる

npm install --save-dev gulp-html-beautify

☝️HTMLの整列ができるようになる

抑えておくこと

gulpfile.js

package.json

browserslistrc（隠しファイル）

☝️この3つのファイルを新しいウインドウを作り開くと設定した Gulp を再現できる

設定した Gulp を使い回せるようになる

GITHUBでファイルを共有しておくとチーム開発で全員が同じGulp設定を再現できる

👆️の3つのフォルダを VS Code に取り込んだら👇️のコマンドをターミナルで実行

npm install

☝️package.json に記載されているパッケージをすべて一括でインストールできる

一括インストールすることで Gulp 設定の再現ができる

WordPress開発環境に Gulp を設定する手順

テーマ直下にフォルダ（フォルダ名は任意）を作成（例 「dev」フォルダ）

devフォルダにDAY23で設定した👇️の2つのファイルをコピペする

gulpfile.js

package.json

ターミナルで👇️のコマンドを実行

cd dev

npm install

npm audit（install完了せず）

npm audit fix

参考サイト👇️

【npm audit】npm package の脆弱性対応してますか？

zenn.dev