Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add base64 support #1

Merged
merged 4 commits into from
Apr 6, 2016
Merged

Add base64 support #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f443a89
Adds base64 font support in compiled .css and .scss
Apr 5, 2016
bee2824
Adds clean task to remove unused woff
Apr 5, 2016
6849c06
Added maxImageSize to base64 convertor
Apr 5, 2016
cfd6ae6
Removed gulp-iconfont-css
Apr 5, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 1 addition & 4 deletions dist/app/_icons.scss
View file
Open in desktop

Large diffs are not rendered by default.

Binary file modified dist/app/fonts/hs-app.eot
View file
Open in desktop
Binary file not shown.
354 changes: 0 additions & 354 deletions dist/app/fonts/hs-app.svg
View file
Open in desktop

This file was deleted.

Binary file removed dist/app/fonts/hs-app.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed dist/app/fonts/hs-app.woff
View file
Open in desktop
Binary file not shown.
Binary file removed dist/app/fonts/hs-app.woff2
View file
Open in desktop
Binary file not shown.
9 changes: 3 additions & 6 deletions dist/app/icons.css
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 1 addition & 4 deletions dist/custom-app/_icons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,7 @@ $HS-icon-font-path: '/dist/hs-custom-app/fonts' !default;
font-family: "hs-custom-app";
src: url('#{$HS-icon-font-path}/hs-custom-app.eot');
src: url('#{$HS-icon-font-path}/hs-custom-app.eot?#iefix') format('eot'),
url('#{$HS-icon-font-path}/hs-custom-app.woff2') format('woff2'),
url('#{$HS-icon-font-path}/hs-custom-app.woff') format('woff'),
url('#{$HS-icon-font-path}/hs-custom-app.ttf') format('truetype'),
url('#{$HS-icon-font-path}/hs-custom-app.svg#hs-custom-app') format('svg');
url(data:application/font-woff;base64,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) format('woff');
}

.icon {
Expand Down
Binary file modified dist/custom-app/fonts/hs-custom-app.eot
View file
Open in desktop
Binary file not shown.
60 changes: 0 additions & 60 deletions dist/custom-app/fonts/hs-custom-app.svg
View file
Open in desktop

This file was deleted.

Binary file removed dist/custom-app/fonts/hs-custom-app.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed dist/custom-app/fonts/hs-custom-app.woff
View file
Open in desktop
Binary file not shown.
Binary file removed dist/custom-app/fonts/hs-custom-app.woff2
View file
Open in desktop
Binary file not shown.
9 changes: 3 additions & 6 deletions dist/custom-app/icons.css
View file
Open in desktop

Large diffs are not rendered by default.

67 changes: 51 additions & 16 deletions gulpfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
var gulp = require('gulp');
var fs = require('fs');
var path = require('path');
var async = require('async');
var iconfont = require('gulp-iconfont');
var iconfontCss = require('gulp-iconfont-css');
var del = require('del');
var base64 = require('gulp-base64');
var consolidate = require('gulp-consolidate');
var del = require('del');
var fs = require('fs');
var iconfont = require('gulp-iconfont');
var path = require('path');
var rename = require('gulp-rename');
var runSequence = require('run-sequence');


// Methods
Expand All @@ -19,28 +21,33 @@ function getFolders(dir) {

// Clean
gulp.task('clean', function(fn) {
return del(['dist'], fn);
return del(['dist/**/*'], fn);
});

gulp.task('clean-woff', function(fn) {
return del(['dist/**/*.woff'], fn);
});



// Font Icon Building
gulp.task('iconfont', ['clean'], function() {
gulp.task('font-icon', function(fn) {
var directories= getFolders('src');
directories.forEach(function(dir) {

directories.forEach(function(dir, index) {
var iconName = 'hs-' + dir;
var srcPath = path.join('src', dir, '*.svg');
var destPath = path.join('dist', dir);

var iconStream = gulp.src(srcPath)
.pipe(iconfont({
fontName: iconName,
formats: ['svg', 'ttf', 'eot', 'woff', 'woff2']
formats: ['woff', 'eot']
}));

// HTML + MD
async.parallel([
function handleGlyphs (cb) {
// HTML + MD
iconStream.on('glyphs', function(glyphs, options) {

// SCSS
Expand Down Expand Up @@ -79,23 +86,51 @@ gulp.task('iconfont', ['clean'], function() {
.pipe(gulp.dest(destPath));
});
},

function handleFonts(cb) {
iconStream
.pipe(gulp.dest(destPath + '/fonts'));
.pipe(gulp.dest(destPath + '/fonts'))
.on('end', function() {
// Base64 font injection
var _destPath = destPath + '/';
generateBase64(_destPath, '*.css');
generateBase64(_destPath, '*.scss');
gulp.start('clean-woff');
});
}
]);

});
});


// Generate Base64
var generateBase64 = function(path, file) {
if(!path || !file) {
return false;
}

return gulp.src(path + file)
.pipe(base64({
extensions: ['woff', 'eot'],
maxImageSize: 500000
}))
.pipe(gulp.dest(path));
};



// Watch
gulp.task('watch', function() {
gulp.watch(['src/**/*.svg'],
['iconfont']);
['generate-font']);
});



// Build tasks
gulp.task('generate-font', function(fn) {
runSequence('clean', 'font-icon', fn);
});


// Tasks
gulp.task('default', ['iconfont']);
gulp.task('default', ['generate-font']);
4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,10 @@
"browser-sync": "^2.11.2",
"del": "^2.2.0",
"gulp": "^3.9.1",
"gulp-base64": "^0.1.3",
"gulp-consolidate": "^0.2.0",
"gulp-iconfont": "^6.0.0",
"gulp-iconfont-css": "^2.1.0"
"gulp-rename": "^1.2.2",
"run-sequence": "^1.1.5"
}
}
5 changes: 1 addition & 4 deletions templates/_icons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,7 @@ $HS-icon-font-path: '/dist/<%= fontName %>/fonts' !default;
font-family: "<%= fontName %>";
src: url('#{$HS-icon-font-path}/<%= fontName %>.eot');
src: url('#{$HS-icon-font-path}/<%= fontName %>.eot?#iefix') format('eot'),
url('#{$HS-icon-font-path}/<%= fontName %>.woff2') format('woff2'),
url('#{$HS-icon-font-path}/<%= fontName %>.woff') format('woff'),
url('#{$HS-icon-font-path}/<%= fontName %>.ttf') format('truetype'),
url('#{$HS-icon-font-path}/<%= fontName %>.svg#<%= fontName %>') format('svg');
url('fonts/<%= fontName %>.woff') format('woff');
}

.<%= cssClass %> {
Expand Down
5 changes: 1 addition & 4 deletions templates/icons.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,7 @@
font-family: "<%= fontName %>";
src: url('fonts/<%= fontName %>.eot');
src: url('fonts/<%= fontName %>.eot?#iefix') format('eot'),
url('fonts/<%= fontName %>.woff2') format('woff2'),
url('fonts/<%= fontName %>.woff') format('woff'),
url('fonts/<%= fontName %>.ttf') format('truetype'),
url('fonts/<%= fontName %>.svg#<%= fontName %>') format('svg');
url('fonts/<%= fontName %>.woff') format('woff');
}

.<%= cssClass %> {
Expand Down