brushClover

フロントエンド開発ではデファクトスタンダートと言えるSass。最近になって自分のサイトのCSSをSassで開発してみようと思い、勉強をはじめました。アウトプットとしてまずは導入編の一つとしてNode.jsのタスクランナーGulpでSassコードをCSSへコンパイルする環境の作り方を紹介します。

Node.jsとGulpはWindowsでも動作しますが、導入にあたってのコマンドなどはMac向けに書いています。Windowsの場合はコマンドをコマンドプロンプトで入力し、「/」を「\」に置き換えてもらったらおそらく同様に導入できるはずですが、検証はできておりません。

なお黒い画面を触らずともアプリなどでSassに触れることはできるので、このような環境構築に時間をかけずにささっと本編のSassコーディングもできます。黒い画面のことは嫌いでも、Sassのことは嫌いにならないでください！

• SassMeister (Sass変換Webサービス)
• Koala (Sass/Compass変換アプリ)

改めての説明は不要かと思いますが自分の勉強のアウトプットとして一応書かせてください！

SassとはCSSを書き出すための言語で、言語を記述するための言語であるメタ言語と分類されるものです。CSSは同じような記述の繰り返しなどが多く、記述量の肥大化やデザイン変更時の保守性の低さが問題なることが増えてきました。

Sassはそれらを変数やミックスインと呼ばれる機能で記述をシンプルに、最低限にできます。ただしブラウザが認識できるのはあくまでCSSなので、Sassで記述したコードは最終的にCSSのコード形へ変換してやり、Webページ上にスタイルを適用させます。

Sassの機能としては従来のCSSになかった下記のようなものを提供してくれます。

機能	説明
変数	変数に任意の値を保持でき、他の箇所から変数を呼び出すことができる。
ネスト	「.parent .children」の子孫セレクタの指定を{ { } } のようにブラケットのネストで表現できる。
ミックスイン	コードの記述のまとまりを関数のように定義し、他の箇所から呼び出すことができる。

ちなみにSassの実態はRuby言語で記述されたプログラムです。Sassのプログラム自体はGitHubで公開されています。(GitHub) Sassの記法で書かれたコードをRubyが解釈してCSSへとコンパイル(変換して書き出す)するというプログラムですね。そのためコンパイルを自分のマシンで行うには一般的にはRubyのインストールを必要とします。

ただし今回はGulpを利用するため、Rubyのインストールは不要なのです。詳しくは「Gulpとは」のところで！(なおMacなら最初からRuby入ってるじゃんというのはスルーで..)

