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

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

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

れももです。
今回もデイトラ実務編Day17の「Gulp」学習記録をしていきます。
前回はGulpのインストール〜簡単な処理の仕方を学びましたので、今回は「Sassコンパイル」「ベンダープレフィックス付与」「ファイル監視」など実用的なGulpでの処理をまとめていきたいと思います。

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

第1弾:【デイトラ実務編 学習記録】Gulpを使ってみよう 「インストール〜簡単な動作実行編」
第2弾:【デイトラ実務編 学習記録】Gulpを使ってみよう 「Gulpでできること前編」 ←今回の記事
第3弾:【デイトラ実務編 学習記録】Gulpを使ってみよう 「Gulpでできること後編」

れもも
れもも

それではいってみよう✊

Gulpでタスクを登録するには

復習になりますが、Gulpでさまざまなタスクを登録して実行していくには、下記のような流れで進めるので改めて確認しておきましょう。

✔️ ①パッケージのインストール
→ターミナルでnpm install –save-dev [パッケージ名]のコードで使用したいパッケージをインストールする。

✔️ 処理コードを記述してタスクを登録
「gulpfile.js」にコードを記述していく。

✔️ コマンドで実行
→ターミナル側で登録したタスクを「npx gulp [タスク名]する。

Sassのコンパイル

Gulpでは、Sassのコンパイルをタスクとして登録することができます。

Sassのコンパイルとは、Sassで記述したファイルをCSSの記述に変換して、指定フォルダにCSSファイルとして保存してくれる作業のことです。

HTMLファイルはSassファイルを直接読めないため、このコンパイルする作業は必須となります。
では、GulpでSassコンパイルのタスクを登録していきましょう^^

①「gulp-sass」と「sass」インストール

まずはターミナルで「gulp-sass」と「sass」のパッケージをインストールしていきます。

今回は「gulp-sass」と「sass」をインストールしたいので、ターミナルに「npm install –save-dev gulp-sass sass」と記述します。

タスク名に半角スペースを開ければ複数同時にパッケージインストールできるので覚えておきましょう!

「package.json」を確認し、「gulp-sass」と「sass」が確認できればインストールOK!

れもも
れもも

うん、少しずつ慣れてきたかな?😅

②Sassコンパイルのタスク登録

次に「gulpfile.js」にSassコンパイルの処理を記述していきます。
コードは下記のように記述します。
※赤枠で囲ってある箇所が今回記述したコードです。

//gulp-sassとsassの読み込み
const sass = require("gulp-sass")(require("sass"));

//Sassコンパイル処理の記述
function compileSass() {
  return gulp.src("./src/style.scss")//コンパイルしたいSassファイル指定
  .pipe(sass())//Sassコンパイルの処理
  .pipe(gulp.dest("./public"))//コンパイル後のcssファイルが格納されるフォルダ
}

//Sassコンパイル処理をコマンドで実行できるよう登録
exports.compileSass = compileSass;

書き方としては、「パッケージ読み込み」→「処理の記述」→「コマンド登録」とった感じです。

パッケージの読み込み

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

処理の記述

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

6行目の「return gulp.src(“./src/style.scss”)」は、コンパイル対象のファイルを指定しています。srcフォルダの中のstyle.scssファイルがコンパイルするSassファイルということですね。

7行目の「.pipe(sass())」は、指定したファイルをコンパイルしてください という記述です。

8行目の「.pipe(gulp.dest(“./public”))」は、コンパイルして生成されたCSSファイルをどのフォルダに保存するか、行き先を指定しています。
この記述ではpublicフォルダに保存してください ということです。

れもも
れもも

これで処理の記述は完了!!

コマンドの登録

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

③タスクの実行

処理の内容が記述できたら実際に処理を実行していきましょう。
今回は確認のために、style.scssに下記のように入れ子で記述した内容がちゃんとstyle.cssにコンパイルされるか確認していきます。

style.scssの記述内容

コマンドで実行するには、「npx gulp [コマンド名]」なので今回は「npx gulp compileSass」と記述すれば実行できるはずです。

