Having some problems with using this with WSK about favicons HOT 9 CLOSED

Heya @gauntface, I'll download the WSK and have a look into the issue. It's a bit hard to debug this new version as most of the processing is done with a RealFaviconGenerator API call, but I think the error is due to the lack of a callback. Also there's a Gulp plugin now so I recommend using that: https://www.npmjs.com/package/gulp-favicons. Can you send me your favicon image file you're using?

from favicons.

Any issues you find, it would be good to reveal them in the logs, always a black box at the moment. I'll try out the gulp-favicons.

Just to let your know I'm working on the material-sprint branch AND I have an image not in the repo - happy to share, but any image to test would be fine.

from favicons.

@gauntface I tried out gulp-favicons by adding a new task to WSK and it appears to work okay:

gulp.task('favicons', function() {
  gulp.src('app/index.html')
    .pipe($.favicons({
      files: {
        dest: '../dist/images/',
        html: '../dist/index.html',
        androidManifest: '../dist/manifest.json',
        browserConfig: null,
        firefoxManifest: '../dist/manifest.webapp',
        yandexManifest: null
      },
      icons: {
        android: true,
        appleIcon: true,
        appleStartup: true,
        coast: true,
        favicons: true,
        firefox: true,
        opengraph: true,
        windows: true,
        yandex: true
      },
      settings: {
        appName: 'Web Starter Kit',
        appDescription: 'Web Starter Kit',
        developer: null,
        developerURL: null,
        background: '#3372DF',
        index: null,
        url: null,
        logging: true
      }
    }))
    .pipe(gulp.dest('dist'));
})

Long story short, the Gulp plugin works a little differently by parsing an HTML tag:

<link rel="favicons" href="images/logo.png" />

It removes it upon processing so there's no chance of a W3C validation error or anything. I'd like to make it accept an HTML file or an image when I get around to it.

from favicons.

Thanks for your help @haydenbleasel.

I'm getting different results to you:

$ gulp favicon
[15:15:48] Using gulpfile ~/Programming/Code/web-starter-kit/gulpfile.js
[15:15:48] Starting 'favicon'...
[15:15:48] Finished 'favicon' after 154 ms
Created apple-touch-startup-image-320x460.png

/Users/mattgaunt/Programming/Code/web-starter-kit/node_modules/gulp-favicons/node_modules/underscore/underscore.js:474
    for (var i = 0, length = input.length; i < length; i++) {
                                  ^
TypeError: Cannot read property 'length' of undefined
    at flatten (/Users/mattgaunt/Programming/Code/web-starter-kit/node_modules/gulp-favicons/node_modules/underscore/underscore.js:474:35)
    at Function._.flatten (/Users/mattgaunt/Programming/Code/web-starter-kit/node_modules/gulp-favicons/node_modules/underscore/underscore.js:489:12)
    at /Users/mattgaunt/Programming/Code/web-starter-kit/node_modules/gulp-favicons/index.js:87:50
    at /Users/mattgaunt/Programming/Code/web-starter-kit/node_modules/favicons/index.js:256:24
    at /Users/mattgaunt/Programming/Code/web-starter-kit/node_modules/favicons/node_modules/async/lib/async.js:544:30
    at /Users/mattgaunt/Programming/Code/web-starter-kit/node_modules/favicons/index.js:241:21
    at /Users/mattgaunt/Programming/Code/web-starter-kit/node_modules/favicons/index.js:130:24
    at /Users/mattgaunt/Programming/Code/web-starter-kit/node_modules/favicons/node_modules/async/lib/async.js:254:17
    at done (/Users/mattgaunt/Programming/Code/web-starter-kit/node_modules/favicons/node_modules/async/lib/async.js:129:15)
    at /Users/mattgaunt/Programming/Code/web-starter-kit/node_modules/favicons/node_modules/async/lib/async.js:32:16

I'm also slightly lost as to what this is now doing.

The gulp.src is app/index.html, we also have the html set to dist/index.html (If we can drop the dist/index.html one then thats awesome).

I'm also not following what dest: '../dest/images/', is doing in this if the gulp.dest is defining dist AND is gulp.dest for the images and the index.html or just one of them?

Pulling info out of the HTML file is actually really helpful for our usecase as it means we can push this to a build only step.

from favicons.

@gauntface I definitely agree it's confusing, I'd like to spend some time on making it simpler. Basically we're reading an HTML file instead of an image for streaming reasons - you can pipe it onto your html task in WSK, making it (as you said) a build-only step e.g.

return gulp.src('app/**/*.html')
    .pipe(assets)
    .pipe(favicons({ ... })) // Accepts HTML file(s), returns HTML file(s).
    .pipe($.if('*.js', $.uglify({preserveComments: 'some'})))
    ...

It accepts an HTML file with a custom metatag and returns an HTML file with new metatags. The produced images are basically an "add-on" which is why you need the files.dest property. I think I'll take your advice on removing files.html, it was there in case you don't want metadata printed to your HTML file but whatever, it's bad practice not to.

As for the error you're getting, I usually get that if my metatag is missing or the image reference is wrong. For you, this should be something like:

<link rel="favicons" href="images/favicons/favicon-1024x1024.png" />

I really need to either write down a list of these errors in the readme or make better error messages. Hope this helps and sorry for the hassle :S

from favicons.

Right, further digging (I'll post my code to get to this point), but the issue with a spawn task:

$ gulp favicons
[17:39:53] Using gulpfile ~/Programming/Code/web-starter-kit/gulpfile.js
[17:39:53] Starting 'favicons'...
[17:39:53] Finished 'favicons' after 123 ms
file.cwd = /Users/mattgaunt/Programming/Code/web-starter-kit
Created apple-touch-startup-image-320x460.png

/Users/mattgaunt/Programming/Code/web-starter-kit/node_modules/gulp-favicons/index.js:105
throw error;
^
Error: spawn ENOENT
at errnoException (child_process.js:988:11)
at Process.ChildProcess._handle.onexit (child_process.js:779:34)

I'm assuming this is an issue with the imagemagick but after installing it - I still can't get the damn thing to work :(

from favicons.

Ah - requires graphicsmagick too: https://www.npmjs.com/package/gm

from favicons.

So I've finally got it looking like it's working, but mashed things up into this PR: #25

from favicons.

@gauntface Awesome, thanks so much. Was it really necessary as part of the commit to change all my indentation and coding style though? I'm a huge fan of JSLint so that's from where most of my style is based.

Also, Addy proposed splitting gulp-favicons into a new repository so the new PR has to go here: https://github.com/haydenbleasel/gulp-favicons. Sorry about that :/

from favicons.