Sass+gulpで効率化

「gulp」を使用したSassをコンパイルを解説していきます。

「Sassはコンパイルが面倒くさい」

「もっと楽に開発したい」

そんな方はぜひ記事を見て使用を検討してください。

Sassの使用方法などについては「Sassは便利なのか」から確認してください。

前提として

〇Node.jsがインストールされている

〇Windows、Macどちらでも可

とします。

gulpを使用できるようにする

まずは、コマンドからgulpを使用できるように「gulp-cli」をインストールします。

下記コマンドを入力してください。

>npm install --global gulp-cli

グローバルでインストールを行ったため、どのディレクトリでも「gulp」コマンドが利用できます。

インストールがされているか確認してみましょう。

>gulp -v
CLI version: 2.3.0

バージョンが下に表示されていれば正常にインストールされています。

次に開発環境を整えていきます。

プロジェクト用のフォルダを用意してください。（何も入っていないフォルダで問題ありません。）

「cd 」と入力し、作成したフォルダをコマンド画面にドロップしましょう。

フォルダのパスが反映されます。

>cd　作成しフォルダパス

実行すると作成したフォルダに移動することができます。

「>」の前の部分が先ほどと変わっているはずです。

次はプロジェクトの作成を行います。

package.jsonを作成します。

>npm init -y
{
  "name": "sass-sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

上のコマンドを実行すると「package.json」ファイルが作成されます。

作成したフォルダを開いてみるとしっかり表示されているはずです。

「package.json」にはプロジェクトの情報が記載されています。必要がある場合は変更します。

次はgulpパッケージをインストールします。

>npm install --save-dev gulp

「gulpパッケージを開発環境にインストールしてね」という命令です。

やや時間がかかりますが、インストールが完了すると思います。(WARNが出るかもしれないですが、ERRORが出ていなければ大丈夫です。)

もう一度作成したフォルダを見てみましょう。

「node_modules」というフォルダが作成されていると思います。

続けてgulp-sassパッケージをインストールします。

>npm install --save-dev gulp-sass

「gulp-sassパッケージを開発環境にインストールしてね」という命令です。

gulpパッケージの時のように少し時間がかかります。

ここで、先ほどの「package.json」を見てみましょう。

"devDependencies": {
    "gulp": "^4.0.2",
    "gulp-sass": "^4.1.0"
  }

という項目が増えていると思います。

「–save-dev」オプションを使用した場合このように「package.json」に「パッケージ名」「バージョン」が記載されます。

次はgulpを使用するための「gulpfile.js」を作成します。

「gulpfile.js」は「package.json」と同じ階層に配置してください。

「gulpfile.js」は以下のを記述してください。(gulp-sassのページから引用しています。)

var gulp = require( 'gulp' );
var sass = require( 'gulp-sass' );

gulp.task( 'sass', function() {
	return gulp.src( './scss/**/*.scss' )
		.pipe( sass( { outputStyle : 'expanded' } ) )
		.pipe( gulp.dest( './css' ) );
});

順に見ていきます。

var gulp = require( 'gulp' );
var sass = require( 'gulp-sass' );

上の記述はパッケージの呼び出しを行う記述です。

gulp.task( 'sass', function() {
});

上の記述はタスク名を「sass」とし、「sass」が呼び出された場合にはfunction()を実行するという記述になります。

gulp.src( './scss/**/*.scss' )
		.pipe( sass( { outputStyle : 'expanded' } ) )
		.pipe( gulp.dest( './css' ) );

上の記述「gulp.src( ‘./scss/*/.scss’ )」ではSassファイルの場所を示しています。

「gulpfile.js」と同じ階層の「sass」フォルダ下のすべてのsassファイルを対象としています。

（「scss」フォルダを作成しましょう。）

「.pipe( sass( { outputStyle : ‘expanded’ } ) )」はcssの出力形式です。今回はここは触れません。

「.pipe( gulp.dest( ‘./css’ ) )」はSassファイルがコンパイルされたcssファイルが出力される場所を指定しています。

（「css」フォルダを作成しましょう。）

以上で準備が整いました。コンパイルができる環境です。

最初に作成下フォルダは以下のようになっているはずです。

-作成したフォルダ |_css |_node_modules |_scss |_gulpfile.js |_package.json

早速タスクを実行し、Sassファイルをコンパイルしてみましょう。

gulpでタスクを実行する

コンパイルするための「sample.scss」を用意します。(内容は「scss記法」で書かれていればなんでもOKです。)

例では以下を記述しています。

.example {
    color: black;
    
    .sample {
        background-color: black;
        color: white;
    }
}

「scss」フォルダ内に配置してください。

以下の命令でコンパイルを行います。

>gulp sass

「gulp (gulpfile.jsで記載したタスク名)」でタスクを実行することができます。

実行が完了すると

[11:02:12] Using gulpfile ~\Desktop\sass-sample\gulpfile.js
[11:02:12] Starting 'sass'...
[11:02:13] Finished 'sass' after 25 ms

上記のように表示がされるはずです。

また、「css」フォルダに「sample.css」のようにcssファイルが作成されているはずです。

もし、作成されていない場合はどこかの手順が間違っているか、scssファイルのコンパイルエラーが起こっています。

エラーを参考にして、誤字、脱字、フォルダ階層、現在位置を確認しましょう。

以上で、コンパイルを行うことができました。

同様の手順で開発環境をWebサイト内で構築することができます。

しかし、毎回コンパイルの分をコマンド画面から実行しなくてはいけないのは手間ですね。

そこで、監視用のタスクを作成し、sassファイルに変更があった際に自動でコンパイルを行うようにしたいと思います。

コンパイルを自動化する

コンパイルを自動化するために新しくタスクを作成します。

「gulpfile.js」に以下を追記してください。

gulp.task( 'sass:watch', function() {
	gulp.watch( './scss/**/*.scss', gulp.series(['sass']) );
});