ターミナルでタスク実行するには、「npx gulp [コマンド名]」入力する。
ターミナル画面 「npx gulp com;ileSass」で実行

すると、publicフォルダの中にstyle.cssが生成され、その中を見るとちゃんとコンパイルされたことがわかります。

みかんちゃん
みかんちゃん

これっていちいち手動でコンパイルしなきゃいけないの??

れもも
れもも

普通はSassを書き換えたら自動でコンパイルして欲しいですよね!
後ほどファイル監視をさせることでできるようにしていきます!!

ベンダープレフィックスの自動付与

Gulpではベンダープレフィックスを自動で付与することもできます。

ベンダープレフィックスとは

ベンダープレフィックスとは、ブラウザでサポートしきれていないCSSスタイルに対して、接頭辞をつけることによってどのブラウザでもスタイルが適用されるようにするための仕組みです。

みかんちゃん
みかんちゃん

-webkit-border-radius: 4px;」みたいな感じの記述のやつだよね?

れもも
れもも

そうそう。このborder-radiusはブラウザによってはスタイルが適用されないかもしれないので「-webkit-」の接頭辞がついて適用されるようにしているんですね。

ちなみに接頭辞の種類はいくつかあって、ちゃんとブラウザを指し示す単語になっています。

<各接頭辞はブラウザを指し示している>
・「-webkit-」 ⇨  Chrome / Safari
・「-ms-」    ⇨  IE
・「-moz-」  ⇨  Firefox / Mozilla

こんな感じで、いちいちどのスタイルにベンダープレフィックスをつけなきゃいけないとかはやってられないので、Gulpを利用して自動で判断してベンダープレフィックスをつけてコンパイルしてもらえばいいわけです。

①「autoprefixer」と「postcss」、「gulp-postcss」インストール

パッケージのインストールはいつもの通りです。
今回は「postcss」と「gulp-postcss」、「autoprefixer」の3つをインストールしたいので、ターミナルに「npm install –save-dev postcss gulp-postcss autoprefixer」と記述します。

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

package.jsonを確認

②ベンダープレフィックス付与のタスク登録

次に「gulpfile.js」にベンダープレフィックス付与の処理を記述していきます。
コードは下記のように記述します。
※赤枠で囲ってある箇所が今回記述したコードです。

//gulp-postcssの読み込み
const postcss = require("gulp-postcss");
//autoprefixerの読み込み
const autoprefixer = require("autoprefixer");

//Sassコンパイル処理の記述
function compileSass() {
  return gulp.src("./src/style.scss")//コンパイルしたいSassファイル指定
  .pipe(sass())//Sassコンパイルの処理
  .pipe(postcss([autoprefixer()]))//ベンダープレフィックス付与
  .pipe(gulp.dest("./public"))//コンパイル後のcssファイルが格納されるフォルダ
}

ベンダープレフィックスの付与は、Sassのコンパイルと一緒に行えば良いので、今回は「compileSass」の処理の中にベンダープレフィックスの処理を記述しています。

パッケージの読み込み

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

処理の記述

今回はSassのコンパイルと一緒にベンダープレフィックス付与を行うようにするので、「compileSass」の中に処理の内容を1行追記しています。

「.pipe(postcss([autoprefixer()]))」がベンダープレフィックス付与の記述です。

③タスクの実行

それでは実際に処理を実行していきましょう。
今回は、style.scssに下記のように記述したスタイルにちゃんとベンダープレフィックスが付与されるのか確認していきます。

https://github.com/postcss/autoprefixerよりデモの記述を引用

コマンドの実行は、「npx gulp compileSass」でOKです。
style.cssを見てみると、接頭辞がちゃんとついていることがわかります。

みかんちゃん
みかんちゃん

これはすごい便利だ!!

れもも
れもも

Gulpの利点がだんだんわかってきた気がしますね!!

補足1:対象ブラウザの変更

ベンダープレフィックスについては、条件を決めることができます。
どのブラウザをカバーするかみたいなことですね。

通常の設定はどのブラウザが対象なの?

