From 2329b6916a5f0c1bbec65dca0050abc37829714d Mon Sep 17 00:00:00 2001 From: Daniil Novikau Date: Thu, 14 Dec 2017 23:39:17 +0300 Subject: [PATCH] Optimize fonts --- gulpfile.js | 194 +++++++++++++++++++++++++------------------ package.json | 9 ++ src/css/styles.css | 147 ++++++++++++-------------------- src/fonts/fonts.json | 1 + src/index.html | 43 +++++++++- 5 files changed, 218 insertions(+), 176 deletions(-) create mode 100644 src/fonts/fonts.json diff --git a/gulpfile.js b/gulpfile.js index 183b0f9..3b2d380 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,5 +1,6 @@ var fs = require('fs'); var del = require('del'); +var es = require('event-stream'); var gulp = require('gulp'); var inject = require('gulp-inject'); var sitemap = require('gulp-sitemap'); @@ -7,129 +8,160 @@ var robots = require('gulp-robots'); var favicon = require('gulp-real-favicon'); var inlinesource = require('gulp-inline-source'); var htmlmin = require('gulp-htmlmin'); +var htmlreplace = require('gulp-html-replace'); var imagemin = require('gulp-imagemin'); +var gfonts = require('gulp-gfonts'); +var minifyCSS = require('gulp-minify-css'); +var cssShorthand = require('gulp-shorthand'); +var uncss = require('gulp-uncss'); +var concat = require('gulp-concat'); // Common pathes var path = { - index: './src/index.html', - css: './src/css/**/*.css', - js: './src/js/**/*.js', - images: './src/images/**/*.*', - assets: './src/assets/**/rm-logo-border.png', - partials: './src/partials/*.html', - og: './src/partials/og-image.jpg', - gh: ['CNAME', '.nojekyll'], - favicon: { - description: './src/favicon/faviconDescription.json', - data: './src/favicon/faviconData.json', - }, - dest: './www', - url: 'https://repometric.com', + index: './src/index.html', + css: './src/css/**/*.css', + fonts: './src/fonts', + js: './src/js/**/*.js', + images: './src/images/**/*.*', + assets: './src/assets/**/rm-logo-border.png', + partials: './src/partials/*.html', + og: './src/partials/og-image.jpg', + gh: ['CNAME', '.nojekyll'], + favicon: { + description: './src/favicon/faviconDescription.json', + data: './src/favicon/faviconData.json', + }, + dest: './www', + url: 'https://repometric.com', }; // Clean output gulp.task('clean', function () { - return del([ - path.dest + '/**/*', - ]); + return del([ + path.dest + '/**/*', + ]); +}); + +// Fonts +gulp.task('fonts', function () { + return es.merge( + gulp.src(path.fonts + '/fonts.json') + .pipe(gfonts()) + .pipe(gulp.dest(path.dest)), + gulp.src(['./node_modules/font-awesome/fonts/fontawesome-webfont.*']) + .pipe(gulp.dest(path.dest + '/fonts/'))); }); // Copy static files gulp.task('static', function () { - return gulp - .src([path.images, path.assets], {base: 'src'}) - .pipe(gulp.dest(path.dest)); + return gulp.src([path.images, path.assets], {base: 'src'}) + .pipe(gulp.dest(path.dest)); +}); + +// Minify css +gulp.task('css', function(){ + return gulp.src(['./node_modules/bootstrap/dist/css/bootstrap.min.css', + './node_modules/font-awesome/css/font-awesome.min.css', path.css]) + .pipe(uncss({html: [path.index]})) + .pipe(concat('styles.min.css')) + .pipe(cssShorthand()) + .pipe(minifyCSS()) + .pipe(gulp.dest(path.dest + '/css')) }); // Copy GitHub files gulp.task('gh', function () { - return gulp - .src(path.gh) - .pipe(gulp.dest(path.dest)); + return gulp.src(path.gh) + .pipe(gulp.dest(path.dest)); }); // Inject partials gulp.task('inject', ['favicons'], function() { - var faviconData = fs.readFileSync(path.favicon.data); - var code = JSON.parse(faviconData).favicon.html_code; - return gulp - .src(path.index) - .pipe(inlinesource({ - compress: false, - })) - .pipe(favicon.injectFaviconMarkups(code)) - .pipe(inject(gulp.src([path.partials]), { - starttag: '', - relative: true, - transform: function (filePath, file) { - return file.contents.toString('utf8'); - }, - })) - .pipe(htmlmin({ - collapseWhitespace: true, - removeComments: true, - removeCommentsFromCDATA: true, - minifyCSS: true, - minifyJS: true, - })) - .pipe(gulp.dest(path.dest)); + var faviconData = fs.readFileSync(path.favicon.data); + var code = JSON.parse(faviconData).favicon.html_code; + return gulp + .src(path.index) + .pipe(htmlreplace({ + 'css': 'css/styles.min.css' + })) + .pipe(inlinesource({ + compress: false, + })) + .pipe(favicon.injectFaviconMarkups(code)) + .pipe(inject(gulp.src([path.partials]), { + starttag: '', + relative: true, + transform: function (filePath, file) { + return file.contents.toString('utf8'); + }, + })) + .pipe(htmlmin({ + collapseWhitespace: true, + removeComments: true, + removeCommentsFromCDATA: true, + minifyCSS: false, // skips @media & some other queries if set 'true' + minifyJS: true, + })) + .pipe(gulp.dest(path.dest)); }); // Generate favicons gulp.task('favicons', function(done) { - var faviconDescription = JSON.parse(fs.readFileSync(path.favicon.description)); - faviconDescription.markupFile = path.favicon.data; - faviconDescription.dest = path.dest; - return favicon.generateFavicon(faviconDescription, function() { - done(); - }); + var faviconDescription = JSON.parse(fs.readFileSync(path.favicon.description)); + faviconDescription.markupFile = path.favicon.data; + faviconDescription.dest = path.dest; + return favicon.generateFavicon(faviconDescription, function() { + done(); + }); }); // Generate sitemap file gulp.task('sitemap', function() { - return gulp - .src(path.index) - .pipe(sitemap({ - siteUrl: path.url, - })) - .pipe(gulp.dest(path.dest));; + return gulp + .src(path.index) + .pipe(sitemap({ + siteUrl: path.url, + })) + .pipe(gulp.dest(path.dest)); }); // Generate robots file gulp.task('robots', function() { - return gulp - .src(path.index) - .pipe(robots({ - useragent: '*', - allow: [], - disallow: [], - })) - .pipe(gulp.dest(path.dest));; + return gulp + .src(path.index) + .pipe(robots({ + useragent: '*', + allow: [], + disallow: [], + })) + .pipe(gulp.dest(path.dest)); }); // Copy Open Graph image gulp.task('og', function() { - return gulp - .src(path.og) - .pipe(gulp.dest(path.dest)); + return gulp + .src(path.og) + .pipe(gulp.dest(path.dest)); }); // Optimize images gulp.task('images', ['favicons', 'inject'], function() { - return gulp - .src(path.dest + '/**/*') - .pipe(imagemin()) - .pipe(gulp.dest(path.dest)); + return gulp + .src(path.dest + '/**/*') + .pipe(imagemin()) + .pipe(gulp.dest(path.dest)); }); // The default task (called when you run `gulp` from cli) gulp.task('default', [ - 'static', - 'favicons', - 'sitemap', - 'robots', - 'og', - 'gh', - 'inject', - 'images', + 'static', + 'css', + 'fonts', + 'favicons', + 'sitemap', + 'robots', + 'og', + 'gh', + 'inject', + 'images', ]); diff --git a/package.json b/package.json index ba4dbd4..e89e135 100644 --- a/package.json +++ b/package.json @@ -18,16 +18,25 @@ }, "homepage": "https://repometric.com", "devDependencies": { + "bootstrap": "^3.3.7", "clean-css": "^4.1.9", "del": "^3.0.0", + "event-stream": "^3.3.4", + "font-awesome": "^4.7.0", "gulp": "^3.9.1", + "gulp-concat": "^2.6.1", + "gulp-gfonts": "0.0.2", "gulp-htmlmin": "^3.0.0", + "gulp-html-replace": "^1.6.2", "gulp-imagemin": "^4.0.0", "gulp-inject": "^4.3.0", "gulp-inline-source": "^3.1.0", + "gulp-minify-css": "^1.2.4", "gulp-real-favicon": "^0.2.2", "gulp-robots": "^2.0.4", + "gulp-shorthand": "^1.1.0", "gulp-sitemap": "^4.2.0", + "gulp-uncss": "^1.0.6", "uglify-js": "^3.2.1" }, "scripts": { diff --git a/src/css/styles.css b/src/css/styles.css index 2dd4a6d..6510dc6 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -1,5 +1,16 @@ /* CSS Huck */ +:root { + --color-black: #231f20; + --color-white: white; + --color-grey: #594f51; + --color-dark-grey: #404040; + --color-light-grey: #efefef; + --color-green: #22aa60; + --color-pink: #db2352; + --main-font: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; +} + @keyframes spinner { to { transform: rotate(360deg); @@ -50,8 +61,8 @@ html { body { font-size: 100%; - font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; - background-color: #efefef; + font-family: var(--main-font); + background-color: var(--color-light-grey); } p { @@ -93,17 +104,11 @@ a img, border: 0; } -input { - border: none; - outline: none; -} - -img { +input, img { border: none; outline: none; } - /* remember to define focus styles! */ :focus { @@ -128,7 +133,6 @@ img { -ms-interpolation-mode: bicubic; } - /* End CSS Huck */ @@ -164,17 +168,10 @@ img { transform: scaleX(0); } -#subscribe { - padding-top: 5px; - visibility: hidden; - background: none; - color: black; -} - input[type=email] { float: left; margin-right: 10px; - color: white; + color: var(--color-white); width: 115px; -webkit-transition: all .35s; -o-transition: all .35s; @@ -197,59 +194,15 @@ input[type=email]:focus + #subscribe { visibility: visible; } -input[type=email]:active + #subscribe.loading #loading, -input[type=email]:focus + #subscribe.loading #loading{ - display: inline-block; - visibility: visible; -} - -input[type=email]:active + #subscribe.loading #enter, -input[type=email]:focus + #subscribe.loading #enter{ - display: none; - visibility: hidden; -} - .form { border-radius: 18.75em; height: 32px; } -#form.subscribe-error input[type=email] { - background-color: #DB2352; -} - -#form.subscribed input[type=email] { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - -o-user-select: none; - user-select: none; - pointer-events: none; - cursor: default; - width: 115px; - background-color: #22AA60; -} - -#form.subscribed input[type=email]:hover { - background-color: #22AA60; - box-shadow: 0 0 0 #000; - line-height: 20px; - font-size: 14px; -} - -#form.subscribed #subscribe { - visibility: hidden; -} - -#form.subscribe-error #message { - color: #DB2352; - display: block; -} - -#form.subscribe-success #message { - max-width: 770px; - color: #22AA60; - display: block; +#response { + -webkit-transition: all .35s; + -o-transition: all .35s; + transition: all .35s; } #message { @@ -259,7 +212,7 @@ input[type=email]:focus + #subscribe.loading #enter{ top: 47px; width: 250px; padding: 5px 10px; - background-color: #fff; + background-color: var(--color-white); border-radius: 5px; z-index: 5; box-shadow: 2px 2px 4px rgba(0, 0, 0, .05); @@ -279,6 +232,13 @@ input[type=email]:focus + #subscribe.loading #enter{ transition: .5s; } +#subscribe { + padding-top: 5px; + visibility: hidden; + background: none; + color: black; +} + #loading { display: none; text-align: center; @@ -309,47 +269,48 @@ input[type=email]:focus + #subscribe.loading #enter{ opacity: 0.7 !important; } - /* Placeholder behaviour */ input[type=email]::-webkit-input-placeholder { - color: white !important; + color: var(--color-white) !important; transition: color 0.7s ease; } input[type=email]:-ms-input-placeholder { - color: white !important; + color: var(--color-white) !important; transition: color 0.7s ease; } input[type=email]::-moz-placeholder { - color: white !important; + color: var(--color-white) !important; transition: color 0.7s ease; opacity: 1; } input[type=email]:-moz-placeholder { - color: white !important; + color: var(--color-white) !important; opacity: 1; transition: color 0.7s ease; } input[type=email]:focus::-webkit-input-placeholder { - color: rgba(255, 255, 255, .4) !important; + color: var(--color-white) !important; + opacity: .4; } input[type=email]:focus:-ms-input-placeholder { - color: rgba(255, 255, 255, .4) !important; + color: var(--color-white) !important; + opacity: .4; } input[type=email]:focus::-moz-placeholder { - color: rgba(255, 255, 255, .4) !important; - opacity: 1; + color: var(--color-white) !important; + opacity: .4; } input[type=email]:focus:-moz-placeholder { - color: rgba(255, 255, 255, .4) !important; - opacity: 1; + color: var(--color-white) !important; + opacity: .4; } @@ -379,7 +340,7 @@ label, input, p, a { - font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; + font-family: var(--main-font); } label { @@ -393,13 +354,13 @@ p { } ::-moz-selection { - color: white; + color: var(--color-white); text-shadow: none; background: #222; } ::selection { - color: white; + color: var(--color-white); text-shadow: none; background: #222; } @@ -410,7 +371,7 @@ ul { hr { border-width: 0.3em; - border-color: #231f20; + border-color: var(--color-black); margin-left: auto; margin-right: auto; max-width: 50px; @@ -418,14 +379,14 @@ hr { hr.underline { border-width: 0.3em; - border-color: #231f20; + border-color: var(--color-black); text-align: left; margin-left: 0 !important; margin: 1.9em; } a { - color: #231f20; + color: var(--color-black); font-size: 0.875em; -webkit-transition: all 0.35s; transition: all 0.35s; @@ -433,11 +394,12 @@ a { a:hover, a:focus { - color: #594f51; + color: var(--color-grey); } .btn { - font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; + /*font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;*/ + font-family: var(--main-font); border: none; border-radius: 18.75em; font-weight: 700; @@ -447,8 +409,8 @@ a:focus { } .btn-primary { - color: white; - background-color: #231f20; + color: var(--color-white); + background-color: var(--color-black); -webkit-transition: all 0.35s; transition: all 0.35s; border-color: inherit; @@ -464,8 +426,8 @@ a:focus { .btn-primary.active, .btn-primary:active:focus, .btn-primary.active.focus { - color: white; - background-color: rgb(64, 64, 64); + color: var(--color-white); + background-color: var(--color-dark-grey); border-color: inherit; outline-color: inherit; border: 0 !important; @@ -494,11 +456,10 @@ section>.row { @keyframes chColor { 100% { - color: white + color: var(--color-white); } } - /* Media queries */ @media (min-width: 1200px) { @@ -517,7 +478,7 @@ section>.row { @media (min-width: 768px) { body { - background: url('images/background.jpg') no-repeat; + background: url('../images/background.jpg') no-repeat; background-size: cover; background-attachment: fixed; } diff --git a/src/fonts/fonts.json b/src/fonts/fonts.json new file mode 100644 index 0000000..90183d8 --- /dev/null +++ b/src/fonts/fonts.json @@ -0,0 +1 @@ +{ "Open Sans": "300italic,400italic,600italic,700italic,800italic,300,400,600,700,800"} \ No newline at end of file diff --git a/src/index.html b/src/index.html index ea84ef7..0b9d000 100755 --- a/src/index.html +++ b/src/index.html @@ -25,15 +25,54 @@ + + + - + + -