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

web制作
記事内に広告が含まれています。
れもも
れもも

プロフィール
れもも(@lamoneido)と申します。
2021/12〜本業休職をきっかけにweb制作の学習を始めました。先日デイトラweb制作コースの卒業制作を終え、現在は個人で案件獲得に向け活動中です。
これからshopifyコースも控えています^^

れももです。
今回もデイトラ実務編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です!

package.jsonを確認

②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ファイルが対象となるように記述しています。
「*」の使い方がわからない方は前回の記事で少し解説していますのでご参考にしてください。

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

<オプションについて>
indent_size … 

 →名の通りインデントのサイズの設定。デフォルトのサイズは「4」。

indent_with_tabs … 
→インデントをタブで付けるかスペースで付けるかの設定。デフォルトは「false」。
※true=タブでインデント、false=スペースでインデント

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

参考(npm公式):https://www.npmjs.com/package/gulp-html-beautify

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

コマンドの登録

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

③タスクの実行

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

scrフォルダの中のindex.htmlの記述内容

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

publicフォルダに生成されたindex.html
めろろ
めろろ

これはすごい!
コーダーさんには必須の機能ですね!

ブラウザの立ち上げ

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

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

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

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

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

pavkage.jsonの確認

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

次に「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の内容とか変更してもブラウザに反映されない、、、

れもも
れもも

そうなんです!
なので次で「リロード」の設定をしてあげることでファイル変更されたら都度リロードして反映される状態にしていきます^^

ブラウザのリロード

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

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

1.ブラウザの立ち上げと同時に「watch」も起動させる
→ファイルを監視して、変更があったらリロードするという流れにするため

 

2.「ファイル変更に関する処理が完了したら」→「リロード」という処理の流れに設定
→ファイルの変更が正しく処理された後にリロードして反映される流れにする
例)Sassコンパイルされた後にリロード、HTMLフォーマットされた後にリロード

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

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

exports.dev = gulp.parallel(browserInit, watch);//browserInitとwatch同時起動を登録
<同時起動させるためのコード>
gulp.parallel([処理①],  [処理②], [処理③])

→「gulp.parallel」の括弧内に同時に起動させたい処理を記述すればOK!

今回は「dev」という名前を付けてexportsで登録しています。これで「npx gulp dev」で実行すれば同時に起動される。

実行してみると、「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();
}
<gulp.seriesの記述>
gulp.watch(“[フォルダパス指定]”, gulp.series([1番目の処理], [2番目の処理]));
→gulp.seriesを使用することで括弧の左から順に処理が実行されるようになる

 

今回の記述だとscssファイルに変更があったら、まずSassのコンパイル(compileSass)が実行され、その後にブラウザリロード(browserReload)が実行される流れとなる。

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

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

明示的な終了を入れよう

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

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

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

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

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

ここまでくるとかなり出来上がってきましたね!

めろろ
めろろ

Gulpはこうやって簡単に開発環境を整えられるのが魅力なんだね!

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つをインストールしてください。

<それぞれのパッケージについて>
・gulp-clean-css

→cssファイルを圧縮するパッケージ


・gulp-uglify

→jsファイルを圧縮するパッケージ

・gulp-rename
→圧縮ファイルに「.min」拡張子をつけるパッケージ

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

package.jsonの確認

②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共にファイル圧縮されていることがわかります。

めろろ
めろろ

ファイル監視してこれも自動で生成されるようにしておけば、常に圧縮ファイルも作れるんだね!

れもも
れもも

こうやって一回作ってしまえば他のプロジェクトでも使えるのでほんと便利ですよね!
次の章でフォルダの整理と別プロジェクトでの使い回しの仕方を見ていきます😊

めろろ
めろろ

いよいよ完成間近だ(^3^)

フォルダの整理

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

めろろ
めろろ

コーディングしてるとフォルダ内って結構ごちゃごちゃしてくるよね〜😇

れもも
れもも

そうなんですよね、、、
正直このフォルダ整理をデイトラで一例として紹介してくださってとても助かりました😭

フォルダの構成

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

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/"))
}
めろろ
めろろ

間に処理を書かなければそのままファイルを出力してくれるやつだね!
これで本番用フォルダにもimgファイルがちゃんと生成されるね!!

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

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

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

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

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

めろろ
めろろ

フォルダがめちゃくちゃスッキリしたね!
これはみやすい!

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

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

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

<使い回しをする際必要なファイル>
 1.gulpfile.js
 2.package.json
 3.その他設定ファイル

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

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

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

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

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

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

めろろ
めろろ

またインストールしないといけないの!?
めんどくさすぎるそれは🥺

れもも
れもも

実は一括でインストールするコマンドがあります!
「npm install」とターミナルに打ち込んで実行するだけでOKです!

めろろ
めろろ

さすがGulpさん!!

一括インストールをしたら「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フォーマット
・Sassのコンパイル
・ベンダープレフィックスの付与
・css記述をSMACCS順に並び替え
・メディアクエリをまとめる
・cssファイル圧縮
・jsファイル圧縮
・jsファイルコピー
・imgフォルダコピー
・ブラウザのリロード
めろろ
めろろ

この処理が常に自動でされるなんてすごすぎる!!

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

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

まとめ

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

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

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

コメント

タイトルとURLをコピーしました