【Polymer Starter Kit】Sassの環境を整える

環境構築

Sassの環境を整えるには、まず「BrowsersyncでWEBサーバー環境を整える」を読んでおいてください。その後ここからリポジトリを自身の環境へクローンしてください。

クローンを作成したら次のフォルダへ移動します:

cd /【任意のフォルダ】/polymer-starter-kits/projects/sass-task

Sassのインストール

SassはRubyで書かれているプログラムなので、まずRubyをインストールしておく必要があります。

Macでのインストール

MacではRubyがプリインストールされているので、Rubyのインストール作業は必要ありません。ターミナルで次のコマンドを実行することでSassをインストールできます:

sudo gem install sass

OSがEl Capitanを含め以降のバージョンだとエラーが発生する可能性があります(エラーが発生する原因は「SassをMac（El Capitan）にインストールした時のエラー回避」を参照ください)。このような場合はインストール先を/usr/binから/usr/local/binに変更します:

sudo gem install sass -n /usr/local/bin

Windowsでのインストール

「Ruby Installer for Windows」から一番上にある最新版をダウンロードしてください。

インストーラーを実行したら、次の画面で赤枠の部分のチェックボックスをオンにします:

f:id:masterpg:20160923115901p:plain

インストールが終わったら、コマンドプロンプトでRubyがインストールされたか確認します:

ruby -v

あとはMacといっしょで、次のコマンドを実行することでSassをインストールできます:

gem install sass

Compassのインストール

ここではCompassのインストールを行いますが、Compassを使用しない方はインストールしなくて構いません。

次の2つのコマンドを実行することでCompassをインストールすることができます。

まずRubyGemsのアップデートを行って最新の状態にします (Windowsの場合sudoは必要ありません) :

sudo gem update --system

次のコマンドで、Compassをインストールします:

sudo gem install compass

OSがEl Capitanを含め以降のバージョンだとエラーが発生する可能性があります。このような場合はインストール先を/usr/binから/usr/local/binに変更します:

sudo gem install compass -n /usr/local/bin

config.rb

Compassの設定を保存する「config.rb」を「gulpfile.js」と同階層に配置します。以下にその内容の抜粋を示します:

【config.rb】

http_path = "/"
images_dir = "images"
javascripts_dir = "src"
#sass_dir = "sass"
#css_dir = "stylesheets"

通常は、Sassファイルの配置先を示すsass_dirと、Sassファイルのコンパイル結果出力先を示すcss_dir、を指定することになりますが、この指定は「gulpfile.js」で行われることになるのでコメント化しています。

gulpfile.jsの内容

プロジェクトルートの直下にあるgulpfile.jsで、Sassに関わる部分を抜粋して説明します。

プラグイン読み込み

今回のタスクに関わるgulpプラグイン読み込み部分の抜粋です:

var path = require('path');
var notify = require('gulp-notify');
var sass = require('gulp-ruby-sass');
var sourcemaps = require('gulp-sourcemaps');
var pleeease = require('gulp-pleeease');

sassタスク

sassタスクでは、Sassをコンパイルする関数sassTask()を呼び出しています。

/**
 * scssファイルのコンパイルを行います(ベンダープレフィックスも付加する)。
 */
gulp.task('sass', function (cb) {
  return sassTask('{styles,src}', '**/*.scss');
});

sassTask()はscssファイルのコンパイルとベンダープレフィックスを付加するための関数で、引数'{styles,src}'は対象のフォルダを2つ指定し、'**/*.scss'は指定されたフォルダ内の全てのscssファイルを対象にするよう指定しています。

Note: プロジェクトルートのsrcフォルダ配下にはscssファイルは含まれていませんが、自身でscssファイルを追加すればコンパイル対象になります。

sassTask()関数

sassTask()関数は、上記のsassタスクで呼び出されている関数になります:

/**
 * Sassのコンパイルを行います。
 * ・scssファイルをcssファイルへコンパイル
 * ・ファイル内で定義されたスタイルにベンダープレフィックスを付加
 * @param sassPath トップフォルダを指定(パスの先頭・末尾に「/」は指定しないこと)
 * @param src トップフォルダ配下のファイルを指定(ファイル名またはグロブを指定)
 */
var sassTask = function (sassPath, src) {
  // Sassコンパイルの設定
  return sass(path.join(sassPath, src), {
    sourcemap: true,  // ソースマップ出力の有無
    style: 'expanded',  // コンパイルされたcssの出力スタイル
    emitCompileError: true,  // コンパイルエラー時にerrorイベントを発生させるかの有無
    compass: false // Compass使用の有無
  })
    // エラー発生時の通知設定
    .on('error', notify.onError(function (error) {
      return "Error: " + error.message;
    }))
    // ベンダープレフィックスを付加
    .pipe(pleeease({
      // ベンダープレフィックス対象のブラウザ、バージョンを細かく指定できる
      autoprefixer: {"browsers": ["last 4 versions"]},
      // 圧縮の有無
      minifier: false
    }))
    // ソースマップの設定
    // (「.」はcssファイルと同じディレクトリにソースマップを出力することを意味する)
    .pipe(sourcemaps.write('.', {
      // ソースマップにソースコードを含めるかの有無
      // (falseを設定した場合はsourceRootを指定する必要がある)
      includeContent: false,
      // sourceRootに「/」を設定し、ソースマップがURLのルートパスを起点に
      // scssファイルを参照するようにする。sourceRootを設定しないと、
      // ソースマップのカレントディレクトリを起点にscssファイルを参照しようとし、
      // 結果として、ソースマップがscssファイルが参照できない状態になる。
      sourceRoot: '/'
    }))
    // コンパイルされたファイルを指定フォルダへ出力
    .pipe(gulp.dest('.tmp'));
};

Sassコンパイルの設定:
compass:ですが、Compassを使用しない方はfalseを設定します。Compassを使用する方はtrueに設定します。
エラー発生時の通知設定:
notifyは処理中エラーが発生した場合、コンソールにエラーを表示しただけでは気づかないこともあるので、デスクトップ通知を表示するプラグインです。
ソースマップの設定:
sourceRoot:に'/'を指定していますが、これがないとソースマップがscssファイルを参照できない状態になってしまいます。ソースマップがscssを参照するイメージをつかみたい方は、生成されたソースマップファイルの中のsourceRoot、sources、file、を見ていただければと思います。
変更の有無:
gulp-ruby-sassプラグインでは、Sassファイルに変更があった場合、キャッシュを使用することでコンパイルのパフォーマンスを確保しているようです (ただし「ベンダープレフィックスを付加」の部分はキャッシュの範囲外です) 。なのでここでは「ベンダープレフィックスを意識せずに開発するための環境を整える - cssTask()関数」のようにgulp-changedプラグインを使用して、変更の有無を判断し、変更があった場合のみ処理を行うといった設定をしていません。

ファイルの変更監視

ここではファイルの変更監視の指定を行います:

gulp.task('serve', ['serve:mock', 'sass'], function () {
  ...
  // 変更を監視するファイルを指定
  gulp.watch(['{styles,src}/**/*.scss'], ['sass', reload]);
});

gulp.watch()の第1引数では監視対象のファイルを指定します。ここでは「styles, src」の2つのフォルダ配下の全ての「scss」ファイルを監視対象に指定しています。

第2引数ではファイル変更変更があった際に実行するタスクを配列で指定します。ここでreloadが指定されると、ファイル変更があった際、自動的にブラウザがリロードされます。

Note: プロジェクトルートのsrcフォルダ配下にはscssファイルは含まれていませんが、自身でscssファイルを追加すれば監視対象になります。

動作確認

Starter Kitを起動する

プロジェクトルートフォルダに移動して、次の2つのコマンドを実行して必要なライブラリをローカルインストールします:

npm install

bower update

次のコマンドでStarter Kitを起動します:

gulp serve

Starter Kitが起動すると、Starter Kitフォルダの直下に「.tmp」フォルダが作成され、この配下にcssとcss.mapファイルが生成されているはずです。

Sassが自動でコンパイルされるか確認する

Starter Kitが起動した状態で、scssファイルにスタイルを追加し、自動でコンパイルされ、ベンダープレフィックスが付加されるか確認してみましょう。

確認用にダミーのスタイルを次のファイルに追加します:

【styles/main.scss】

.dummy {
  display: flex;
}

scssファイルが修正されると、自動でコンパイルされ、.tmpフォルダ配下に出力されるはずです。次のファイルを開いてみてください:

【.tmp/styles/main.css】

.dummy {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

このようにスタイルが追加され、ベンダープレフィックスが付加されていれば成功です!

Compassが自動でコンパイルされるか確認する

ここではCompassが自動でコンパイルされるか確認する方法を示します (Compassを使用している方が対象です) 。

gulpfile.jsのsassTask()関数でCompassを有効にします:

var sassTask = function (sassPath, src) {
  ...
  return sass(path.join(sassPath, src), {
    ...
    compass: true  // Compassを有効にする
  }
}

Starter Kitフォルダに移動して、次のコマンドでStarter Kitを起動します:

gulp serve

Starter Kitが起動したら、確認用のスタイルを次のファイルに追加します: