Sass(SCSS)をCSSに変換, コンパイル – gulpの使い方・設定方法【自動化】

こんにちは、ヨロと申します。

今回はSass(Scss)の設定方法という事で「gulp」の導入・設定方法・使い方をまとめました。

「Gulp」 = タスクランナーの1つ

タスクランナーとは「Sass」のコンパイルの自動化や、ファイル保存時のブラウザの自動読み込み、ファイルの圧縮化などを自動で行ってくれるツールでして、

「gulp」とは「Node.js」を使用した「お仕事自動化ツール」のようなもの。

「gulp」を使う事で「Sass」を「CSS」に自動でコンパイルする事はもちろん、他にもいろいろな作業を自動化することが出来、とても便利。

【Node.js】をインストール

まず始めに「Node.js」の推奨版をインストール(https://nodejs.org/ja/)

そうするとこういったファイルがダウンロードされます。

このファイルをダブルクリックし、

「Next」→「Next」で次々進んでインストール

インストールが終わったら、コマンドプロンプトを開いて「node -v」 と入力して「Enter」

画面下にバージョンが表示されるかを確認(数字が表示されればインストールOK)

「Node.js」をインストールすると自動的に「npm」もインストールされる。

コマンドプロンプトで「npm –version」と入力し、バージョンが表示されればOK

package.jsonを作成

デスクトップに任意のフォルダを作成(今回は「test」というフォルダを作成しました)

コマンドプロンプトで「cd desktop」　→　デスクトップに移動

「mkdir test」 – デスクトップにtestというフォルダを作る(自分で手動でフォルダを作ってもOK)

「cd test」　→　testフォルダに移動

※CDとは、フォルダの階層を移動するコマンド

「test」フォルダを作る際にはコマンドプロンプトで必ずしも作る必要はなく、手動で作ってもOK。

フォルダが出来たら、コマンドプロンプトでそのフォルダまで移動し、

コマンドプロンプトで「npm init -y」と入力し「Enter」

「test」フォルダに「package.json」が作られる

Gulpにいろいろな機能を追加していく(パッケージ・プラグインをインストール)

機能を追加する方法は、コマンドプロンプトで「npm install -D」

SassをGulpでコンパイルするためには、

gulp

gulp-sass

の2つが必要になるため、

コマンドプロンプトで「npm install -D gulp gulp-sass」と入力し、gulpとgulp-sassを同時にインストール。

※「-D」は「––save-dev」の略

そうするとフォルダ内に「node_modules」「package-lock.json」の2つのファイルが作られる。

「gulpfile.js」ファイルを作る

※「gulpfile.js」は「index.html」と同じ階層に置く。

「gulpfile.js」に自動化する内容を書いていき、gulpにどんな処理をさせるのかをコントロールする事が出来る。

【gulpfile.jsに書く内容】

/* 「gulpfile.js」に書く内容 */

const gulp = require('gulp'); // gulpプラグインの読み込み

const sass = require('gulp-sass'); // Sassをコンパイルするプラグイン(gulp-sass)の読み込み

gulp.task('default', function () { // style.scssのタスク

  return gulp.src('style.scss') // style.scssファイルを取得 // return gulp.src('css/style.scss')でフォルダに入れてもOK。

    .pipe(sass()) // Sassのコンパイルを実行

    .pipe(gulp.dest('css')); // cssフォルダの中にファイルを保存
});

フォルダ内に「style.scss」を作り、Scssで実際に書いてみる。

そして、上の命令を実行する場合は、コマンドプロンプトで「npx gulp」

そうすると「CSS」フォルダが新たに作られ、中に「style.css」が作られるようになります。

Sassを自動でコンパイルする方法

ただ、毎度毎度コマンドプロンプトで「npx gulp」の処理をするのが面倒だという場合は「Gulp」で自動化させちゃいましょう。

方法は「gulpfile.js」に、

/* 「gulpfile.js」に書く内容 */

const gulp = require('gulp'); // gulpプラグインの読み込み

const sass = require('gulp-sass'); // Sassをコンパイルするプラグイン(gulp-sass)の読み込み

gulp.task('default', function() { // style.scssのタスク

  gulp.watch('css/style.scss', function() { //　自動化したい処理をこの中に書いていく
    gulp.src('css/style.scss')
    .pipe(sass({　 // Sassのコンパイルを実行
      outputstyle: 'expanded' // expandedやnestedやcompressedが使える(nested = 改行, compressed = 1行に圧縮して表示, expanded = 改行)
    })

    .on('error', sass.logError)) // Sassのコンパイルエラーを監視する
    .pipe(gulp.dest('css'));
  });
});

と、書き込む。

そうすれば今後は、最初の１回だけコマンドプロンプトで「npx gulp」と処理する事によって、

「scss」ファイルを更新する度に自動的に「css」ファイルが作られるようになります。

最終的にフォルダの中身はこんな感じ。

この「CSS」フォルダの中に「style.scss」が入っています。

最後に

インターネット上には、自動コンパイルの方法を紹介している記事が沢山あるかとは思いますが、

全て片っ端から試してみても、なぜか上手くいかないという場合も多い、

なのでもし、今回紹介した方法で上手くいかないという人は、

「Koala」や「Prepros」をインストールして使えばOKで、その方が早い。

大切なのは、そこに行き着くまでの方法ではなく「実現させる事」、

もし「実現させる事」が目的なら、方法なんかは何でもよくて、あまり無意味に訳の分からないところにこだわる必要もないし、

下手すると単純に、時間の浪費につながってしまう事も多々あるはず。

もし今後Rubyを使う予定があるのなら「Prepros」を使えば、インストールをする際に、自動的にRubyなどもインストールされるので割と便利かも。

「Koala」も人気(インストール後、上手く開けない事もあるので注意)

「Scss」は最近のWEB制作の現場では「CSS」よりも使われる割合がかなり増えてきているという事で、今後覚えておいて損はないものです。

「CSS」ではなく「Scss」で書く事により、コードもより短く分かりやすくなりますし、

設定の環境さえ構築出来てしまえば「Sass」自体はそう難しいものではありませんので、ぜひ導入しておきましょう。