web-dev-qa-db-ja.com

ProjectがgruntでビルドされているとFontawesomeが機能しない

私は素晴らしいフォントライブラリフォントを使用しています。プロジェクトがうなり声でビルド/ uglifiedされていないときに機能します。

しかし、私がうなり声でプロジェクトを構築しているとき、それは機能していません。コンソールで次のエラーが表示されます：.../fonts/fontawesome-webfont.woff？v = 4.0.3 404（Not Found）

私はyeomanでプロジェクトの足場を作りました。

これはindex.htmlの私の参照です

    <!-- build:css styles/fontawesome.css -->
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
    <!-- endbuild -->

何が間違っている可能性がありますか？

更新フォルダー/ bower_components/font-awesome/fontsをdist/fontsにコピーする必要があります。これはgruntファイルで行う必要があります。おそらく「コピー」オプションの下

copy: {
  dist: {
    files: [{
      expand: true,
      dot: true,
      cwd: '<%= yeoman.app %>',
      dest: '<%= yeoman.dist %>',
      src: [
        '*.{ico,png,txt}',
        '.htaccess',
        'bower_components/**/*',
        'images/{,*/}*.{gif,webp}',
        'styles/fonts/*'
      ]
    }, {
      expand: true,
      cwd: '.tmp/images',
      dest: '<%= yeoman.dist %>/images',
      src: [
        'generated/*'
      ]
    }]
  },

しかし、私はこれをどこに含めるべきか本当にわかりません。

angularjsgruntjsyeomanfont-awesome
64
Joe

同じ問題がありました。次のコードは私の問題を解決しました。

copy: {
    dist: {
        files: [{
            expand: true,
            dot: true,
            cwd: '<%= config.app %>',
            dest: '<%= config.dist %>',
            src: [
                '*.{ico,png,txt}',
                '.htaccess',
                'images/{,*/}*.webp',
                '{,*/}*.html',
                'styles/fonts/{,*/}*.*'
            ]
        },{
            expand: true,
            dot: true,
            cwd: 'bower_components/bootstrap/dist', // change this for font-awesome
            src: ['fonts/*.*'],
            dest: '<%= config.dist %>'
        }]
    }
}
85
Abdullah

プロジェクトでSASSを使用している場合、誰かが興味を持っている場合にgruntファイルを変更する必要のない、より簡単な方法を見つけました。

http://likesalmon.net/use-font-awesome-on-yeoman-angularjs-projects/

基本的に、これらの2行をmain.scssファイルの先頭に含めると、フォントが機能します。

$fa-font-path: "/bower_components/font-awesome/fonts/";
@import "font-awesome/scss/font-awesome";
31
vegas-dev

Yeomanの完全な単調なタスクスタックを使用している場合、useminPrepareタスクは、build:cssコメントに入力したすべてのスタイルシートから結合スタイルシートを作成します。 （追加情報についてはhttps://github.com/yeoman/grunt-useminを参照してください）ビルドプロセスが完了すると、このファイル-「vendor.234243.css」のようなものがスタイルフォルダーにコピーされます。そのため、フォントのパスが無効になります。これを解決するには、少なくとも2つの可能性があります。

  1. build:cssブロックからfont-awesom cssを削除できます。

    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<!-- build:css styles/fontawesome.css -->
 this will be processed by useminPrepare 
<!-- endbuild -->

  2. Gruntfileの追加のgruntタスクによって、フォントfolderを兄弟としてstylesフォルダーにコピーします。

16
michael

Copy.dist.filesに以下を追加することで問題を修正できました。

{
   expand: true,
   flatten: true,
   src: 'bower_components/components-font-awesome/fonts/*',
   dest: 'dist/fonts' 
}
7
rantunes

これにより、フォントが必要な場所にコピーされます。

copy: {
        dist: {
            files: [{
                expand: true,
                dot: true,
                cwd: '<%= yeoman.app %>',
                dest: '<%= yeoman.dist %>',
                src: [
                    '*.{ico,png,txt}',
                    '.htaccess',
                    'images/{,*/}*.webp',
                    '{,*/}*.html',
                    'styles/fonts/{,*/}*.*'
                ]
            }, {
                expand: true,
                dot: true,
                cwd: 'app/bower_components/fontawesome/fonts/',
                src: ['*.*'],
                dest: '<%= yeoman.dist %>/fonts'
            }]
        },
4
Nijomi

これを行う最も簡単な方法は、独自のbower.jsonに移動し、overridesプロパティを追加することです。

{
  "name": "xxx",
  "version": "x.x.x",
  "dependencies": {
    ...,
    "fontawesome": "~4.0.3"
  },
  "devDependencies": {
    ...,
  },
  "overrides": {
    "fontawesome": {
      "main": [
        "./css/font-awesome.css"
      ]
    }
  }
}

fontawesome/fontsフォルダーから手動でapp/fontsフォルダーからフォントをコピーして貼り付ける必要があります。 GruntfileやSCSSなどの編集は不要です。

4
nknj

私の解決策は、CDNアプローチを採用することでした。

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

なんらかの理由で答えが機能しませんでした。

1
Aleksejs Spuris

解決策は次のとおりです。 https://stackoverflow.com/a/32128931/317281

{ 
  expand: true,
  cwd: '<%= yeoman.app %>/bower_components/font-awesome', 
  src: 'fonts/*', 
  dest: '<%= yeoman.dist %>' 
}
1
Matthieu Bilbille

上記で回答したように、これは私にとっても非常にうまくいきました

 // Copies remaining files to places other tasks can use
    copy: {
      dist: {
        files: [{
          expand: true,
          dot: true,
          cwd: '<%= yeoman.app %>',
          dest: '<%= yeoman.dist %>',
          src: [
            '*.{ico,png,txt}',
            '.htaccess',
            '*.html',
            'scripts/components/{,*/}*.html',
            'images/{,*/}*.{webp,png,jpg,jpeg,gif}',
            'fonts/*',
            'styles/fonts/{,*/}*.*',
            'services/{,*/}*.json',
            'services/mocks/{,*/}*.json'
          ]
        }, {
          expand: true,
          cwd: '.tmp/images',
          dest: '<%= yeoman.dist %>/images',
          src: ['generated/*']
        }, {
          expand: true,
          cwd: '.tmp/concat/scripts',
          dest: '<%= yeoman.dist %>/scripts',
          src: '{,*/}*.js'
        }, {
          expand: true,
          cwd: '.tmp/concat/styles',
          dest: '<%= yeoman.dist %>/styles',
          src: '{,*/}*.css'
        }, {
          expand: true,
          cwd: '<%= yeoman.app %>',
          src: 'styles/Bootstrap/fonts/bootstrap/*',
          dest: '<%= yeoman.dist %>'
        }, {
          expand: true,
          cwd: 'bower_components/font-awesome/fonts/',
          src: ['*.*'],
          dest: '<%= yeoman.dist %>/fonts'
        }]
      }
1
ssaini

こんにちは主な問題は、font-awesome cssに必要なフォントファイルがgruntタスクを実行した後にコピーされず、404が見つからないというエラーが表示されることです。chrome開発者モードでconsoeまたはネットワークタブを確認してください。同じ問題はbootstrapでも発生する可能性があります。

したがって、すべてのフォントファイルがコピーされるようにgruntタスクを変更する必要があります。

フォントファイルの別のコピータスクを追加します。

copy: {
  dist: { .....

  },
   fonts: {
    expand: true,
    flatten: true,
    cwd: '.',
    src: ['bower_components/bootstrap/fonts/*', 'bower_components/font-awesome/fonts/*'],
    dest: '<%= yeoman.dist %>/fonts',
    filter: 'isFile'
  },
  styles: { .......
  }
}

ビルド時に実行されるように、「copy：fonts」タスクをgrunt.registerTaskに登録します。

0
Jayant Nayak

何が間違っていたかはわかりませんが、提案された解決策はどれもうまくいきませんでした。私が試したものは何でも、生産（配布）リリースはアイコンを表示しませんでした。

私は次のコンポーネントを使用することになりました： https://github.com/philya/font-awesome-polymer-icons-generator および https://github.com/philya/font -awesome-polymer-icons

font-awesome-polymer-icons-generator

注：python必要

プロジェクト内のアイコン（使用中）に設定された、素晴らしいフォントのSVGアイコンを生成できます。

例として、プロジェクトにアイコンcode, line-chart, github-altが必要だとしたら、次のように生成します。

./makefaicons.py myappname code line-chart github-alt

これにより、ファイルbuild/myappname-icons.htmlが生成されます。このファイルは、他のコンポーネントと同じようにコンポーネントにインポートする必要があります。

<link rel="import" href="<pathToFile>/myappname-icons.html">

次に、次のようなフォントの素晴らしいアイコンを取得できます：

<core-icon icon="myappname:line-chart"></core-icon>

つまり、アイコンセットを作成したときに付けた名前を通常のフォントの素晴らしい名前の前に付けます。

font-awesome-polymer-icons

事前に構築されたフォントの素晴らしいアイコンの完全なセットをインポートすることもできます：

bower install font-awesome-polymer-icons

これにより、ディストリビューションのサイズが300 KBを超えることに注意してください。著者は、本番環境での使用は推奨されていないと述べています。

0
Christof

Gruntfile.jsを次のように編集しました。

//...
copy: {
  dist: {
    files: [//... {
      expand: true,
      dot: true,
      cwd: 'bower_components/font-awesome/fonts/',
      src: ['*.*'],
      dest: '<%= yeoman.dist %>/fonts'
    }]
  },
  app: {
    files: [{
      expand: true,
      dot: true,
      cwd: 'bower_components/font-awesome/fonts/',
      src: ['*.*'],
      dest: '<%= yeoman.app %>/fonts'
    }]
  }, //...
}
//...
grunt.registerTask('serve', 'Compile then start a connect web server', function (target) {
  if (target === 'dist') {
    return grunt.task.run(['build', 'connect:dist:keepalive']);
  }

  grunt.task.run([
    'clean:server',
    'wiredep',
    'copy:app', // Added this line
    'concurrent:server',
    'autoprefixer:server',
    'connect:livereload',
    'watch'
  ]);
});

私はyeoman 1.4.7とそのangularジェネレーターを使用しています。copy：appタスクを追加することは非常に重要です（上記で提案したように）。copyを含めない場合：appを入力するとgrunt serveそれは動作しません。 copy：distでは、grunt serve:dist

0
camposer

私はまったく同じ問題を抱えていました。 font-awesomeのbower.jsonファイルを見てみると、次のことがわかりました。

{
  "name": "font-awesome",
  "description": "Font Awesome",
  "keywords": [],
  "homepage": "http://fontawesome.io",
  "dependencies": {},
  "devDependencies": {},
  "license": ["OFL-1.1", "MIT", "CC-BY-3.0"],
  "main": [
    "less/font-awesome.less",
    "scss/font-awesome.scss"
  ],
  "ignore": [
    "*/.*",
    "*.json",
    "src",
    "*.yml",
    "Gemfile",
    "Gemfile.lock",
    "*.md"
  ]
}

「main」配列内の「font-awesome.css」への参照はありませんでした。おそらく、私のように、スタイリングにSASSやLESSを使用していないのでしょう。そのため、フォント用のスタイルは追加されていません。 jsonファイルを次のように変更しました。

{
  "name": "font-awesome",
  "description": "Font Awesome",
  "keywords": [],
  "homepage": "http://fontawesome.io",
  "dependencies": {},
  "devDependencies": {},
  "license": ["OFL-1.1", "MIT", "CC-BY-3.0"],
  "main": [
    "less/font-awesome.less",
    "scss/font-awesome.scss",
    "css/font-awesome.css",
    "fonts/fontawesome-webfont.tff",
    "fonts/fontawesome-webfont.woff",
    "fonts/fontawesome-webfont.woff2"
  ],
  "ignore": [
    "*/.*",
    "*.json",
    "src",
    "*.yml",
    "Gemfile",
    "Gemfile.lock",
    "*.md"
  ]
}

保存してうっとりするようなサーブを実行すると、今ではフォントの素晴らしいアイコンが表示されます。

お役に立てれば。

0
Scott

SailsJSとBowerを使用している場合は、FontawesomeおよびBootstrapフォントの問題を修正するソリューションを作成しました。

  1. tasks/config/bower.jsが次のようになっていることを確認します。 https://Gist.github.com/robksawyer/fc274120aef9db278eec
  2. Npmモジュール grunt-remove を追加しました。
  3. remove.jsにtasks/configファイルを作成します。 https://Gist.github.com/robksawyer/2fcf036fdf02436aa90b
  4. 更新ファイルtasks/register/compileAssets： https://Gist.github.com/robksawyer/fa04a34ea103bead1c61
  5. tasks/config/copy.jsファイルを次のように更新します。 https://Gist.github.com/robksawyer/2aac6d0cdb73bfa8239f
0
Rob Sawyer

Google App Engineを使用している人のために、次のことがうまくいきました。

Gruntfile.jsに追加：

copy: {
  build_font_awesome: {
    files: [
      {
         expand: true,
         flatten: true,
         src: 'vendor/components-font-awesome/fonts/*',
         dest: '<%= build_dir %>/fonts' 
      }
    ]
  },
  compile_font_awesome: {
    files: [
      {
         expand: true,
         flatten: true,
         src: 'vendor/components-font-awesome/fonts/*',
         dest: '<%= compile_dir %>/fonts' 
      }
    ]
  }
}

LESSを使用しているので、font-awesome.lessファイルにこれを追加してmain.lessをインポートしました。

@import '../../vendor/components-font-awesome/less/font-awesome.less';

次に、これをapp.yamlファイルに追加しました。

handlers:
- url: /fonts
  static_dir: static/fonts
0
Karl Stulik