blog

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

    • Ryuichi Nonaka

    はじめに

    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」エラーの直し方(小ネタ)

    コメント・フィードバック