Gulp 图标任务

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

"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
  },

也许你可以用这个，当然你应该改变设置:)

Answer 2

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

用实际路径替换生成代码中的"TODO"。
运行gulp generate-favicon。此 once-in-a-while 任务会生成您的图标以及您错过的 faviconData.json 文件。例如，此文件包含声明图标的 HTML 标记。
现在，您可以随时运行 gulp inject-favicon-markups 部署网站、更新页面等。

Gulp 图标任务

Gulp favicon task

gulp

favicon

gulp-watch