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

れもも

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

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

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

れもも

それではいってみよう✊

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

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

Sassのコンパイル

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

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にコンパイルされるか確認していきます。

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

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

みかんちゃん

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

れもも

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

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

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

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

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

みかんちゃん

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

れもも

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

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

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

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

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

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

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

次に「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に下記のように記述したスタイルにちゃんとベンダープレフィックスが付与されるのか確認していきます。

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

みかんちゃん

これはすごい便利だ！！

れもも

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

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

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

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

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

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

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

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

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

"browserslist": [
    "defaults",
    "not IE 11"
  ]

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

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

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

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

//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パターン用意されています。

//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さんはアルファベット順を推奨しているようですが、自分はこの３パターンの中だとSMACCS順が一番みやすいかなと思うので今回はその設定にします。

れもも

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

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

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

②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です！

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

次に「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」１つのみしかコンパイル対象になっていません。
これをsrcフォルダ内全てのscssファイルを対象にする場合は、「＊(アスタリスク)」を使って、「./src/＊.scss」と記述すればどの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」と記述すれば下の階層まで対象に含めることができます。

//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」を記述しています。

みかんちゃん

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

コマンドの登録

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

wacthの起動

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

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

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

れもも

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

まとめ

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

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