Fontawesome using gruntfile with server:dist causes errors, Fonts not available ?

[iangregsondev]

Hi,

When running grunt server (gruntfile created by generator-angular) everything works great but running grunt server:dist which creates a dist folder, the fontawesome fonts are not available. I have a number of errors in the console.

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:9000/font/fontawesome-webfont.woff?v=3.2.1
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:9000/font/fontawesome-webfont.ttf?v=3.2.1
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:9000/font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1

Anybody help ?

My grunt file is listed below for clarity.

// Generated on 2013-08-27 using generator-angular 0.4.0
'use strict';
var LIVERELOAD_PORT = 35729;
var lrSnippet = require('connect-livereload')({ port: LIVERELOAD_PORT });
var mountFolder = function (connect, dir) {
return connect.static(require('path').resolve(dir));
};

// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,/}.js'
// use this if you want to recursively match all subfolders:
// 'test/spec/*/.js'

module.exports = function (grunt) {
require('load-grunt-tasks')(grunt);
require('time-grunt')(grunt);

// configurable paths
var yeomanConfig = {
app: 'app',
dist: 'dist'
};

try {
yeomanConfig.app = require('./bower.json').appPath || yeomanConfig.app;
} catch (e) {}

grunt.initConfig({
yeoman: yeomanConfig,
watch: {
coffee: {
files: ['<%= yeoman.app %>/scripts/{,/}.coffee'],
tasks: ['coffee:dist']
},
coffeeTest: {
files: ['test/spec/{,/}.coffee'],
tasks: ['coffee:test']
},
compass: {
files: ['<%= yeoman.app %>/styles/{,/}.{scss,sass}'],
tasks: ['compass:server', 'autoprefixer']
},
styles: {
files: ['<%= yeoman.app %>/styles/{,/}.css'],
tasks: ['copy:styles', 'autoprefixer']
},
livereload: {
options: {
livereload: LIVERELOAD_PORT
},
files: [
'<%= yeoman.app %>/{,/}.html',
'.tmp/styles/{,/}.css',
'{.tmp,<%= yeoman.app %>}/scripts/{,/}.js',
'<%= yeoman.app %>/images/{,/}.{png,jpg,jpeg,gif,webp,svg}'
]
}
},
autoprefixer: {
options: ['last 1 version'],
dist: {
files: [{
expand: true,
cwd: '.tmp/styles/',
src: '{,/}.css',
dest: '.tmp/styles/'
}]
}
},
connect: {
options: {
port: 9000,
// Change this to '0.0.0.0' to access the server from outside.
hostname: 'localhost'
},
livereload: {
options: {
middleware: function (connect) {
return [
lrSnippet,
mountFolder(connect, '.tmp'),
mountFolder(connect, yeomanConfig.app)
];
}
}
},
test: {
options: {
middleware: function (connect) {
return [
mountFolder(connect, '.tmp'),
mountFolder(connect, 'test')
];
}
}
},
dist: {
options: {
middleware: function (connect) {
return [
mountFolder(connect, yeomanConfig.dist)
];
}
}
}
},
open: {
server: {
url: 'http://localhost:<%= connect.options.port %>'
}
},
clean: {
dist: {
files: [{
dot: true,
src: [
'.tmp',
'<%= yeoman.dist %>/',
'!<%= yeoman.dist %>/.git'
]
}]
},
server: '.tmp'
},
jshint: {
options: {
jshintrc: '.jshintrc'
},
all: [
'Gruntfile.js',
'<%= yeoman.app %>/scripts/{,/}.js'
]
},
coffee: {
options: {
sourceMap: true,
sourceRoot: ''
},
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.app %>/scripts',
src: '{,/}.coffee',
dest: '.tmp/scripts',
ext: '.js'
}]
},
test: {
files: [{
expand: true,
cwd: 'test/spec',
src: '{,/}.coffee',
dest: '.tmp/spec',
ext: '.js'
}]
}
},
compass: {
options: {
sassDir: '<%= yeoman.app %>/styles',
cssDir: '.tmp/styles',
generatedImagesDir: '.tmp/images/generated',
imagesDir: '<%= yeoman.app %>/images',
javascriptsDir: '<%= yeoman.app %>/scripts',
fontsDir: '<%= yeoman.app %>/styles/fonts',
importPath: '<%= yeoman.app %>/bower_components',
httpImagesPath: '/images',
httpGeneratedImagesPath: '/images/generated',
httpFontsPath: '/styles/fonts',
relativeAssets: false
},
dist: {},
server: {
options: {
debugInfo: true
}
}
},
// not used since Uglify task does concat,
// but still available if needed
/concat: {
dist: {}
},/
rev: {
dist: {
files: {
src: [
'<%= yeoman.dist %>/scripts/{,/}.js',
'<%= yeoman.dist %>/styles/{,/}.css',
'<%= yeoman.dist %>/images/{,/}.{png,jpg,jpeg,gif,webp,svg}',
'<%= yeoman.dist %>/styles/fonts/'
]
}
}
},
useminPrepare: {
html: '<%= yeoman.app %>/index.html',
options: {
dest: '<%= yeoman.dist %>'
}
},
usemin: {
html: ['<%= yeoman.dist %>/{,/}.html'],
css: ['<%= yeoman.dist %>/styles/{,/}.css'],
options: {
dirs: ['<%= yeoman.dist %>']
}
},
imagemin: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.app %>/images',
src: '{,/}.{png,jpg,jpeg}',
dest: '<%= yeoman.dist %>/images'
}]
}
},
svgmin: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.app %>/images',
src: '{,/}.svg',
dest: '<%= yeoman.dist %>/images'
}]
}
},
cssmin: {
// By default, your index.html will take care of
// minification. This option is pre-configured if you do not wish to use
// Usemin blocks.
// dist: {
// files: {
// '<%= yeoman.dist %>/styles/main.css': [
// '.tmp/styles/{,/}.css',
// '<%= yeoman.app %>/styles/{,/}.css'
// ]
// }
// }
},
htmlmin: {
dist: {
options: {
/removeCommentsFromCDATA: true,
// yeoman/grunt-usemin#44
//collapseWhitespace: true,
collapseBooleanAttributes: true,
removeAttributeQuotes: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeOptionalTags: true/
},
files: [{
expand: true,
cwd: '<%= yeoman.app %>',
src: ['.html', 'views//.html'],
dest: '<%= yeoman.dist %>'
}]
}
},
// Put files not handled in other tasks here
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/'
]
}]
},
styles: {
expand: true,
cwd: '<%= yeoman.app %>/styles',
dest: '.tmp/styles/',
src: '{,/}.css'
}
},
concurrent: {
server: [
'coffee:dist',
'compass:server',
'copy:styles'
],
test: [
'coffee',
'compass',
'copy:styles'
],
dist: [
'coffee',
'compass:dist',
'copy:styles',
'imagemin',
'svgmin',
'htmlmin'
]
},
karma: {
unit: {
configFile: 'karma.conf.js',
singleRun: true
}
},
cdnify: {
dist: {
html: ['<%= yeoman.dist %>/.html']
}
},
ngmin: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.dist %>/scripts',
src: '*.js',
dest: '<%= yeoman.dist %>/scripts'
}]
}
},
uglify: {
dist: {
files: {
'<%= yeoman.dist %>/scripts/scripts.js': [
'<%= yeoman.dist %>/scripts/scripts.js'
]
}
}
}
});

