SCSSとgulpでLeafテンプレートのためのCSSを作る

はじめに

VaporアプリケーションではLeafテンプレートを使ってMongoDBのドキュメントを表示していました。ただ、HTMLタグによる装飾やCSSファイルの利用をしていなかったため、大変そっけなく無愛想なページが表示される状態です。

そこで、CSSを導入して見栄え良くしていきたいのですが、メモ帳でゴリッゴリCSSを書いていくのは大変です。SCSSでスマートに作っていこうと思います。

今回はその準備として、フロントエンドのディレクトリ作りから必要なパッケージ(npm)の導入をしてみます。

フロントエンドプロジェクトを作る

全体像の目標

これが最終的なゴールまでに達成すべき項目です。

• ディレクトリを作る
• npmをインストールする
• gulp等必要なパッケージをインストールする
• gulpfile.jsonを作る

この他に必要に応じてGitリポジトリを作ったりしてください。

ディレクトリを作る

SCSSファイルを保存するディレクトリと、gulpでCSSにコンパイルした結果を保存するディレクトリの2つを作ります。個々人で好みが分かれるところですが、私はこのような構成にしています。

(ルート)
├── dist
│   └── css
└── src
    └── scss

npmをインストールする

プロジェクトディレクトリのルートにてnpm initします。

npm initできない

nodeとnpmをローカルにインストールしているかグローバルにインストールしているかなどの理由で、nodenv: npm: command not foundと言われてしまうかもしれません。その時は落ち着いてnodenv globalでnodeのバージョンを指定します。

node -vでバージョンが表示されればOKです。

gulp等必要なパッケージをインストールする

npmで必要なパッケージをインストールします。ここではSCSSファイルをgulpでコンパイルできるようにします。

• gulp
• gulp-sass
• gulp-plumber
• gulp-notify

gulp-notifyは必須ではないのですが、エラーの通知ができるようになります。

gulpfile.jsonを作る

gulpfile.jsonにSCSSのコンパイルと監視のジョブを書いていきます。

SCSSファイルのコンパイルジョブ

outputStyleにはcompressedを指定しています。基本的に編集するのはSCSSファイルであり、直接CSSファイルを編集する前提ではないので、改行やスペースなどをスッキリ省いた形式で出力するようにしています。

お馴染みのCSSの形式で出力したい場合はexpandedにすれば良いです。

task('sass', function () {
  return (
    src([SCSSファイルを保存するディレクトリ])
      .pipe(plumber({
        errorHandler: notify.onError("ERR: <%= error.message %>")
      }))
      .pipe(sass({
        outputStyle: 'compressed'
      }))
      .pipe(dest(CSSファイルを保存するディレクトリ))
  );
});

gulpの監視ジョブ

私は以前から都度コマンドを叩いてコンパイルしていたのですが、監視を知ってからはこちらにお任せしています。ラクです。

監視したいファイルがあるディレクトリは、今回のケースではSCSSファイルを保存するディレクトリになります。

task('watch', (done) => {
  watch([監視したいファイルがあるディレクトリ], series('sass'));
  done();
});
task('default', parallel('watch'));

seriesが余計かもしれないですが、後々複数の処理を行うことを考えて付けておきました。

CSSファイルを参照できるようにシンボリックリンクを作る

これでSCSSファイルをCSSファイルにコンパイルする仕組みができあがりました。このままSCSSファイルのコーディングに入っても良いのですが、その前にもうひと工夫しておきます。

フロントエンドのプロジェクトをどこに置くかはいくつかのパターンがあると思います。

• Vaporプロジェクトの中に入れてしまって、CSSファイルの出力先をVaporプロジェクトのResourcesディレクトリ内(Leafテンプレートがあるところ)にする
• Vaporプロジェクトの中に入れてしまうが、プロジェクトとしては独立させる(子プロジェクトのイメージ)
• 全く違うところにプロジェクトを置く

これも諸々の事情に応じて最適な選択が変わるところと思います。私はGit管理の関係上、3番めのパターンを採用することが多いです。

そうなると、出来上がったCSSファイルをVaporプロジェクト内にコンパイルの都度コピーしないといけないです。面倒くさい。

そこで、シンボリックリンクを設定しておき、VaporプロジェクトのResourcesディレクトリからフロントエンドのCSSファイルを保存しているディレクトリを参照するようにしておきます。

使い方

ここまで準備できれば後は使うだけです。

最初に一度gulp watchを実行しておきます。これだけでSCSSファイルを書いて保存する都度CSSファイルにコンパイルされ、シンボリックリンクによりVaporプロジェクトで使うことができるようになります。

まとめ

CSSファイルをメモ帳でゴリゴリ書くよりもスマートに書けるようになりました。初めにひと手間をかけておくことでとても便利になりますね。