デフォルトの設定ではどのブラウザが対象か確かめる方法があります。
ターミナルで「npx autoprefixer –info」と記述して実行すれば一覧が出てきます。

ターミナルで「npx autoprefixer –info」を実行すればどのブラウザのどのバージョンが対応されているのか一覧で見れる。

案件によってブラウザ対応条件を変えれる

案件によっては、デフォルトの設定では対応不十分であったり省いても良い項目があったりする場合は条件を変更できます。

条件をつけるには、「.browserslistrc」または 「package.json」 条件を記述する必要があります。

Autoprefixerの設定条件は、「.browserslistrc」または 「package.json」 に追記する。

自分は「package.json」に下記内容を追記してみました。
デフォルトの設定に「not IE 11」でIEを条件から外しました。

"browserslist": [
    "defaults",
    "not IE 11"
  ]
IEが条件から除外されている

逆にIE10も対応させたい場合は、「IE >= 10」を追記します。

補足2:IEをCSS-Gridに対応させる

IEはグリッドに対応していませんが、autoprefixerに条件を追加すればIEでもグリッドが反映されるようになります。
gulpfile.jsの「autoprefixer()」の括弧内に「

IEはグリッドに対応していませんが、autoprefixerに条件を追加すればIEでもグリッドが反映されるようになります。
gulpfile.jsの「autoprefixer()」の括弧内に「{ grid: true }」を追記すればOKです。

IEでもグリットに対応させたい場合は、「autoprefixer({ grid: true })」と記述すればよい。
※デフォルトの設定では、「grid: false」のため
//Sassコンパイル処理の記述
function compileSass() {
  return gulp.src("./src/style.scss")//コンパイルしたいSassファイル指定
  .pipe(sass())//Sassコンパイルの処理
  .pipe(postcss([autoprefixer({ grid: true })]))//ベンダープレフィックス付与
  .pipe(gulp.dest("./public"))//コンパイル後のcssファイルが格納されるフォルダ
}

CSSプロパティの並び替え

続いて今度は、CSSプロパティの並び替えをおこなっていきます。
メンテナンス性を高めるためにはこちらも適切な並び替えをして納品するのがマストですね。
自分はまだここまで手をかけられていなかったのでこの機会にしっかり設定しておきました。

CSSプロパティの適切な並び順は?

今回使用するパッケージは「CSS Declaration Sorter」というものなんですが、順序は3パターン用意されています。

参考:https://www.npmjs.com/package/css-declaration-sorter
<CSSプロパティの順序>
・アルファベット順
→単純にアルファベットa〜zの順番。

・SMACCS
→SMACCSによるCSS設計に基づいた順番。SMACCSについて自分も少ししか知りませんが影響度の高いプロパティ順に並んでいるイメージです(下記に例あり)。

・Concentric CSS
→うまく説明できてるかわかりませんが、こちらはボックスの外側に対するプロパティから内側に対するプロパティ順に並んでいるイメージです(下記に例あり)。

//SMACCSの順序
.test {
    display: flex;
    position: retative;
    width: 100%;
    max-width: 800px;
    margin: 60px auto;
    padding: 40px;
    border-bottom: 1px solid #333;
    border-radius: 4px;
    background: #FFF;
    color: #333;
    font-size: 18px;
    text-align: center;
    opacity: 1;
    transition: all .3s;
}
//ConcentricCSSの順序
.test {
    display: flex;
    position: retative;
    opacity: 1;
    transition: all .3s;
    margin: 60px auto;
    border-bottom: 1px solid #333;
    border-radius: 4px;
    background: #FFF;
    padding: 40px;
    width: 100%;
    max-width: 800px;
    color: #333;
    font-size: 18px;
    text-align: center;
}

順序は案件に合わせたり自分の好みに設定すればOKだと思います。
Googleさんはアルファベット順を推奨しているようですが、自分はこの3パターンの中だとSMACCS順が一番みやすいかなと思うので今回はその設定にします。

れもも
れもも

