Sassの導入とgulp4でコンパイルして自動監視する方法
最近までwebのコーディングはcssだけで書いていましたが、やはり効率が悪いなと思いSassを導入致しました。
通常のcssだと同じクラス名を何度も書いたりと記述もくどく、やたらと長くなりがちです。Sassを導入する事でネスト構造で書くことができるため、何度も同じ記述を書かなくて済みます。
Sassを使う場合には、cssにコンパイルして使う必要があります。コンパイル方法はいくつか存在しているのですが、今回はgulpでの変換を記事にしています。
以前、プロジェクトの関係上でSassを使っていたので、gulp自体は一度は導入済みですが、バージョンがgulp4になった事で書き方が変わりエラーを吐いてしまいました。Sassを使ってなおかつgulpでという方であればこの記事の内容通りに進めていくと、導入完了ができます。
手順は以下です。
require(“gulp-sass”)でgulp-sassのプラグインを読み込んでいます。
src(“sass/style.scss”)でsassファイル内にあるstyle.scssを取得します。
.pipe()は処理を繋げる処理を実行しています。
.sass()メソッドのコンパイル時のオプションを表し展開しています。cssを吐き出す時これで通常のcssを書くときのように改行処理が実行されます。
dest(“css”)でcssに書き出し処理を行なっています。
.wacth(“sass/style.scss”, compileSass)でファイルを監視して、変更があったらsassファイルを更新しています。
- 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 -ygulpインストール
gulpを実行するために、package.jsonを作成した時と同様に、gulpを導入する予定のフォルダにgulpをインストールします。npm install -D gulp必要なモジュールのインストール
gulpとともに、Sassをコンパイルをするためのgulp-sassを同時にインストールします。
npm install -D gulp gulp-sassgulpfile.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");const sass = require("gulp-sass");src("sass/style.scss").pipe()sass({ outputStyle: "expanded" }).pipe(dest("css"));const watchSassFiles = () => watch("sass/style.scss", compileSass);npx gulpを実行した時に、watchSassFilesを実行するようにしています。
exports.default = watchSassFiles;コンパイルの実行
gulpfile.jsを作成して下記で自動監視が始まります。自動監視が始まり指定のファイルにcssが吐き出されれば導入完了です。npx gulp本文の元ネタ
本文は[絶対つまずかないGulp 4入門（2019年版）インストールとSassを使うまでの手順]を元にして書いています。より詳しく知りたいという方は、ぜひ読んでみてください。 今回は自分の備忘録としてまとめたのものでもあるので、リンク元を一度確認しておく方が理解が深まります。
松井 貴史
顧問・パートナー型の受託専門WEBデザイナー兼ディベロッパー。UXUI改善運用からWEBシステム開発までワンストップで提供しています。自身でもデザイナー発！個人開発者として日々の気づき、アクション、考え、ノウハウをTwitterで発信中。オンラインゲームSAKETUMA開発
