init gruntjs

stefanmeschke · stefanmeschke · commit 2bd919c2701e · 2016-10-30T03:06:44.000+01:00
diff --git a/gruntfile.js b/gruntfile.js
@@ -0,0 +1,30 @@
+var fontName = 'fonterrific';
+var fontClass = 'ft';
+var fontClassPrefix = 'ft-';
+
+module.exports = function(grunt) {
+    grunt.initConfig({
+        webfont: {
+            icons: {
+                src: 'icons/svg/*.svg',
+                dest: 'build/font',
+                destCss: 'build/',
+                options: {
+                    fontBaseName: fontName,
+                    fontFilename: fontName,
+                    template: 'templates/fonterrific.css',
+                    htmlDemoTemplate: 'templates/fonterrific.html',
+                    templateOptions: {
+                        fontBaseName: fontName,
+                        baseClass: fontClass,
+                        classPrefix: fontClassPrefix
+                    }
+                }
+            }
+        }
+    });
+
+    grunt.loadNpmTasks('grunt-webfont');
+
+    grunt.registerTask('default', ['webfont']);
+};
diff --git a/package.json b/package.json
@@ -23,5 +23,9 @@
   "bugs": {
     "url": "https://github.com/stefanmeschke/fonterrific/issues"
   },
-  "homepage": "https://github.com/stefanmeschke/fonterrific#readme"
+  "homepage": "https://github.com/stefanmeschke/fonterrific#readme",
+  "devDependencies": {
+    "grunt": "^1.0.1",
+    "grunt-webfont": "^1.6.0"
+  }
 }
diff --git a/templates/fonterrific.css b/templates/fonterrific.css
@@ -0,0 +1,24 @@
+<% if (fontfaceStyles) { %>
+@font-face {
+    font-family: "<%= fontBaseName %>";
+    <% if (fontSrc1) { %>src: <%= fontSrc1 %>;<% }%>
+    <% if (fontSrc2) { %>src: <%= fontSrc2 %>;<% }%>
+    font-weight: normal;
+    font-style: normal;
+}
+<% } %>
+
+.<%= baseClass %> {
+    display: inline-block;
+    font-size: inherit;
+    font: normal normal normal "<%= fontBaseName %>";
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+<% if (iconsStyles) { %>
+    <% for (var glyphIdx = 0; glyphIdx < glyphs.length; glyphIdx++) { %>
+.<%= classPrefix %><%= glyphs[glyphIdx] %>:before { content: "\<%= codepoints[glyphIdx] %>"; }
+    <% } %>
+<% } %>
diff --git a/templates/fonterrific.html b/templates/fonterrific.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Custom template: <%= fontBaseName %></title>
+    <link rel="stylesheet" href="<%= fontBaseName %>.css">
+</head>
+<body>
+<h1><%= fontBaseName %></h1>
+
+<div class="icons" id="icons">
+    <% for (var glyphIdx = 0; glyphIdx < glyphs.length; glyphIdx++) { var glyph = glyphs[glyphIdx] %>
+    <div data-name="<%= glyph %>"><i class="<%= baseClass %> <%= classPrefix %><%= glyph %>"></i> <%= classPrefix %><%= glyph %></div>
+    <% } %>
+</div>
+
+<h1>Usage</h1>
+<pre><code>&lt;i class=&quot;<%= baseClass ? baseClass + ' ' : '' %><%= classPrefix %><span id="name">name</span>&quot;&gt;&lt;/i&gt;</code></pre>
+
+<footer>Generated by <a href="https://github.com/sapegin/grunt-webfont">grunt-webfont</a>.</footer>
+
+<script>
+    (function() {
+        document.getElementById('icons').onclick = function(e) {
+            e = e || window.event;
+            document.getElementById('name').innerHTML = e.target.getAttribute('data-name') || e.target.parentNode.getAttribute('data-name');
+        }
+    })();
+</script>
+</body>
+</html>
