Skip to content

K
kpp
Commit e25a94d1 authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

Добавил генератор favicon

parent e787f439
Hide whitespace changes
Inline Side-by-side
Showing with 86 additions and 11 deletions
README.md
View file @ e25a94d1
......@@ -20,6 +20,10 @@
<td><code>npm start ЗАДАЧА</code></td>
<td>Запустить задачу с названием ЗАДАЧА (список задач в <code>gulpfile.js</code>)</td>
</tr>
<tr>
<td><code>npm start check:favicons:update</code></td>
<td>Проверка актуальности данных <a href="https://realfavicongenerator.net/">генератора favicon</a> (при старте автоматизации генерирует favicon из <code>./src/img/favicon-lg.png</code> (должна быть 260×260 или больше) и доп. файлы, всё пишет в <code>./build/img</code>)</td>
</tr>
<tr>
<td><code>npm run build</code></td>
<td>Сборка проекта без карт кода (сжатый вид, как результат работы)</td>
......
faviconData.json 0 → 100644
View file @ e25a94d1
{"result":{"status":"success"},"favicon":{"package_url":"https://realfavicongenerator.net/files/897613615b53f4fadbb9e3e1b402e247406e2b7c/favicons.zip","files_urls":["https://realfavicongenerator.net/files/897613615b53f4fadbb9e3e1b402e247406e2b7c/package_files/android-chrome-192x192.png","https://realfavicongenerator.net/files/897613615b53f4fadbb9e3e1b402e247406e2b7c/package_files/android-chrome-256x256.png","https://realfavicongenerator.net/files/897613615b53f4fadbb9e3e1b402e247406e2b7c/package_files/apple-touch-icon.png","https://realfavicongenerator.net/files/897613615b53f4fadbb9e3e1b402e247406e2b7c/package_files/browserconfig.xml","https://realfavicongenerator.net/files/897613615b53f4fadbb9e3e1b402e247406e2b7c/package_files/favicon-16x16.png","https://realfavicongenerator.net/files/897613615b53f4fadbb9e3e1b402e247406e2b7c/package_files/favicon-32x32.png","https://realfavicongenerator.net/files/897613615b53f4fadbb9e3e1b402e247406e2b7c/package_files/favicon.ico","https://realfavicongenerator.net/files/897613615b53f4fadbb9e3e1b402e247406e2b7c/package_files/manifest.json","https://realfavicongenerator.net/files/897613615b53f4fadbb9e3e1b402e247406e2b7c/package_files/mstile-144x144.png","https://realfavicongenerator.net/files/897613615b53f4fadbb9e3e1b402e247406e2b7c/package_files/mstile-150x150.png","https://realfavicongenerator.net/files/897613615b53f4fadbb9e3e1b402e247406e2b7c/package_files/mstile-310x150.png","https://realfavicongenerator.net/files/897613615b53f4fadbb9e3e1b402e247406e2b7c/package_files/mstile-310x310.png","https://realfavicongenerator.net/files/897613615b53f4fadbb9e3e1b402e247406e2b7c/package_files/mstile-70x70.png","https://realfavicongenerator.net/files/897613615b53f4fadbb9e3e1b402e247406e2b7c/package_files/safari-pinned-tab.svg"],"html_code":"<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"/img/apple-touch-icon.png\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/img/favicon-32x32.png\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/img/favicon-16x16.png\">\n<link rel=\"manifest\" href=\"/img/manifest.json\">\n<link rel=\"mask-icon\" href=\"/img/safari-pinned-tab.svg\" color=\"#ffffff\">\n<link rel=\"shortcut icon\" href=\"/img/favicon.ico\">\n<meta name=\"msapplication-TileColor\" content=\"#ffffff\">\n<meta name=\"msapplication-TileImage\" content=\"/img/mstile-144x144.png\">\n<meta name=\"msapplication-config\" content=\"/img/browserconfig.xml\">\n<meta name=\"theme-color\" content=\"#ffffff\">","compression":"false","overlapping_markups":["link[rel=\"apple-touch-icon\"]","link[rel=\"shortcut\"]","link[rel=\"shortcut icon\"]","link[rel=\"icon\",sizes=\"16x16\"]","link[rel=\"icon\",sizes=\"32x32\"]","meta[name=\"msapplication-TileColor\"]","meta[name=\"msapplication-TileImage\"]","meta[name=\"msapplication-config\"]","link[rel=\"manifest\"]","meta[name=\"theme-color\"]","link[rel=\"mask-icon\"]"]},"files_location":{"type":"path","path":"/img"},"preview_picture_url":"https://realfavicongenerator.net/files/897613615b53f4fadbb9e3e1b402e247406e2b7c/favicon_preview.png","version":"0.15"}
\ No newline at end of file
gulpfile.js
View file @ e25a94d1
......@@ -5,6 +5,7 @@ const fs = require('fs');
const gulp = require('gulp');
const gulpSequence = require('gulp-sequence');
const browserSync = require('browser-sync').create();
const realFavicon = require ('gulp-real-favicon');
const postcss = require('gulp-postcss');
const autoprefixer = require("autoprefixer");
......@@ -30,6 +31,9 @@ let dirs = projectConfig.dirs;
let lists = getFilesList(projectConfig);
// console.log(lists);
// файл с настройками фавиконок
const faviconData = './faviconData.json';
// Формирование и запись диспетчера подключений (style.scss), который компилируется в style.min.css
let styleImports = '/*!*\n * ВНИМАНИЕ! Этот файл генерируется автоматически.\n * Не пишите сюда ничего вручную, все такие правки будут потеряны.\n * Читайте ./README.md для понимания.\n */\n\n';
lists.css.forEach(function(blockPath) {
......@@ -199,6 +203,78 @@ gulp.task('copy:fonts', function () {
.pipe(gulp.dest(dirs.buildPath + '/fonts'));
});
// Генератор фавиконок
gulp.task('favicons', function(done) {
realFavicon.generateFavicon({
masterPicture: dirs.srcPath + '/img/favicon-lg.png',
dest: dirs.buildPath + '/img',
iconsPath: '/img',
design: {
ios: {
pictureAspect: 'backgroundAndMargin',
backgroundColor: '#ffffff',
margin: '14%',
assets: {
ios6AndPriorIcons: false,
ios7AndLaterIcons: false,
precomposedIcons: false,
declareOnlyDefaultIcon: true
}
},
desktopBrowser: {},
windows: {
pictureAspect: 'noChange',
backgroundColor: '#ffffff',
onConflict: 'override',
assets: {
windows80Ie10Tile: false,
windows10Ie11EdgeTiles: {
small: false,
medium: true,
big: false,
rectangle: false
}
}
},
androidChrome: {
pictureAspect: 'noChange',
themeColor: '#ffffff',
manifest: {
display: 'standalone',
orientation: 'notSet',
onConflict: 'override',
declared: true
},
assets: {
legacyIcon: false,
lowResolutionIcons: false
}
},
safariPinnedTab: {
pictureAspect: 'silhouette',
themeColor: '#ffffff'
}
},
settings: {
scalingAlgorithm: 'Mitchell',
errorOnImageTooSmall: false
},
markupFile: faviconData
}, function() {
done();
});
});
// Ручная проверка актуальности данных для favicon. Запускать перед стартом нового проекта.
gulp.task('check:favicons:update', function(done) {
var currentVersion = JSON.parse(fs.readFileSync(faviconData)).version;
realFavicon.checkForUpdates(currentVersion, function(err) {
if (err) {
throw err;
}
});
});
// Сборка SVG-спрайта для блока sprite-svg
let spriteSvgPath = dirs.srcPath + dirs.blocksDirName + '/sprite-svg/svg/';
gulp.task('sprite:svg', function (callback) {
......@@ -306,6 +382,7 @@ gulp.task('html', function() {
basepath: '@file',
indent: true,
}))
.pipe(realFavicon.injectFaviconMarkups(JSON.parse(fs.readFileSync(faviconData)).favicon.html_code))
.pipe(replace(/\n\s*<!--DEV[\s\S]+?-->/gm, ''))
.pipe(gulp.dest(dirs.buildPath));
});
......@@ -367,8 +444,8 @@ gulp.task('img:opt', function (callback) {
// Сборка всего
gulp.task('build', function (callback) {
gulpSequence(
'clean',
['sprite:svg', 'sprite:png'],
['clean'],
['sprite:svg', 'sprite:png', 'favicons'],
['style', 'style:single', 'js', 'copy:css', 'copy:img', 'copy:js', 'copy:fonts'],
'html',
callback
......
src/_include/page_head.html
View file @ e25a94d1
......@@ -14,12 +14,4 @@
@@include('../blocks/is-mobile/is-mobile--to-head.js')
</script>
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<!--DEV Такой комментарий не попадет в собранный HTML
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
-->
<!--DEV Перед </head> при сборке будут вставлены ссылки на favicon и служебные файлы -->
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment