【デイトラ実務編 学習記録】Gulpを使ってみよう 「Gulpでできること後編」

れももです。
今回もデイトラ実務編Day17の「Gulp」学習記録をしていきます。
前回は「Gulpでできること前編」ということで、「Sassコンパイル」や「ベンダープレフィックス付与」、「ファイル監視」など様々な実用的なGulp処理を構築しました。

今回は、「ブラウザリロード」や「HTMLフォーマット」、「css、jsファイルの圧縮」をGulpでやっていきます。今回までの処理を全て登録しておけば作業効率と品質アップが大いに期待できます。
こんな講座まで無料で追加してくれるデイトラさんにほんと感謝です😭

前回までの記事を見たい方は下記からご覧いただければと思います＾＾

HTMLフォーマット

今回はHTMLのフォーマットからやっていきます。
Gulpでは、HTMLのフォーマットもできるんですね。制作しているとインデントが崩れてしまったり、それをキチンと調整するのってかなり大変ですよね。
もちろんそのまま納品するわけにもいかないので、Gulpを使って自動で調整してしまいましょう＾＾

①「gulp-html-beautify」インストール

「gulp-html-beautify」というパッケージを使うので、ターミナルに「npm install –save-dev gulp-html-beautify」と記述しインストールしてください。

package.jsonを確認してインストールされていればOKです！

②HTMLフォーマットのタスク登録

次に「gulpfile.js」にHTMLフォーマットの処理を記述していきます。
コードは下記のように記述します。
※赤枠で囲ってある箇所が今回記述したコードです。

//gulp-html-beautifyの読み込み
const htmlBeautify = require("gulp-html-beautify");

//HTMLフォーマット処理
function formatHTML() {
  return gulp.src("./src/**/*.html")//フォーマットしたいHTMLファイル指定
  .pipe(htmlBeautify({
    indent_size: 2,//インデントサイズ2
    indent_with_tabs: true,//タブでインデント処理
  }))
  .pipe(gulp.dest("./public"))//フォーマット後のhtmlファイルが格納されるフォルダ
}

exports.formatHTML = formatHTML;//formatHTMLを登録

パッケージの読み込み

上記の記述通りにインストールした「gulp-html-beautify」を読み込んであげてください。

処理の記述

「formatHTML」という名前をつけて処理の内容を記述しています。

6行目の「return gulp.src(“./src/**/*.html”)」は、フォーマット対象のファイルを指定しています。srcフォルダの中の全てのHTMLファイルが対象となるように記述しています。
「＊」の使い方がわからない方は前回の記事で少し解説していますのでご参考にしてください。

【デイトラ実務編 学習記録】Gulpを使ってみよう 「Gulpでできること前編」

デイトラ実務編で「Gulp」について学習しましたので学習記録としてまとめました。今回はSassのコンパイルやファイル監視を行う「watch」についてまとめています。

lemolog.lemomo-works.com

2022.04.17

7〜9行目は、フォーマットの処理内容を記述しており、「indent_size: 2,」と「indent_with_tabs: true,」をオプションで設定しています。

大体皆さん上記の設定でHTMLのコード書かれていると思いますのでこの設定で良いかと思います。
どんなオプション関して詳しく知りたい方は、npmのサイトに載っていますので、確認してお好みの設定にしてください。

11行目の「.pipe(gulp.dest(“./public”))」は、フォーマットしたHTMLファイルをどのフォルダに保存するか、行き先を指定しています。
この記述ではpublicフォルダに保存してください ということになります。

コマンドの登録

最後にターミナルで実行できるようにexportsでコマンド登録します。
コマンド名も「formatHTML」で登録しています。

③タスクの実行

処理の内容が記述できたら実際に処理を実行していきましょう。
今回は確認のために、srcフォルダにindex.htmlを作成し、下記のようにインデントをわざとバラバラにして記述しました。これがちゃんとフォーマットされるか確認していきます。

コマンドの実行は、「npx gulp formatHTML」でOKです。
publicフォルダに生成されたindex.htmlを見てみると、綺麗にフォーマットされていることがわかります。

ブラウザの立ち上げ

ローカルでコーディングしていく際に、書いた内容をブラウザに反映させて確認しながら作業を行いますよね。
「コード記述→ファイル更新→ブラウザに反映」という流れが常に行われていると思います。
Gulpでその動作を作っていくんですが、まずはブラウザを立ち上げます。

ちなみにブラウザの立ち上げって聞いて自分は最初ピンとこなかったので補足しておくとVS Codeだと「Open with Live Server」って皆さん使うと思うんですけどそのことですね！
つたわれ〜〜！笑（わからなくても進めれば理解できます！w）

①「browser-sync」インストール

「browser-sync」というパッケージを使うので、ターミナルに「npm install –save-dev browser-sync」と記述しインストールしてください。

package.jsonを確認してインストールされていればOKです！

②ブラウザ立ち上げのタスク登録

次に「gulpfile.js」にブラウザ立ち上げの処理を記述していきます。
コードは下記のように記述します。
コードが多くなり画面のスクショだと見切れてしまうのでここからは追記したコードだけ載せていきますm(_ _)m

//browser-syncの読み込み
const browserSync = require("browser-sync");

//ブラウザ立ち上げ処理
function browserInit() {
  browserSync.init({
    server: {
      baseDir: "./public/"//実行した後参照するフォルダを指定
    }
  });
}

exports.browserInit = browserInit;//browserInitを登録

パッケージの読み込み

上記の記述の通りインストールした「browser-sync」を読み込んであげてください。

処理の記述

今回も新たに「browserInit」という名前をつけて処理内容を記述しています。

8行目の「baseDir」には、実行したら参照するフォルダを指定します。
これまでに登録したタスクはpublicフォルダにファイルが保存されるように設定してきたので、このフォルダを参照してもらえばOKです。

コマンドの登録

ブラウザの立ち上げもターミナルで実行できるようにexportsでコマンド登録します。
コマンド名も「browserInit」で登録しています。

③タスクの実行

それでは実際に処理を実行していきましょう。
先ほどHTMLフォーマットの時に生成されたindex.htmlがpublicフォルダに入っているので、処理を実行すればそれがブラウザで見れるはずです。

「npx gulp browserInit」で実行すると見事ブラウザが立ち上がりました！

ブラウザのリロード

続いてHTMLやCSSが変更されたらブラウザがリロードされて、立ち上げたブラウザにちゃんと反映されるようにしていきます。

設定を順を追ってやっていくんですが、下記のような流れで設定していきます。

ブラウザの立ち上げと同時に「watch」起動

既に登録されている「browserInit」と「watch」を同時に起動できるようにしていきます。
gupfile.jsに下記コード1行だけ書けばOKです！

exports.dev = gulp.parallel(browserInit, watch);//browserInitとwatch同時起動を登録

実行してみると、「Starting ‘browserInit’…」と「Starting ‘watch’…」が表示されており、ブラウザとwatchが起動されていることがわかります。

リロードの設定

続いて、今度はファイルが変更されたらリロードするという設定を行っていきます。

今、watchで監視しているのはscssファイルなので、scssが書き変わったらsassコンパイルが実行され、ブラウザをリロードするという流れを作ります。

書いていくコードは、watchの記述内容を少し変更するのとブラウザのリロード処理を追加します。

//ファイル監視(watch)
function watch() {
  gulp.watch("./src/**/*.scss", gulp.series(compileSass, browserReload));
}

//ブラウザのリロード処理
function browserReload() {
  browserSync.reload();
}

これで「npx gulp dev」を実行すれば、scssの内容に変更があったら都度コンパイル→ブラウザリロードの順に処理が実行されるようになるはず、なんですが、、、
実はこのままでは2回目以降のscssの変更内容が反映されません(実際にやってみてください)。

なぜかというと、1回Sassのコンパイル→リロードが行われるとずっとリロードされたままの状態になってしまうからです。

明示的な終了を入れよう

上記のように実行されたままの状態になってしまうものがあるので、1回で終わって欲しい処理は明示的な終了を設定するようにしましょう。
明示的な終了は第1回目の記事でやりましたね！

【デイトラ実務編 学習記録】Gulpを使ってみよう 「インストール〜簡単な動作実行編」

デイトラ実務編で「Gulp」について学習しましたので学習記録としてまとめました。今回はGulpのインストールからタスク実行の仕方をまとめています。

lemolog.lemomo-works.com

2022.04.13

「browserReload」の処理に下記のように明示的な終了を追加しておけば、繰り返しリロードができるようになり、ブラウザに都度反映されるようになります。

//ブラウザのリロード処理
function browserReload(done) {
  browserSync.reload();
  done();
}

ちなみに「browserInit」に関しても明示的な終了を指示しておいた方が良いらしいので追加しておきました。

//ブラウザ立ち上げ処理
function browserInit(done) {
  browserSync.init({
    server: {
      baseDir: "./public/"//実行した後参照するフォルダを指定
    }
  });
  done();
}

cssファイル、jsファイル圧縮

続いてファイル圧縮をやっていきます。
WordPressだとプラグインでできちゃったりしますけど、WordPressを使用しないLPなどを作成する際はファイル圧縮とかどうするんだろうって思っていたので、Gulpで簡単にできるのは本当にありがたいですね！

①「gulp-clean-css」と「gulp-uglify」、「gulp-rename」インストール

今回は3つのパッケージを使っていきます。ターミナルに「npm install –save-dev gulp-clean-css gulp-uglify gulp-rename」と記述し3つをインストールしてください。

package.jsonを確認してインストールされていればOKです！

②css、jsファイル圧縮のタスク登録

次に「gulpfile.js」にファイル圧縮の処理を記述していきます。
処理の流れとしては、対象ファイルをファイル圧縮→「.min」拡張子をつける→対象フォルダに格納といった流れになります。

cssファイル圧縮

まずはcssファイル圧縮のコードからです。
cssファイル圧縮はsassコンパイルと一緒に実行されるようにしたいので、「compileSass」の処理の中にcss圧縮のコードを追記していきます。

//gulp-clean-cssの読み込み
const cleanCss = require("gulp-clean-css");
//gulp-uglifyの読み込み
const uglify = require("gulp-uglify");
//gulp-remaneの読み込み
const rename = require("gulp-remane");

//Sassコンパイル処理の記述
function compileSass() {
  return gulp.src("./src/**/*.scss")
  .pipe(sass())
  .pipe(postcss([autoprefixer({ grid: true }), cssSorter({
    order: "smacss"
  })]))
  .pipe(mmq())
  .pipe(gulp.dest("./public"))
  .pipe(cleanCss())//cssファイル圧縮
  .pipe(rename({//「.min」拡張子をつける
    suffix: ".min"
  }))
  .pipe(gulp.dest("./public"))//圧縮ファイルの格納先指定
}

jsファイル圧縮

続いてjsファイル圧縮のコードです。
jsファイル圧縮は「minJs」という処理を新たに追記しています。

//jsファイル圧縮
function minJs() {
  return gulp.src("./src/js/**/*.js")//圧縮対象のファイルを指定
  //間に処理を何も書かない場合そのままファイルが出力される
  .pipe(gulp.dest("./public/js/"))//jsファイルをpublicフォルダへ格納
  .pipe(uglify())//jsファイル圧縮
  .pipe(rename({//「.min」拡張子をつける
    suffix: ".min"
  }))
  .pipe(gulp.dest("./public/js/"))//圧縮ファイルの格納先指定
}

jsファイルは一旦圧縮前の状態のファイルを保存した後に、圧縮版ファイルを保存する流れにしています。
「//間に処理を何も書かない場合そのままファイルが出力される」とコメントを書いている通り、何も処理がない状態でdest先を指定すると、ファイルがそのまま出力（コピー）されます。

実行して確認すると、cssとjs共にファイル圧縮されていることがわかります。

フォルダの整理

ここまでたくさんタスクを構築してきましたが、ここで一旦フォルダの可読性を上げるためにフォルダ内を整理していきます。
今回はデイトラで紹介されていた整理の仕方をそのままやっていきます。

フォルダの構成

フォルダの構成としてはこのような感じです。

srcフォルダ直下にindex.htmlとassetsフォルダを配置し、assetsフォルダ内にsassとjs、imgフォルダを作り管理するような構造です。
Gulpでの処理後はそれと対応させてpublicフォルダ内にそれぞれ出力させるように設定すればいいというわけですね。

gulpfile.jsのパスの書き換え

注意点として、フォルダ構成を変えているのでgulpfile.jsに記載したコードのファイルパスも必ず書き換えておいてください。

↓このような感じで書き換えていってください

//Sassコンパイル処理の記述
function compileSass() {
  return gulp.src("./src/assets/sass/**/*.scss")
  .pipe(sass())
  .pipe(postcss([autoprefixer({ grid: true }), cssSorter({
    order: "smacss"
  })]))
  .pipe(mmq())
  .pipe(gulp.dest("./public/assets/css/"))
  .pipe(cleanCss())//cssファイル圧縮
  .pipe(rename({//「.min」拡張子をつける
    suffix: ".min"
  }))
  .pipe(gulp.dest("./public/assets/css/"))//圧縮ファイルの格納先指定
}

画像フォルダコピーの処理追加

画像ファイルの出力の設定はまだやっていなかったのでgulpfile.jsに下記コードを記載しておきましょう。

//画像フォルダのコピー
function copyImage() {
  return gulp.src("./src/assets/img/**/*")
  .pipe(gulp.dest("./public/assets/img/"))
}

処理を実行して確かめてみる

最後にうまくいっているか確かめてみましょう。
これまで記述したタスクを全て同時に実行するコードを登録して確かめてみます。

exports.build = gulp.parallel(formatHTML, compileSass, minJs, copyImage);

「gulp.parallel」を使って、HTMLフォーマットとSassコンパイル、jsファイル圧縮、画像フォルダコピーを同時に実行できるコマンドを登録して実行してみましょう。
実行する前にpublicフォルダの中身は全て消去して実行してみてください。

実行するとpublicフォルダの中に同じフォルダ構成ができており、さらに各ファイルごとにフォーマットやコンパイル、ファイル圧縮も実行されていることがわかります。

Gulpを別のプロジェクトでも使い回す

最後にこれまで作ってきた処理を他プロジェクトでも使えるようにする方法を見ていきましょう。

使い回しをする際に必要となってくるファイルは以下の3点です。

その他設定ファイルについては作成していないので今回は省きます。
設定ファイルがある場合は必ずそちらも忘れずに。

では、使い回しの方法を見ていきます。

「gulpfile.js」と「package.json」をプロジェクトフォルダに格納

まずはGulpを適用させたいプロジェクトフォルダに今まで作ってきた「gulpfile.js」と「package.json」を格納しましょう。

package.jsonに記載のパッケージを全てインストールする

次にVS Codeでプロジェクトフォルダを開き、package.jsonに記載してあるパッケージを全てインストールしていきます。
※新しいプロジェクトフォルダにはまだパッケージがインストールされていないので、インストールするところから必ず実施しましょう。

一括インストールをしたら「node_modules」が格納されたと思うのでこれで準備完了です！
あとはgulpfile.jsに記載のファイルパスなどに気をつければ全てのパッケージが実行できます。

補足：自分好みにカスタマイズ

ここまでタスクが構築できたらあとは自分なりにタスクを組んでみよう！っということで、Gulpの処理を自分なりにまとめました。

最終的にまとめた内容(gulpfile.js)がこちらです！

/*----------------------------------------------------------------------
パッケージの読み込み
-----------------------------------------------------------------------*/
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");
const htmlBeautify = require("gulp-html-beautify");
const browserSync = require("browser-sync");
const cleanCss = require("gulp-clean-css");
const uglify = require("gulp-uglify");
const rename = require("gulp-rename");


/*----------------------------------------------------------------------
タスクの記述
-----------------------------------------------------------------------*/
//HTMLフォーマット処理
function formatHTML() {
  return gulp.src("./src/**/*.html")
  .pipe(htmlBeautify({
    indent_size: 2,
    indent_with_tabs: true,
  }))
  .pipe(gulp.dest("./public"))
}

//Sassコンパイル処理の記述
function compileSass() {
  return gulp.src("./src/assets/sass/**/*.scss")
  .pipe(sass())
  .pipe(postcss([autoprefixer({ grid: true }), cssSorter({
    order: "smacss"
  })]))
  .pipe(mmq())
  .pipe(gulp.dest("./public/assets/css/"))
  .pipe(cleanCss())
  .pipe(rename({
    suffix: ".min"
  }))
  .pipe(gulp.dest("./public/assets/css/"))
}

//jsファイル圧縮
function minJs() {
  return gulp.src("./src/assets/js/**/*.js")
  .pipe(gulp.dest("./public/assets/js/"))
  .pipe(uglify())
  .pipe(rename({
    suffix: ".min"
  }))
  .pipe(gulp.dest("./public/assets/js/"))
}

//画像フォルダのコピー
function copyImage() {
  return gulp.src("./src/assets/img/**/*")
  .pipe(gulp.dest("./public/assets/img/"))
}

//ファイル監視(watch)
function watch() {
  gulp.watch("./src/assets/sass/**/*.scss", gulp.series(compileSass, browserReload));
  gulp.watch("./src/assets/js/**/*.js", gulp.series(minJs, browserReload));
  gulp.watch("./src/**/*.html", gulp.series(formatHTML, browserReload));
  gulp.watch("./src/assets/img/**/*", gulp.series(copyImage, browserReload));
}

//ブラウザ立ち上げ処理
function browserInit(done) {
  browserSync.init({
    server: {
      baseDir: "./public/"//実行した後参照するフォルダを指定
    }
  });
  done();
}

//ブラウザのリロード処理
function browserReload(done) {
  browserSync.reload();
  done();
}

/*----------------------------------------------------------------------
コマンドの登録
-----------------------------------------------------------------------*/
exports.compileSass = compileSass;
exports.watch = watch;
exports.formatHTML = formatHTML;
exports.browserInit = browserInit;
exports.dev = gulp.parallel(browserInit, watch);//ブラウザとwatch立ち上げ
exports.minJs = minJs;
exports.build = gulp.parallel(formatHTML, compileSass, minJs, copyImage);

今回学習したリロード処理うまく使って「html」「scss」、「js」、「img(画像)」全てファイル監視をして、変更があれば常にコンパイルやフォーマット、ファイル圧縮などが実行されるよう構築してみました＾＾

これでコーディングしながらフォーマットや圧縮された綺麗なファイルが常に生成されます！
Gulpまじですごい！すごすぎる！！

まとめ

以上、第1〜3回目まででGulpを学習していきました。
正直自分はGulpを知る前まではGulpを使うメリットが全然わからなかったんですが、今回一から構築して自分で動かしてみて利点がすごくわかりました。
というかむしろお仕事するならファイル圧縮やフォーマット処理など全部必須ですよね！笑
これを知らずしてお仕事しようとしていた自分が恥ずかしいくらいです😅

現在、案件獲得に日々動いていますが、最低限のGulpを習得したことでかなり自信がつきました！
クライアントさんにもここまで気遣って仕事できますよって言えれば信頼も勝ち取れそうな気がします。

第1〜3回までの記録が皆さんのご参考になれば幸いです。
デイトラ実務編のGulp学習では中級編で作ったサイト、上級編で作ったWordPressサイトへの適用のさせ方も解説されていますので、デイトラでGulpを習得していってください！