Sassの導入とgulp4でコンパイルして自動監視する方法

Pocket

最近までwebのコーディングはcssだけで書いていましたが、やはり効率が悪いなと思いSassを導入致しました。

通常のcssだと同じクラス名を何度も書いたりと記述もくどく、やたらと長くなりがちです。Sassを導入する事でネスト構造で書くことができるため、何度も同じ記述を書かなくて済みます。

Sassを使う場合には、cssにコンパイルして使う必要があります。コンパイル方法はいくつか存在しているのですが、今回はgulpでの変換を記事にしています。

以前、プロジェクトの関係上でSassを使っていたので、gulp自体は一度は導入済みですが、バージョンがgulp4になった事で書き方が変わりエラーを吐いてしまいました。Sassを使ってなおかつgulpでという方であればこの記事の内容通りに進めていくと、導入完了ができます。

手順は以下です。

Node.jsをインストールする

まずは、gulpを使うためには、Node.jsをインストールする必要があります。Node.jsは公式サイトよりダウンロードできますので、公式サイトから「最新版」をインストールします。

公式HPはコチラから

package.jsonファイルの作成

ターミナルやコマンドラインを開き、gulpを導入する予定のフォルダまで移動し、以下を実行すると、ファイルが作成されます。実行する際に、name,descriptionなどを尋ねられますが、特に指定がない場合は、そのまま実行して大丈夫です。

npm init -y

gulpインストール

gulpを実行するために、package.jsonを作成した時と同様に、gulpを導入する予定のフォルダにgulpをインストールします。

npm install -D gulp

必要なモジュールのインストール

gulpとともに、Sassをコンパイルをするためのgulp-sassを同時にインストールします。

npm install -D gulp gulp-sass

gulpfile.jsの作成

それからgulpでSassをcssに置き換える際に必ず必要になるのがgulpfile.jsです。忘れずにgulpfile.jsを作成しましょう。ファイルは新規でgulpfile.jsを作成し下記を記述し保存します。ファイルの保存場所は、gulpを導入するフォルダ内に作成してください。

const { src, dest, watch } = require("gulp");
const sass = require("gulp-sass");

const compileSass = () =>
  src("sass/style.scss")
    .pipe(
      sass({
        outputStyle: "expanded"
      })
    )
    .pipe(dest("css"));

const watchSassFiles = () => watch("sass/style.scss", compileSass);
exports.default = watchSassFiles;

ファイル内の説明

では、上記が何をやっているのかの説明です。

require("gulp")でgulpのプラグインを読み込んでいます。

const { src, dest, watch } = require("gulp");

require("gulp-sass")でgulp-sassのプラグインを読み込んでいます。

const sass = require("gulp-sass");

src("sass/style.scss")でsassファイル内にあるstyle.scssを取得します。

src("sass/style.scss")

.pipe()は処理を繋げる処理を実行しています。

.pipe()

.sass()メソッドのコンパイル時のオプションを表し展開しています。cssを吐き出す時これで通常のcssを書くときのように改行処理が実行されます。

sass({
        outputStyle: "expanded"
      })

dest("css")でcssに書き出し処理を行なっています。

.pipe(dest("css"));

.wacth("sass/style.scss", compileSass)でファイルを監視して、変更があったらsassファイルを更新しています。

const watchSassFiles = () => watch("sass/style.scss", compileSass);

npx gulpを実行した時に、watchSassFilesを実行するようにしています。

exports.default = watchSassFiles;

コンパイルの実行

gulpfile.jsを作成して下記で自動監視が始まります。自動監視が始まり指定のファイルにcssが吐き出されれば導入完了です。

npx gulp

本文の元ネタ

本文は[絶対つまずかないGulp 4入門(2019年版)インストールとSassを使うまでの手順]を元にして書いています。より詳しく知りたいという方は、ぜひ読んでみてください。

今回は自分の備忘録としてまとめたのものでもあるので、リンク元を一度確認しておく方が理解が深まります。

PROFILE

松井貴史

松井貴史

1984年熊本生まれ。RUBYDESIGN.代表
プロダクトに関わるUI設計が得意です。デザインだけではなく、現在エンジニアリング部分などにも領域を広げています。物と物をsnsで繋ぐマッチングサービスmonocrewを運営。