Gulp bowerでインストールしたfontawesomeのフォントパスをbower_components内に手を入れず変更する方法
解決済
回答 1
投稿
- 評価
- クリップ 0
- VIEW 2,067
bowerを使いfont-awesomeをプロジェクト内にインストールし、gulpの
この際に
以下使用しているプラグインのパージョンとGulpのタスクになります
なんとなく
[参考]
gulp-ruby-sass - GitHub
gulp-ruby-sass - npm
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
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
0
無いようです。gulpやsassコマンドから変数を上書きする設定方法は。
代わりにscssファイルを作成して、
gulp-replaceなどを利用して、コンパイルしたcssのurlを直接書き換える方法なども考えられますが、上記が行儀の良い無難な方法に見えます。
また、main-bower-filesですが、これはbower.jsonのmainで定義されているファイルのパスをあくまで返すだけなので、取得したフォントのパスがmainに定義されていない場合は、自分で定義し直す必要があります。
代わりに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に定義されていない場合は、自分で定義し直す必要があります。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.19%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2015/12/25 13:50
色々試してみましたが、やはりこの方法がベターなようですのでベストアンサーとさせていただきました。ありがとうございました。