Middleman 4 の新機能を試す シリーズgulp-sass で Font Awesome を導入する方法（Bourbon, Neat 対応）

はじめに

Middleman 4 の External Pipeline で Gulp を使い、 gulp-sass で Sass をプリコンパイルしている場合の Font Awesome の導入方法についてメモを残しておきます。

node-font-awesome を使う

npm の font-awesome パッケージを単体で使おうと思うと includePath の指定が面倒だったりするので、そこを補ってくれる node-font-awesome を使います。

node-bourbon や node-neat を使っている場合

node-bourbon や node-neat を併用している場合、各パッケージが返すパスを予め連結してやる必要があります。各パッケージが返すパスは以下の通りです。

var bourbon = require('node-bourbon');

console.log(bourbon.includePaths);
//[ '/Users/rin/Projects/middleman-tail/node_modules/bourbon/app/assets/stylesheets' ]

var neat = require('node-neat');

console.log(neat.includePaths);
//[ [ '/Users/rin/Projects/middleman-tail/node_modules/bourbon/app/assets/stylesheets' ],
//  '/Users/rin/Projects/middleman-tail/node_modules/bourbon-neat/app/assets/stylesheets' ]

見て分かる通り、neat.includePaths には bourbon のパスも含まれています。gulp-sass の includePaths に配列を指定することはできますが、neat.includePaths はすでに配列のため、neat.includePaths と node-font-awesome のパス（fontAwesome.scssPath）を連結してやる必要があります。

var cssConf = {
  includePaths: Array.prototype.concat( neat.includePaths, fontAwesome.scssPath )
}

フォントファイルをコピーする

node-font-awesome はフォントファイルのパスを返してくれるのでそれを使ってコピーするタスクを用意します。

var fontConf = {
  destPath:     '.tmp/dest/assets/fonts'
}

gulp.task('fonts',   copyFontAwesomeFonts);

function copyFontAwesomeFonts(){
  gulp.src(fontAwesome.fonts)
    .pipe(gulp.dest(fontConf.destPath));
}

作成したタスク

var gulp        = require('gulp');
var sass        = require('gulp-sass');
var bourbon     = require('node-bourbon');
var neat        = require('node-neat');
var fontAwesome = require('node-font-awesome');

var cssConf = {
  srcPath:      'source/assets/stylesheets/**/*.scss',
  destPath:     '.tmp/dest/assets/stylesheets',
  includePaths: Array.prototype.concat( neat.includePaths, fontAwesome.scssPath )
}

var fontConf = {
  destPath:     '.tmp/dest/assets/fonts'
}

gulp.task('fonts',   copyFontAwesomeFonts);
gulp.task('sass',    ['fonts'], sassPreCompile);

function sassPreCompile(){
  gulp.src(cssConf.srcPath)
    .pipe(sass({
      includePaths: cssConf.includePaths
    }))
    .pipe(gulp.dest(cssConf.destPath));
}

function copyFontAwesomeFonts(){
  gulp.src(fontAwesome.fonts)
    .pipe(gulp.dest(fontConf.destPath));
}

SCSS へのインポート

あとは SCSS ファイルに @import するだけです。コピー先のディレクトリ名を fonts にしているので $fa-font-path だけ書き換えてやります。

// font awesome
$fa-font-path:   "../fonts";
@import 'font-awesome';

終わりに

これで Font Awesome が使えるようになりました。Middleman 4 の External Pipeline でも問題無く利用でき、フォントファイルに対しても asset_hash を使ったキャッシュコントロールが可能です。

シリーズ

1. Middleman 4 をインストールしてみる
2. Middleman 4 で middleman-blog をインストールしてみる
3. Browserify を試してみる
4. Gulp から Browserify を実行する
5. Watchify を使った Browserify の 変更監視と自動バンドル
6. Gulp から Watchify と Browserify を使う
7. Middleman 4 の External Pipeline（外部パイプライン）を試す
8. Middleman 4 の External Pipeline を活用した Sass のプリコンパイルと Browserify のバンドル
9. Middleman 4 で middleman-syntax を使った Syntax Highlight（小ネタ）
10. gulp-sass で Font Awesome を導入する方法（Bourbon, Neat 対応）
11. Middleman 4 の External Pipeline に対応した Skeleten（テンプレート）「middleman-tail」 を作った
12. Wercker の step-s3sync で起こった 「Parameter problem: Invalid source/destination」エラーの直し方（小ネタ）