Question

我正在尝试在GULP中创建像这样

的图标

var realFavicon = require ('gulp-real-favicon');
var fs = require('fs');

// File where the favicon markups are stored
var FAVICON_DATA_FILE = 'faviconData.json';

// Generate the icons. This task takes a few seconds to complete. 
// You should run it at least once to create the icons. Then, 
// you should run it whenever RealFaviconGenerator updates its 
// package (see the check-for-favicon-update task below).
gulp.task('generate-favicon', function(done) {
    realFavicon.generateFavicon({
        masterPicture: 'TODO: Path to your master picture',
        dest: 'TODO: Path to the directory where to store the icons',
        iconsPath: '/',
        design: {
            ios: {
                pictureAspect: 'noChange'
            },
            desktopBrowser: {},
            windows: {
                pictureAspect: 'noChange',
                backgroundColor: '#da532c',
                onConflict: 'override'
            },
            androidChrome: {
                pictureAspect: 'shadow',
                themeColor: '#ffffff',
                manifest: {
                    name: 'MyApp',
                    display: 'browser',
                    orientation: 'notSet',
                    onConflict: 'override'
                }
            },
            safariPinnedTab: {
                pictureAspect: 'silhouette',
                themeColor: '#5bbad5'
            }
        },
        settings: {
            scalingAlgorithm: 'Mitchell',
            errorOnImageTooSmall: false
        },
        markupFile: FAVICON_DATA_FILE
    }, function() {
        done();
    });
});

// Inject the favicon markups in your HTML pages. You should run 
// this task whenever you modify a page. You can keep this task 
// as is or refactor your existing HTML pipeline.
gulp.task('inject-favicon-markups', function() {
    gulp.src([ 'TODO: List of the HTML files where to inject favicon markups' ])
        .pipe(realFavicon.injectFaviconMarkups(JSON.parse(fs.readFileSync(FAVICON_DATA_FILE)).favicon.html_code))
        .pipe(gulp.dest('TODO: Path to the directory where to store the HTML files'));
});

// Check for updates on RealFaviconGenerator (think: Apple has just
// released a new Touch icon along with the latest version of iOS).
// Run this task from time to time. Ideally, make it part of your 
// continuous integration system.
gulp.task('check-for-favicon-update', function(done) {
    var currentVersion = JSON.parse(fs.readFileSync(FAVICON_DATA_FILE)).version;
    realFavicon.checkForUpdates(currentVersion, function(err) {
        if (err) {
            throw err;
        }
    });
});

我唯一的问题是我没有 faviconData.json 可以有人分享他的，txanks

Answer 1

您应该返回Real Favicon Generator并按照安装步骤操作。基本上是：

替换＆＃34; TODO＆＃34;在生成的代码中包含实际路径。
运行gulp generate-favicon。这个一次性任务会生成您的图标以及您错过的faviconData.json文件。例如，此文件包含声明图标的HTML标记。
现在，您可以在部署网站，更新其中一个网页等时运行gulp inject-favicon-markups。

Answer 2

"favicons": {
    "files": {
      "src": "./dist/img/logo/favicon.png",
      "dest": "./dist/img/favicons/",
      "html": "./templates/misc/favicons.tpl.php",
      "iconsPath": "./dist/img/favicons/",
      "androidManifest": null,
      "browserConfig": null,
      "firefoxManifest": null,
      "yandexManifest": null
    },
    "icons": {
      "android": true,
      "appleIcon": true,
      "appleStartup": true,
      "coast": true,
      "favicons": true,
      "firefox": true,
      "opengraph": true,
      "windows": true,
      "yandex": true
    },
    "settings": {
      "appName": "name",
      "appDescription": "This is the app description",
      "developer": null,
      "developerURL": null,
      "version": 1.0,
      "background": null,
      "index": null,
      "url": null,
      "silhouette": false,
      "logging": true
    },
    "favicon_generation": null
  },

也许你可以使用它，你应该改变当然的设置：）

Gulp favicon任务

2 个答案: