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

2019/10/15

最近まで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を使うまでの手順]を元にして書いています。より詳しく知りたいという方は、ぜひ読んでみてください。今回は自分の備忘録としてまとめたのものでもあるので、リンク元を一度確認しておく方が理解が深まります。

学習技術

松井貴史

フリーランス・副業向けチームビルダーのためのプラットフォーム、MENTION（メンション）開発｜RUBYDESIGN.代表（http://rubydesign.jp）｜デザイナー&エンジニア｜趣味：旅行・サウナ・ポーカー・ワイン｜ビジネスライフハックもたまに｜提携や仕事の相談は気軽にDMください

Follow @matui_takafumi

類似記事

実践型プログラミング学習の始め方。目的、目標の立て方 | 小さなサービスができるまで

2019/5/19

プログラマーはデザイナーと組めば鬼に金棒!!

2018/7/10

デザイナーの僕がプログラミングを学ぶ | GitHub Pageのつくりかた

2018/12/5

デザイナーは、UIデザインに関わりながらプログラムを学べる。

2018/7/5