アルファベット順だと「width」と「max-width」みたいな関係性が高いプロパティが離れちゃうんでなんか違和感ですよね、、、

①「css-declaration-sorter」インストール

ターミナルに「npm install –save-dev css-declaration-sorter」と記述しインストールします。
package.jsonを確認してインストールされていればOKです!

package.jsonを確認

②CSSプロパティ順のタスク登録

次に「gulpfile.js」にCSSプロパティ順の設定を記述していきます。
コードは下記のように記述します。
※赤枠で囲ってある箇所が今回記述したコードです。

//css-declaration-sorterの読み込み
const cssSorter = require("css-declaration-sorter");

//Sassコンパイル処理の記述
function compileSass() {
  return gulp.src("./src/style.scss")//コンパイルしたいSassファイル指定
  .pipe(sass())//Sassコンパイルの処理
  .pipe(postcss([autoprefixer({ grid: true }), cssSorter({
    order: "smacss"
  })]))//ベンダープレフィックス付与とCSSプロパティ順序指定
  .pipe(gulp.dest("./public"))//コンパイル後のcssファイルが格納されるフォルダ
}

パッケージの読み込み

インストールした「css-declaration-sorter」を読み込んであげてください。

処理の記述

「css-declaration-sorter」は、postcssに関係するパッケージのため、postcss()の括弧内に追記しています。

順序は今回SMACSSの順序にしたいので、「order: “smacss”」と順序指定しています。

③タスクの実行

それでは実際に処理を実行していきましょう。
今回は、style.scssに下記のように順序バラバラに記述したプロパティの順序がちゃんと整理されるか確認していきます。

コマンドの実行は、「npx gulp compileSass」でOKです。
style.cssを見てみると、ちゃんと順番が整理されていることがわかります。

れもも
れもも

Gulpを実行すると毎回「お〜!!すげぇ!!」って言いながらやってました😂
こんな素人でも簡単にこんなことできちゃうなんて普通にすごいですよね!

CSSメディアクエリの並び替え

続いてメディアクエリの並び替えです。
デフォルトではこのように、通常の指定のすぐ下にメデイアクエリが記述される順序になっています。

コンパイル前
コンパイル後

これをメデイアクエリの指定はまとめて記述されるように設定していきます。

①「gulp-merge-media-queries」インストール

ターミナルに「npm install –save-dev gulp-merge-media-queries」と記述しインストールします。
package.jsonを確認してインストールされていればOKです!

package.jsonの確認

②メディアクエリ順序のタスク登録

次に「gulpfile.js」にメディアクエリ順序の設定を記述していきます。
コードは下記のように記述します。
※赤枠で囲ってある箇所が今回記述したコードです。

//gulp-merge-media-queriesの読み込み
const mmq = require("gulp-merge-media-queries");

//Sassコンパイル処理の記述
function compileSass() {
  return gulp.src("./src/style.scss")//コンパイルしたいSassファイル指定
  .pipe(sass())//Sassコンパイルの処理
  .pipe(postcss([autoprefixer({ grid: true }), cssSorter({
    order: "smacss"
  })]))//ベンダープレフィックス付与とCSSプロパティ順序指定
  .pipe(mmq())//メディアクエリ順序指定
  .pipe(gulp.dest("./public"))//コンパイル後のcssファイルが格納されるフォルダ
}

パッケージの読み込み

インストールした「gulp-merge-media-queries」を読み込んであげてください。

処理の記述

今回もSassコンパイルの処理と一緒に行う形にしたいので、「.pipe(mmq())」を1行で追加するだけでOKです。

③タスクの実行

それでは実際に処理を実行していきましょう。
先ほどのメデイアクエリの記述がちゃんとまとまって出力されるかみていきます。

今回もコマンドの実行は、「npx gulp compileSass」でOKです。
style.cssを見てみると、下の方にメディアクエリがまとまって出力されていることがわかります。

全てのSassファイルをコンパイル対象にする方法

ここでファイルパスの指定について見直していきます。

