Gulp bowerでインストールしたfontawesomeのフォントパスをbower_components内に手を入れず変更する方法

Question

bowerを使いfont-awesomeをプロジェクト内にインストールし、gulpのgulp-ruby-sassを使いコンパイルしています。
この際にbower_components/font-awesome内に手を入れず、_variables.scss内にあるフォントのパスなどの変数を上書きさせてコンパイルさせる方法はありますでしょうか？

以下使用しているプラグインのパージョンとGulpのタスクになります

  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-notify": "^2.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-ruby-sass": "^2.0.2"
  }

var gulp     = require("gulp"),
    rename   = require('gulp-rename'),
    rubySass = require("gulp-ruby-sass"),
    notify   = require("gulp-notify");

gulp.task('fontawesome', function(cb) {
  // パスもできれば`main-bower-files`とかで自動で取ってきたい
  var path = './bower_components/font-awesome';

  // copy font files
  gulp.src(path + '/fonts/*.*')
    .pipe( gulp.dest(destDir + '/fonts') );

  // compile scss
  return rubySass(path + '/scss/*.scss', {
    style: 'compressed',
  })
  .on("error", notify.onError(function(error) {
      return "Error: " + error.message;
    }))
    .pipe( rename({
      prefix: '_'
    }) )
    .pipe( gulp.dest(destDir + '/css') );
});

なんとなくgulp-ruby-sassのloadPathオプションを使えば実現できそうな気もしているのですがご存知の方がおられましたらご教授お願いいたします。

[参考]
gulp-ruby-sass - GitHub
gulp-ruby-sass - npm

Answer 1

無いようです。gulpやsassコマンドから変数を上書きする設定方法は。
代わりにscssファイルを作成して、$fa-font-path変数を設定したあと、対象のファイルを読み込むのはどうでしょうか？

$fa-font-path: 'destDir';

@import "bower_components/font-awesome/scss/font-awesome.scss";

gulpからは、font-awesomeのscssではなく、このファイルを経由してコンパイルを行うようにすれば、結果のcssは下記のように変更したurlになります。

/* ... */
@font-face {
  font-family: 'FontAwesome';
  src: url("destDir/fontawesome-webfont.eot?v=4.4.0");
/* ... */

gulp-replaceなどを利用して、コンパイルしたcssのurlを直接書き換える方法なども考えられますが、上記が行儀の良い無難な方法に見えます。

また、main-bower-filesですが、これはbower.jsonのmainで定義されているファイルのパスをあくまで返すだけなので、取得したフォントのパスがmainに定義されていない場合は、自分で定義し直す必要があります。

Comments

[KiKiKi_KiKi]

遅くなり申し訳ありません。
色々試してみましたが、やはりこの方法がベターなようですのでベストアンサーとさせていただきました。ありがとうございました。