これだけ普及してきた(ry

GulpとはNode.jsで動作するタスクランナープログラムです。同様なものにGruntがありますが、2016年現在はGulpがデファクトなツールとなっていますので今回のSassのコンパイルタスクの実行にGulpを使用します。

タスクランナーは自分で定義したタスクを自動化してくれるものです。たとえば黒い画面で「gulp deploy」コマンドを叩くとSassファイルをCSSにコンパイルして、そのCSSファイルをサーバにアップロードするという一連の作業をプログラムが自動実行するということができます。作業の自動化は作業時間の短縮やヒューマンミスの防止にも繋がります。

GulpでSassをコンパイルする理由

GulpでSassをコンパイルする理由としては作業自動化による作業効率アップもありますが、個人的に「libsassによりRubyが不要でコンパイルできる」という点をプッシュしたいです。

今回紹介するGulpのプラグイン「gulp-sass」ではlibsassというライブラリをインストールしてくれます。これはNode.jsでSassを動作させてくれるもので、C/C++言語で書かれているため高速に動作します。Rubyでコンパイルするよりこっちの方が速いです。また、Rubyとは切り離されているためRubyの影響を受けずにSassをコンパイルできます。Rubyのインストールも不要なのでWindowsユーザの方も心強いのではないでしょうか。

それではGulpの導入について書いていきます。

Node.js のインストール

GulpはNode.jsで動作するプログラムなので、まずはNode.jsをマシンにインストール必要があります。Node.jsはマルチプラットフォームなのでWindows、MacOS、Linux上で動作します。

Node.jsのインストール自体は難しくありません。公式サイトよりDLしてインストールしましょう。

• Node.js 公式サイト

Node.jsのインストールができたらターミナルで「node -v」コマンドを実行します。

$ node -v
v5.0.0

レスポンスとしてバージョン情報が出力されたらインストールは成功です。Node.jsはこのようにコマンドライン上で操作します。

参考にMacのターミナルのキャプチャを貼っておきます。僕はターミナルソフトとしてiTerm2を利用しています。

ちなみにNode.js自体の管理方法がいくつかありますがこの記事では割愛します。Windowsだと「nodist」、Macだと「nodebrew」が代表的なツールとなるので気になる方は調べてみてください。

gulpコマンドのインストール

Node.jsがインストールできたらGulpのインストールを行います。

gulpコマンドのインストール

$ sudo npm install -g gulp

これはgulpコマンドを使えるようにするためのコマンドです。「-g」というのはNode.jsのパッケージをグローバルインストールすることを意味します。

Mac/Linuxの場合は「sudo npm install -g gulp」を実行してください。グローバルインストールは管理者権限が必要なためsudoコマンドが必要となります。sudoコマンドではパスワードを求められますが、これは自身のユーザのパスワードです。

gulpのインストール

先ほどはgulpコマンドをインストールしましたが、ここではGulpのプログラムをインストールします。

Gulpも含め、Node.jsのモジュール(プログラム)はプロジェクトごとにインストールします。プロジェクトというのは1つのサイトに該当するルートデイレクトリを指します。すべてのプロジェクトごとにGulpなどのモジュールをインストールするのは冗長に感じるかもしれませんが、このプロジェクトはこのバージョンのGulpを使うなど細かな設定をシンプルに管理できます。

プロジェクトごとにインストールするモジュールは次のように各プロジェクトのディレクトリの「node_modules」ディレクトリへインストールされます。

website/
├── siteA/
      ├── node_modules/
├── siteB/
      ├── node_modules/
└── siteC/
      └── node_modules/

それでは次の手順でプロジェクトに対してGulpをインストールしてみましょう。

1. プロジェクトへ移動 (コマンド例)

$ cd ~/website/siteA/

プロジェクトのディレクトリへ移動したら次のコマンドを実行します。npmは「Node Package Manager」の略称で、Node.jsで動作するプログラムをインストールしてくれるもので、Node.jsインストール時に同時にインストールされています。

2. npm initでプロジェクトで使うNode.jsモジュールを定義

$ npm init

これによりコマンド上で「name」や「version」などを聞かれますが一旦入力せずにエンターを押すので大丈夫です。「Is this ok? (yes)」のあとにエンターを押すとそのディレクトリに「package.json」というファイルが作成されています。これは、そのプロジェクトで使うNode.jsのモジュールを定義するものです。ファイルの中身が次のようになっていればOKです。

{
  "name": "sass",
  "version": "0.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "BSD"
}

次にGulpをインストールします。package.jsonが作られている状態で次のコマンドを実行します。

3. プロジェクトで使うgulpのインストール

$ npm install --save-dev gulp

3.のコマンドを実行するとプロジェクトのディレクトリに「node_modules」ディレクトリが作られ、その中にモジュールがインストールされます。またpackage.jsonのファイルの中身にgulpが使われることが記載されます。プロジェクトのディレクトリの中身としては次のような感じなっているかと思います。

siteA/
├── index.html
├── sass/
├── css/
├── (その他ファイルやディレクトリ)
├── node_modules/
└── package.json

この状態となったら「gulp -v」コマンドを実行してGulpのインストール状況を確認しましょう。

$ gulp -v
[15:28:35] CLI version 3.9.1
[15:28:35] Local version 3.9.1

こんな感じで「CLI」「Local」のバージョンが表示されたらインストールはOKです。CLIはgulpコマンドのバージョン、Localはプロジェクトで使うgulpのバージョンを意味しています、

ちなみにGulpをインストールするときの「–save-dev」オプションはpackage.jsonにこのモジュールを使う定義を追加するオプションです。とりあえずでgulpを使うためには無くてもいいのですが記載しておくとチーム開発で便利なことがあります。このオプションの指定によりpackage.jsonに次のような記述が追加されます。

{
...
  "devDependencies": {
    "gulp": "~3.9.1"
  }
...
}

Sassのインストール(gulp-sass)

最後にSassをコンパイルするためのプラグイン「gulp-sass」をインストールを行います。

プラグインをインストールするには先ほどのpackage.jsonがあるプロジェクトで下記コマンドを実行します。

4. gulp-sassのインストール

$ npm install --save-dev gulp-sass

これでGulpとSassの導入は完了です。ここまで問題なく進んでいましたらpackage.jsonに次の記述が追加されているはずです。

  "devDependencies": {
    ...
    "gulp-sass": "~2.3.1"
  }

package.jsonの細かい設定でWARNがでるかもしれませんが個人で使う分にはスキップしてもらって大丈夫です。チーム開発などでGulpのタスクを共有する際には問題は潰した方がよいですが今回は割愛させていただきます。

Gulpの環境を作ったらテストタスクを作成して動作を確認してみましょう。

gulpfile.jsの作成と設置

Gulpのタスクはgulpfile.jsに記述します。このファイルはプロジェクトディレクトリの「package.json」「node_modules」が存在するのと同じ階層に作成して設置します。ひとまずgulpfile.jsの中身は空の状態で設置しましょう。

Gulpでタスク実行させるためのディレクトリ構成

siteA/
├── index.html
├── sass/
├── css/
├── (その他ファイルやディレクトリ)
├── node_modules/
├── package.json
└── gulpfile.js

gulpfile.jsにタスクを記述

gulpfile.jsには下記のようにタスクを記述します。GulpはJavaScriptのプログラムを記述する感覚でタスクを記述できます。

テストタスクの定義

// gulpモジュールを読み込み
var gulp = require('gulp');

// taskNameという名前のタスクを定義
gulp.task('taskName',function() {
    // 画面上に文字列を出力する
    console.log('taskNameのタスクを実行しました。');
});

このタスクを保存して、gulpfile.jsがある階層で「gulp tasName」コマンドを実行して次のように出力されたら完了です。

$ gulp taskName
[21:44:28]Using gulpfile siteA/gulpfile.js
[21:44:28] Starting 'taskName'...
taskNameを実行しました。
[21:44:28] Finished 'taskName' after 90 μs

最後に実際にSassをコンパイルするタスクを作成してみましょう。

プロジェクトのディレクトリ構成

まずはディレクトリ構成を確認しましょう。「node_modules」「package.json」「gulpfile.js」と同じ階層に「css」と「sass」デイレクトリがある構成です。ディレクリの場所などはgulpfile.js内で調整できますが、このような構成が一般的です。ディレクトリが不足している場合は新規作成してください。

プロジェクトのディレクトリ構成(再確認)

siteA/
├── index.html
├── sass/
├── css/
├── (その他ファイルやディレクトリ)
├── node_modules/
├── package.json
└── gulpfile.js

タスクの記述

gulpfile.jsには以下のコードを記述してタスクを定義します。

commpassタスクの定義

var gulp = require('gulp');
// 1. gulp-sassプラグインの読み込み
var sass = require('gulp-sass');

gulp.task('sass', function () {
    // 2. コンパイル対象のscssファイルを読みこみ
    gulp.src('./sass/*.scss')
    // 3. scss→cssへのコンパイルを実行
   .pipe(sass())
    // 4. コンパイルしたcssファイルを対象のディレクトリに出力
   .pipe(gulp.dest('./css'));
});

このコードはCompassを利用したSassコードをCSSにコンパイルするタスクを定義したもので、主な解説を下記に記載します。

No.	説明
1	gulpのタスクとしてSass使うので、該当するプラグインをrequireして読み込んでいます。また読み込んだモジュールを「sass」というオブジェクトで参照できるようにしています。
2	gulp.taskの中にある「gulp.src()」では変換対象のSassコードを指定しています。ここではsassディレクトリにある*.scssをコンパイル対象にしています。「*」に指定したものは任意のファイルに対応して「style.scss」「clearfix.scss」など色んなパターンのファイルをすべて選択してくれます。
3	srcで読み込んだそれぞれのファイルに対して「sass()」でコンパイルを実行します。
4	コンパイルしたファイルはメモリ上に存在しているので、それを「./css」に出力します。

最後に先ほど作成したタスクを実行しましょう。

まずはSassのコードを記述しましょう。今回はSCSS記法で下記のようなファイルを作成します。ファイル名は「style.scss」として「./sass/」ディレクトリに配置します。

./sass/style.scss

$colorBlack : #454545;

p {
  color : $colorBlack;
}

そしてgulpfile.jsがあるディレクトリで「gulp sass」コマンドを実行して、次のように出力されればOKです。

$ gulp sass
[16:00:39] Using gulpfile ~/work/sass/gulpfile.js
[16:00:39] Starting 'sass'...
[16:00:39] Finished 'sass' after 4.33 ms

cssディレクトリにコンパイルされたCSSが出力されているかも確認してみましょう。

./css/style.css

p {
  color: #454545; }

Gulpで行うSassのコンパイル環境作成について紹介しました。導入も意外と簡単なので個人的にはこの環境でコンパイルを行うのがいいかな〜と思っております。環境を整えたのであとは実際に手を動かしてSassを習得していきましょう！