angularjs - How to correctly manage fonts with bower / grunt -

-

on project added bower.json projects use fonts:

  • fontawesome
  • bootstrap
  • roboto-fontface

grunt file generated "yo angular" custom edits. fonts work fine in "grunt serve" development mode don't work when dist build "grunt".

the problem fonts aren't copied dist folder. fix manually changed gruntfile copy:dist fonts. this:

{     expand: true,     cwd: "<%= yeoman.app %>/bower_components/bootstrap/dist/fonts",     dest: "<%= yeoman.dist %>/fonts",     src: ["*.*"] }

my problem libraries css expect fonts on specific folder ( roboto-fontface , bootstrap example expect font in different folders).

so i'll have change gruntfile replace fonts reference on *.css files target right paths. don't know yet how main itch seems "hacky"

bower works css files: automatically added index.html , href correctly replaced when doing dist build. example can upgrade ng-grid project without problems, remove , add new projects. believe works because of bower.json file on ng-grid project contains

  "main": ["./ng-grid.css", "./build/ng-grid.js"]

grunt correctly configured understand , add index.html.

but fonts seems solution to modify gruntfile add copy:dist , kind of regex replacement on *css files. but, example, roboto-fontface project bower.json file seems have "main" fonts listed besides css file.

for me seems logical should able configure gruntfile understands "main" parameter has fonts , automatically copies them dist/ , replaces css files correct path.

when add new font project i'll have edit gruntfile, when remove/update fonts.

so, question simple: how can best manage project fonts? best practices? how 'cool kids' doing it?

i ran issue few weeks ago, used yeoman-angular-generator , had tweak copy:dist well.

in project using 3 separate fonts, font-awesome, lato , open-sans. added font-awesome via bower other 2 manually downloaded them , placed them under app/fonts

copy: {   dist: {     files: [{       expand: true,       dot: true,       cwd: '<%= yeoman.app %>',       dest: '<%= yeoman.dist %>',       src: [         '*.{ico,png,txt}',         '.htaccess',         '*.html',         'views/{,*/}*.html',         'images/{,*/}*.{png, jpg, jpeg, gif,webp}',         //any new font drop under app/fonts copied dist         '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 %>'     }, {       expand: true,       dot: true,       cwd: 'bower_components/font-awesome',       src: ['fonts/*.*'],       dest: '<%= yeoman.dist %>'     }]   },   styles: {     expand: true,     cwd: '<%= yeoman.app %>/styles',     dest: '.tmp/styles/',     src: '{,*/}*.css'   } }, //rest of gruntfile...

hope helps!


Comments

Post a Comment

Popular posts from this blog

php - render data via PDO::FETCH_FUNC vs loop -

-
i've been using 2 methods render data. the first one: function name($id,$name){ return '<div id="'.$id.'">'.$name.'</div>'; } echo implode($pdo->query("select id,name user")->fetchall(pdo::fetch_func,'name')); the second one: $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); foreach($users $user){ echo name($user->id,$user->name); } i don't understand how pdo::fetch_func works. tried figure out. however, not well-documented. could please explain fetch mode? , also, 1 performs better? thank you. both methods wrong , have learn how use templates , how separate business logic presentation logic. $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); tpl::assign('users', $users); is code business logic part. then in template <?php foreach $users $row): ?> <div id="<?=$...
Read more

c++ - OpenCV Error: Assertion failed <scn == 3 ::scn == 4> in unknown function, -

-
i read alot other solution still confused should mine... #include <opencv2/objdetect/objdetect.hpp> #include <opencv2/highgui/highgui.hpp> #include <opencv2/imgproc/imgproc.hpp> #include <iostream> #include <stdio.h> using namespace std; using namespace cv; int main(int argc, const char** argv) { //create cascade classifier object used face detection cascadeclassifier face_cascade; //use haarcascade_frontalface_alt.xml library face_cascade.load("haarcascade_frontalface_alt.xml"); //setup video capture device , link first capture device videocapture capturedevice; capturedevice.open(0); //setup image files used in capture process mat captureframe; mat grayscaleframe; //create window present results namedwindow("outputcapture", 1); //create loop capture , find faces while (true) { //capture new image frame capturedevice >> captureframe; ...
Read more

The canvas has been tainted by cross-origin data in chrome only -

-
uncaught securityerror: failed execute 'getimagedata' on 'canvasrenderingcontext2d': canvas has been tainted cross-origin data i getting above error in chrome. code(following) works fine in mozilla. have not corss domain issue. why above error in chrome? var wheel_canvas, wheel_context, can_w, can_h, wheel_grd; var large_radius = 160; var small_radius = 120; var wheel_canvas = document.getelementbyid('wheel_canvas'); var wheel_context = wheel_canvas.getcontext('2d'); var can_w = $(wheel_canvas).width(); var can_h = $(wheel_canvas).height(); var centerx = can_w / 2, centery = can_h / 2; var wheel_grd = null; test('#ff0000'); function test(hex) { $('#clrpicker').css({'left': 210, 'top': 210 }); inverted = hexbw(hex); $('#color_val_show').val(hex); current_color_hex_val_selected = hex; $('#color_val_show').css({'color':inverted,'background':hex}); fillgradient...
Read more