Sassコンパイルを通して学ぶタスク処理の基本

ここからは、Sassファイルをコンパイルする手順を解説します。SassとGulpの連携を通して、Gulpの理解を深めていきましょう。

次の動画はこのページで解説する手順をまとめたものです。もしわからないことがあれば動画を見直してください。

解説の概略

cssフォルダーに配置したSassファイル(SCSSファイル)を、CSSファイルに変換(コンパイル)してみましょう。Sassには二種類の記法があり、Sass記法とSCSS記法がありますが、この記事ではSCSS記法で紹介します。

タスクの作成

必要なモジュールをnpm install -Dコマンドを使って、ローカルにインストールしましょう。 SassをGulpでコンパイルするためには次の2つのモジュールをインストールします。

  • Gulp本体のgulp
  • Sassファイルをコンパイルする為のプラグインgulp-sass

▼コマンドライン

npm install -D gulp gulp-sass

タスクを作成するには、プロジェクトファイル直下にgulpfile.jsというファイルを作成する必要がありますgulpfile.jsファイルでの処理は、JavaScriptで記述します。

Sassのコンパイル処理は、gulpfile.jsファイルに下記のコードを記述します。

▼gulpfile.jsファイル

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

// style.scssをタスクを作成する
gulp.task('default', function () {
  // style.scssファイルを取得
  gulp.src('css/style.scss')
    // Sassのコンパイルを実行
    .pipe(sass())
    // cssフォルダー以下に保存
    .pipe(gulp.dest('css'));
});

この記述の中で使われているGulpの処理を解説します。

  • require("プラグイン名")
    使用するプラグインを読み込みます
  • gulp.task("タスク名", 実行される処理)
    タスク名と、実際に行われる処理を記述します。タスク名をdefaultにすると、タスク実行時のタスク名を省略できます
  • gulp.src("取得するファイル")
    タスクの対象となるファイルを取得します。複数のファイルも指定できます
  • pipe()
    一つ一つの処理をつなげます。例えば前述のコードでは、src()で取得したSassファイルをコンパイルし、それをgulp.dest()で書き出しています。pipe()メソッドはいくらでもつなげることができるので、連続した複数の処理を実装できます
  • gulp.dest("保存先フォルダー")
    処理を行ったファイルを指定の場所に保存します

タスクの実行

作成したタスクを実行するには、コマンドラインでnpx gulpと入力してEnterを押します。

▼コマンドライン

npx gulp

※記事の冒頭で紹介した通り、Node.jsの最新版をお使いください。npxはnpm v5.2(最新版のNode.jsに同梱されている)から使える新しいコマンドです。参照記事「npxでローカルパッケージを手軽に実行しよう – Qiita」。

タスクを実行すると、cssフォルダーにコンパイルされたCSSファイルが書き出されます。

▼ 変換前のSCSSファイル(css/style.scss)

// ネストのテスト
div {
  p {
    font-weight: bold;
  }
}

// 変数のテスト
$fontColor: #525252;

h1 {
  color: $fontColor;
}

▼ 変換されたCSSファイル(css/style.css)

div p {
  font-weight: bold; }
 
h1 {
  color: #525252; }

ちなみにタスク名をdefaultで指定しましたが、それ以外の名前をつけた場合は、npx gulp (タスク名)で実行します。

オプションの指定

出力されたCSSファイルを見ると、宣言の最終行と中括弧(})が、同一行になっていますが、普段見慣れているのは最終行の中括弧が改行された形式かと思います。出力時の設計のコードを整形するには、次の★部分のようにsass()メソッドでコンパイル時のオプションを{outputStyle: 'expanded'}と指定します。

▼gulpfile.jsファイル

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

// style.scssをタスクを作成する
gulp.task('default', function () {
  // style.scssファイルを取得
  gulp.src('css/style.scss')
    // Sassのコンパイルを実行
    .pipe(sass({
      outputStyle: 'expanded'
    }))
    // cssフォルダー以下に保存
    .pipe(gulp.dest('css'));
});

プラグインはオプション指定で細かく設定できます。どのようなオプションが設定できるかは、プラグインによって異なります。

※ Sassの出力時のコードはexpandedの他にも、nested(ネストがインデントされる)、compact(規則集合毎が1行になる)、compressed(全CSSコードが1行になる)などがあります。

このページで解説したサンプルは、次のGitHubから確認できます。不安な方はダウンロードしてお試しください。

以上で、Gulpを使ったSassのコンパイルができました。最後のページではタスクランナーを使うならば是非覚えておきたいwatch機能を紹介します。