grunt.registerTask('server', function (target) {
if (target === 'dist') {
return grunt.task.run(['build', 'open', 'connect:dist:keepalive']);
}

grunt.task.run([
  'clean:server',
  'concurrent:server',
  'autoprefixer',
  'connect:livereload',
  'open',
  'watch'
]);

});

grunt.registerTask('test', [
'clean:server',
'concurrent:test',
'autoprefixer',
'connect:test',
'karma'
]);

grunt.registerTask('build', [
'clean:dist',
'useminPrepare',
'concurrent:dist',
'autoprefixer',
'concat',
'copy:dist',
'cdnify',
'ngmin',
'cssmin',
'uglify',
'rev',
'usemin'
]);

grunt.registerTask('default', [
'jshint',
'test',
'build'
]);
};

[iangregsondev]

Actually this is where the files are

\app\bower_components\font-awesome\font

is there some kind of pre-processing task to copy this to /dist/font ?

I can't really do this manually as the directories are cleaned so everything is removed.

Thanks in advance

[eddiemonge]

how are the files referenced? is your repo on github somewhere? This is more of a stackoverflow question by the way

[eddiemonge]

you probably need to add a copy task to copy the files from the bower_components directory to the styles/fonts directory.

[iangregsondev]

Hi Eddie,

Thanks for reply, do you have an example?

