https://note.com/kei_01011/n/n34220e142583

gulpとは、Node.jsで動作するビルドシステムヘルパーと言って、web制作において時間のかかるタスクを自動化できる便利なツールです。

gulpを使うことで様々な処理を自動で行うことができ、とっても便利なのです。

さて、

gulpは前から使っていたのですが、gulpfile.jsの書き方が非推奨となっていたため、一から書き直してみました。

Node.jsの説明やgulpの環境構築についてはこの記事では触れません。

環境構築から知りたい方は、ICS MEDIAさんの記事がおすすめです。

今回追加する処理

・Sassのコンパイル、圧縮・JavaScriptのトランスパイル、圧縮・画像圧縮・ブラウザ自動リロード・（おまけ）FTPアップロード

「gulp 環境構築」「gulp sass コンパイル」などでググっても、taskを使った非推奨の書き方が多いです。

この書き方でも動くのですが、後々バグが起きそうだし、今のうちにちゃんと書いておきたい。

という訳で、一番信頼できる公式サイトを参考にします。

ちょっとわからない部分は、DeepLに助けてもらいました。（翻訳の精度高いので使える！）

ディレクトリ構造

ディレクトリ構造はこんな感じです。

srcが作業ディレクトリで、コンパイル前のscssファイルや圧縮前のjsファイル、画像ファイルが格納されています。

gulpが走ると、distディレクトリにコンパイルされます。

├─ index.html
├─ gulpfile.js
├─ package.json
├─ package.look.json
├─ /node_modules
├─ /dist
│ 　├─ /css
│ 　│  └─ style.css
│ 　├─ /js
│ 　│  └─ script.js
│ 　└─ /img
└─ /src
  　├─ /scss
  　│  └─ style.scss
  　├─ /js
  　│  └─ script.js
  　└─ /img