Need help on setup fontawesome or other fonts build stuff

[xgenvn]

I'm trying to test this yo plugin on windows for optimizing front-end coding. At the moment everything is going smoothly except the fonts build (which using gulp-bower-files plugin). I don't know how to config this to get the fontawesome fonts copy to /dist/ directory.

Any suggestion and advice would be appreciated. Thank you.

[silvenon]

The fonts task seems to be unfinished, I'll fix that soon.

[kasperisager]

The fonts task only includes font assets defined in bower.json—Font Awesome doesn't appear to have a bower.json present in its repo.

[silvenon]

Append overrides to your bower.json:

{
  "name": "webapp",
  "private": true,
  "dependencies": {
    "bootstrap-sass": "twbs/bootstrap-sass#~3.1.0",
    "modernizr": "~2.6.2",
    "jquery": "~1.11.0",
    "fontawesome": "~4.0.3"
  },
  "devDependencies": {},
  "overrides": {
      "fontawesome": {
          "main": [
              "css/font-awesome.css",
              "fonts/fontawesome-webfont.eot",
              "fonts/fontawesome-webfont.woff",
              "fonts/fontawesome-webfont.ttf",
              "fonts/fontawesome-webfont.svg"
          ]
      }
  }
}

then run gulp wiredep and it should work ;)

[silvenon]

Actually, fonts/* works, so you don't have to specify each one.

[xgenvn]

Hi @silvenon
I tested again with your detail help, however, I think I ran into a problem of workflow here.
When coding frontend gulp watch does help with live-reload. The fontawsome loads font files in default directory ../fonts . This won't work for app/ because there's no task for copying fonts to this directory. Otherwise, under dist/ , the code worked, but certainly no live-reload there.

After reading through gulpfile.js, I added a line where fonts task locates:

   .pipe(gulp.dest('dist/fonts'))
   .pipe(gulp.dest('app/assets/fonts'))

Here I put all of my stuffs to assets directory instead of app directory.
As I'm aware of, your solution only works when fontawesome is under the dependencies (not devDependencies) package list (I don't know why :( ).

@kasperisager I have checked the fontawesome bower package, it has .bower.json under package root, maybe I can declare font assets in that file instead of override app bower.json?

Thank you sooo much.

[silvenon]

It should work in development because it should get fonts from bower_components/fontawesome/fonts, you don't need it in the app folder. Can you show me your directory structure and your gulpfile.js? Why would you want to put fontawesome in devDependencies?

[xgenvn]

@silvenon My gulpfile.js is not different too much with the original one, I just add a line as I show above. I've checked again the fonts are loading through relative path so I don't need to copy the font to app directory, just like you said.
I also have no idea why I have to use devDependencies, so I search around for document then I ended up put packages into dependencies list.
Thank you again @silvenon.

[silvenon]

Does it work then?

[austinpray]

Oh my god how did I not know about bower "overrides". So many hours of my life...

[silvenon]

Yeah, I accidentally noticed it in wiredep's README 😃

[xgenvn]

@silvenon It's working now. I'm trying to integrate gulp with laravel, too. Gulp is indeed very nice. And yeoman too. ;)

[rizqinizamil]

Hi all,

I user my custom icon generated by fontastic. I followed @silvenon instructions and edit bower.json became this;

{
  "name": "webapp",
  "private": true,
  "dependencies": {
    "bootstrap-sass-official": "~3.1.1",
    "modernizr": "~2.6.2",
    "jquery": "~1.11.0"
  },
  "devDependencies": {},
  "overrides": {
      "icon": {
          "main": [
              "icon/styles.css",
              "icon/fonts/pr360.eot",
              "icon/fonts/pr360.woff",
              "icon/fonts/pr360.ttf",
              "icon/fonts/pr360.svg"
          ]
      }
  }
}

Then I add icon folder into bower_components and run gulp wiredep. After that I run gulp, but I can't see my font in dist/fonts I just see bootstrap font that I don't use it.

It works when I run gulp watch, but it don't work when I run gulp. Anyone know how to solve it?

[austinpray]

@rizqinizamil that is not an appropriate use for bower. You should not be manually placing files in the bower_components directory. If you are dead-set on injecting your custom font via bower, you can create either a remote or local git repository and include it that way.

"dependencies": {
    "icon": "../your-icon-font/#~0.0.1",
}

[rizqinizamil]

@austinpray I tried to add icon folder into app directory instead of app/bower_components, but it don't work too. How is the right way to add my own icon into this generator?

[austinpray]

As per: https://github.com/yeoman/generator-gulp-webapp/blob/c976b10904bcb76215b8aa6808db958187f1d45f/app/templates/gulpfile.js#L54

Place fonts in the app/fonts/ directory

Include the font CSS as a SCSS include in app/styles/main.scss

[rizqinizamil]

@austinpray It shows Cannot find module 'main-bower-files' when I change return part. My gulp fonts is like this

gulp.task('fonts', function () {
    return $.bowerFiles()
        .pipe($.filter('**/*.{eot,svg,ttf,woff}'))
        .pipe($.flatten())
        .pipe(gulp.dest('dist/fonts'))
        .pipe($.size());
});

[austinpray]

@rizqinizamil what are you even doing? Why are you changing the return statement? The return statement does not need to be changed, the original works fine for your purposes.

[rizqinizamil]

@austinpray Sorry, but I still can't see my own icon in dist/fonts

[rizqinizamil]

It solved by changing src directory directly gulp.src('app/fonts/*/') instead of $.bowerFiles(). Can anyone explain why?

[austinpray]

@rizqinizamil

This is what the generator spits out by default: return gulp.src(require('main-bower-files')().concat('app/fonts/**/*')).