現状では指定した「style.scss」1つのみしかコンパイル対象になっていません。
これをsrcフォルダ内全てのscssファイルを対象にする場合は、「*(アスタリスク)」を使って、「./src/*.scss」と記述すればどのscssファイルもコンパイルしてくれるようになります。

return gulp.src(“./src/*.scss”)
//Sassコンパイル処理の記述
function compileSass() {
  return gulp.src("./src/*.scss")//コンパイルしたいSassファイル指定
  .pipe(sass())//Sassコンパイルの処理
  .pipe(postcss([autoprefixer({ grid: true }), cssSorter({
    order: "smacss"
  })]))//ベンダープレフィックス付与とCSSプロパティ順序指定
  .pipe(mmq())//メディアクエリ順序指定
  .pipe(gulp.dest("./public"))//コンパイル後のcssファイルが格納されるフォルダ
}

ただしこれでは、srcフォルダの中にもう一つフォルダが作られるとその中のscssファイルまではコンパイル対象になりません。

上記のように一つ下のフォルダまで対象に含めるには「./src//*.scss」と記述すれば下の階層まで対象に含めることができます。

return gulp.src(“./src/**/*.scss”)
//Sassコンパイル処理の記述
function compileSass() {
  return gulp.src("./src/**/*.scss")//コンパイルしたいSassファイル指定
  .pipe(sass())//Sassコンパイルの処理
  .pipe(postcss([autoprefixer({ grid: true }), cssSorter({
    order: "smacss"
  })]))//ベンダープレフィックス付与とCSSプロパティ順序指定
  .pipe(mmq())//メディアクエリ順序指定
  .pipe(gulp.dest("./public"))//コンパイル後のcssファイルが格納されるフォルダ
}
れもも
れもも

とりあえずこの記述にしておけば問題なさそうですね^^

ファイル変更を監視する(Watch)

次はファイル監視を設定していきます。
今のところいちいち手動でターミナルで実行しないとコンパイルしてくれないので、これでは不便です。
Sassファイルを書き換えたら都度自動でコンパイルされるようにしていきます。

watchのタスクを登録

今回はパッケージのインストールは特になく早速「gulpfile.js」にwatchの設定を記述していきます。
コードは下記のように記述します。
※赤枠で囲ってある箇所が今回記述したコードです。

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

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

処理の記述

今回は新たに「 watch」という名前をつけてファイル監視の処理を記述しています。

監視対象のファイルは「./src/**/*.scss」 srcフォルダの中の全てのscssファイル、そのファイルが更新された時の処理は、これまでタスク登録した「compileSass」を記述しています。

function watch() { gulp.watch(“第一引数“, 第二引数); }

第一引数:監視対象のファイル指定
第二引数:指定したファイルが更新されたときの処理

みかんちゃん
みかんちゃん

こうすればscssファイルを更新したら自動で登録したコンパイルのタスクを自動でやってくれるんだね!

コマンドの登録

今回は新たに「watch」で処理を記述しているのでexportsでコマンド登録しましょう。
コマンド名も「watch」で登録しています。

wacthの起動

続いてwatchを起動して自動でコンパイルされるか確かめてみます。

まず、ターミナルに「npx gulp watch」と記述して実行すると「Starting ‘watch’…」と表示され、ファイル監視してる状態になります。

「npx gulp watch」を起動するとこのようになります

この状態でscssファイルを書き換えてcssファイルを確認するとちゃんと反映されていることがわかります。

れもも
れもも

すごい!こんなファイル監視もこんな簡単にできちゃうんだね!

まとめ

以上、第2回目はこの辺までにします。
ここまででだいぶ構築できてきました!
第3回では今日やったファイル監視に加えて、sassが更新されたらブラウザ画面がリロードされるように設定したり、HTMLのフォーマットを設定したりしていきます。

第3回目までの設定を行えば案件対応でも充分な品質のファイル作れるようになっています!

<次回(第3回)の設定事項>
・ブラウザの立ち上げ(ローカルサーバー)
・ブラウザの自動リロード
・CSS、jsファイルの圧縮
・HTMLフォーマット
・他プロジェクトでの使い回しの仕方

コメント

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