Yeomanで作ったアプリでbootstrapを動かす

| Comments

yeomanでAngularのテンプレートを作ったら、Bootstrapが上手く入らなかったのでメモ。

environment

  • yeoman (angular-generator)
  • bowerでbootstrap入れた。
  • gruntタスクはいじってない
  • grunt serve時では普通に動く
  • glyphiconを使うとfontを呼びに行くが、Deploy後だとミスる。

Incident

yeomanで作成されたAngularアプリのgruntタスクでBuildすると、Deploy先でbootstrapのファイルの読み込みに失敗していた。

どうもdist/fonts以下を呼ぼうとしてるんだけど、そんなところにファイルはできてない。。。

対応

gruntのタスクを編集。 dist/fonts以下にbower_component/bootstrapのやつをcopyすればいいらしい。

1
2
3
4
5
6
7
8

copy: {
      dist: {
        files: [{
          expand: true,
          cwd: 'bower_components/bootstrap/dist/fonts/',
          dest: '<%= yeoman.dist %>/fonts',
          src: '*.*'
        },

cwdとかをちゃんとわかっていなかったけど、どうやら相対パスを示すようで、 cwd + srcのファイルを、dest + srcに移すみたい。

ずっと悩んでいたのは、

1
2
3
4
5
6
7
8

copy: {
      dist: {
        files: [{
          expand: true,
          cwd: '.',
          dest: '<%= yeoman.dist %>/fonts',
          src: 'bower_components/bootstrap/dist/fonts/*'
        },

こんなカンジにすると、dist/bower_component/......みたいなカンジにcopyされてしまうことでした。。。

grunt難しい。。

Comments