「gulp.watch」の一つ目の引数には「監視対象のフォルダ」、二つ目の引数には「実行するタスク名」を指定しています。

「sass」というタスクはコンパイル実行するタスクでした。

なので、「scss」フォルダ下の「scss」ファイルに変更があった場合にはタスク「sass」を実行する。

ということになります。

追加出来たら早速コマンドを入力します。

>gulp sass:watch

実行すると以下のようになります。

[11:20:20] Using gulpfile ~\Desktop\sass-sample\gulpfile.js
[11:20:20] Starting 'sass:watch'...

startのままでfinishしていない状態です。

この状態が監視中ということになります。

試しに、sassファイルを変更し、保存を行うとすぐに

[11:21:31] Starting 'sass'...
[11:21:31] Finished 'sass' after 55 ms

といったようにタスクが実行されます。

開発の際にはこの状態にしておくと確認などがスムーズにできます。

また、中断する際には「ctrl+c」で「ジョブを終了しますか」と聞かれますので「Y」で終了できます。

まとめ

sassを監視させて自動でコンパイルするようにしておくと、

「CSSよりはかどるな～」

と心から思えると思います。

上記の説明ではコンパイルするための最低限のパッケージ「gulp」「gulp-sass」しかインストールしていません。

実は他にも便利なパッケージがいろいろあります。

それらを使用するともっと「Sass」が簡単に書けるようになります。

効率化を極めたい人はいろいろ調べてみてください。

本で学びたい方へ

Web制作者のためのSassの教科書

sassを学ぶ手順がわかりやすく書かれています。

また、コマンド画面が苦手な人に向けてのフォローもしてくれています。

基礎の説明に加えて実践で使用していくための例やgulpの設定などすぐに使えるテクニックが盛り込まれています。

CSS設計完全ガイド

css設計のための本です。

CSSで後からの追加や修正などで痛い目を見たことある人は必見です。

現在あるCSS設計の説明に加えて実際に使用されることの多いコンポーネント(モジュール)単位でのCSS例が多く盛り込まれています。