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

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

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

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

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

手順は以下です。

  • 1.Node.jsをインストールする
  • 2.package.jsonファイルの作成
  • 3.gulpインストール
  • 4.必要なモジュールのインストール
  • 5.gulpfile.jsの作成
  • 6.コンパイルの実行

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を使うまでの手順]を元にして書いています。より詳しく知りたいという方は、ぜひ読んでみてください。

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

松井 貴史

松井 貴史

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

類似記事

何をやるかより、誰とやるかで決まる!

すぐにでも実践できる!名刺の作り方と考え方

ブランドを食らう旅 古湯温泉 オンクリ

仕事でひと山超えた時は古湯温泉オンクリに行こう

入江開発室のパトロン&メンバーになりました。

入江開発室のパトロン&メンバーになりました。