Gruntfile.jsを編集してdistにコピーするファイルを設定する

やりたいこと

Gruntで本番環境をビルドするときに、開発環境からdistフォルダにコピーするファイルを指定する

環境

YEOMANを入れたばっかり
- Grunt
- bower
- font-awesome

※今回はfont-awesomeを使って本番環境にアイコンを表示させたかったのでこれを設定するやり方を書きますが、多分bowerでインストールしたものを使いたい時は大体同じことすればいいと思います。

やりかた

Gruntfile.jsにコピーするファイルを明記します。

Gruntfileには以下のように、本番環境をビルドするときにコピーするファイルを指定する記載があります。

Gruntfile.js

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

Bootstrapを入れていれば、一番最後に指定する記述があると思います。
これを元に

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

この記述を追加します。
記述の意味についてはGruntのドキュメントに書いてあります〜〜
日本語訳されたものを参考に記しておきます。

書いてある意味を大雑把に言うと、
bower_components/font-awesome/fonts/以下のファイルを全てコピーして
distフォルダ以下にフォルダ構成もそのままコピーするという意味になっています。

記述が終わったら

grunt build

でdistフォルダにちゃんとビルドされてるか確認してみてください。

参考

タスクの設定