in the grunt file?

On 17 September 2013 19:16, Eddie Monge Jr. [email protected]:

you probably need to add a copy task to copy the files from the
bower_components directory to the styles/fonts directory.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/350#issuecomment-24610339
.

[iangregsondev]

Hi there,

I have a solution, turned out to be quite easy, thanks eddie for pointing me in the right direction.

In case anyone needs it, you need to enter the following in the copy task of the gruntfile, in the files array.

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

Regards

[Urigo]

@altdeveloper @passy That's great. but I can see that in the current generator, the javascript files are being copied by usemin task with index.html annotations.
Should we use the same method with the fonts folder?

[pagoenka]

Use flatten option while copying files, I used config like below

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

[WeHateNick]

I tried both config options as suggested by @ianjohnmadrid and @pagoenka to no avail. Below is what I'm trying (note that it seems like the Gruntfile seems to be using "config.dist" instead of "yeoman.dist" when it gets scaffolded. I imagine this happened during a recent update to Yeoman. I'm using the webapp generator in this case.)

copy: {
      dist: {
        files: [{
          expand: true,
          dot: true,
          cwd: '<%= config.app %>',
          dest: '<%= config.dist %>',
          src: [
            '*.{ico,png,txt}',
            'images/{,*/}*.webp',
            '{,*/}*.html',
            'styles/fonts/{,*/}*.*'
          ]
        }, {
          src: 'node_modules/apache-server-configs/dist/.htaccess',
          dest: '<%= config.dist %>/.htaccess'
        }, {
          expand: true,
          flatten: true,
          dest: '<%= config.dist %>/fonts',
          src: ['bower_components/components-font-awesome/fonts/.'],
          filter: 'isFile'
        }]
      },
      styles: {
        expand: true,
        dot: true,
        cwd: '<%= config.app %>/styles',
        dest: '.tmp/styles/',
        src: '{,*/}*.css'
      }
    },

Everything except for the font awesome part was scaffolded out by Yeoman and is working fine. When I run grunt build, I can see that all the other files are being copied over to /dist just fine, except the fontawesome dir is not.

Any suggestions?

[cesalberca]

copy: {
  dist: {
    files: [{
      expand: true,
      dot: true,
      cwd: '<%= config.app %>',
      dest: '<%= config.dist %>',
      src: [
        '*.{ico,png,txt}',
        'images/{,*/}*.webp',
        '{,*/}*.html',
        'styles/fonts/{,*/}*.*'
      ]
    }, {
      src: 'node_modules/apache-server-configs/dist/.htaccess',
      dest: '<%= config.dist %>/.htaccess'
    }, {
      expand: true,
      flatten: true,
      cwd: 'bower_components/fontawesome/fonts',
      dest: '<%= config.dist %>/fonts',
      src: ['*.*'],
      filter: 'isFile'
    }]
  },
  styles: {
    expand: true,
    dot: true,
    cwd: '<%= config.app %>/styles',
    dest: '.tmp/styles/',
    src: '{,*/}*.css'
  }
},

I had the same problem, this is how I made it work.