Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
ES6, woff2 and some cleaning for readability
- Loading branch information
Showing
8 changed files
with
128 additions
and
131 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,49 +1,67 @@ | ||
| var gulp = require("gulp"); | ||
| var rename = require("gulp-rename"); | ||
| var sketch = require("gulp-sketch"); | ||
| var iconfont = require('gulp-iconfont'); | ||
| var consolidate = require('gulp-consolidate'); | ||
| const | ||
| gulp = require('gulp'), | ||
| rename = require('gulp-rename'), | ||
| sketch = require('gulp-sketch'), | ||
| iconfont = require('gulp-iconfont'), | ||
| consolidate = require('gulp-consolidate') | ||
|
|
||
| var fontName = 'symbols'; // set name of your symbol font | ||
| var fontCssClassName = 's'; // set class name in your CSS | ||
| var template = 'fontawesome-style'; // you can also choose 'foundation-style' | ||
| var skethcFileName = 'symbol-font-14px.sketch'; // you can also choose 'symbol-font-16px.sketch' | ||
| /** | ||
| * Font settings | ||
| */ | ||
| const | ||
| // set name of your symbol font | ||
| fontName = 'symbols', | ||
| // set class name in your CSS | ||
| className = 's', | ||
| // you can also choose 'foundation-style' | ||
| template = 'fontawesome-style', | ||
| // you can also choose 'symbol-font-16px.sketch' | ||
| skethcFileName = 'symbol-font-14px.sketch' | ||
|
|
||
| gulp.task('symbols', function(){ | ||
| /** | ||
| * Recommended to get consistent builds when watching files | ||
| * See https://github.com/nfroidure/gulp-iconfont | ||
| */ | ||
| const timestamp = Math.round(Date.now() / 1000) | ||
|
|
||
| gulp.task('symbols', () => | ||
| gulp.src(skethcFileName) | ||
| .pipe(sketch({ | ||
| export: 'artboards', | ||
| formats: 'svg' | ||
| })) | ||
| .pipe(iconfont({ | ||
| fontName: fontName, | ||
| formats: ['ttf', 'eot', 'woff', 'svg'] | ||
| fontName, | ||
| formats: ['ttf', 'eot', 'woff', 'woff2', 'svg'], | ||
| timestamp, | ||
| log: () => {} // suppress unnecessary logging | ||
| })) | ||
| .on('glyphs', function(glyphs) { | ||
| var options = { | ||
| glyphs: glyphs.map(function(glyph) { | ||
| // this line is needed because gulp-iconfont has changed the api from 2.0 | ||
| return { name: glyph.name, codepoint: glyph.unicode[0].charCodeAt(0) } | ||
| }), | ||
| fontName: fontName, | ||
| .on('glyphs', (glyphs) => { | ||
| const options = { | ||
| className, | ||
| fontName, | ||
| fontPath: '../fonts/', // set path to font (from your CSS file if relative) | ||
| className: fontCssClassName | ||
| }; | ||
|
|
||
| gulp.src('templates/' + template + '.css') | ||
| glyphs: glyphs.map(mapGlyphs) | ||
| } | ||
| gulp.src(`templates/${ template }.css`) | ||
| .pipe(consolidate('lodash', options)) | ||
| .pipe(rename({ basename:fontName })) | ||
| .pipe(gulp.dest('dist/css/')); // set path to export your CSS | ||
| .pipe(rename({ basename: fontName })) | ||
| .pipe(gulp.dest('dist/css/')) // set path to export your CSS | ||
|
|
||
| // if you don't need sample.html, remove next 4 lines | ||
| gulp.src('templates/' + template + '.html') | ||
| gulp.src(`templates/${ template }.html`) | ||
| .pipe(consolidate('lodash', options)) | ||
| .pipe(rename({ basename:'sample' })) | ||
| .pipe(gulp.dest('dist/')); // set path to export your sample HTML | ||
| .pipe(rename({ basename: 'sample' })) | ||
| .pipe(gulp.dest('dist/')) // set path to export your sample HTML | ||
| }) | ||
| .pipe(gulp.dest('dist/fonts/')); // set path to export your fonts | ||
| }); | ||
| .pipe(gulp.dest('dist/fonts/')) // set path to export your fonts | ||
| ) | ||
|
|
||
| gulp.task('watch', () => gulp.watch('*.sketch', ['symbols'])) | ||
|
|
||
| gulp.task('watch', function(){ | ||
| gulp.watch('*.sketch/Data', { debounceDelay: 3000 }, ['symbols']); // wait 3 sec after the last run | ||
| }); | ||
| /** | ||
| * This is needed for mapping glyphs and codepoints. | ||
| */ | ||
| function mapGlyphs(glyph) { | ||
| return { name: glyph.name, codepoint: glyph.unicode[0].charCodeAt(0) } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -22,4 +22,4 @@ <h1><%= fontName %></h1> | |
| </li><% }); %> | ||
| </ul> | ||
| </body> | ||
| </html> | ||
| </html> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -22,4 +22,4 @@ <h1><%= fontName %></h1> | |
| </li><% }); %> | ||
| </ul> | ||
| </body> | ||
| </html> | ||
| </html> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,31 +1,51 @@ | ||
| var gulp = require("gulp"); | ||
| var rename = require("gulp-rename"); | ||
| var sketch = require("gulp-sketch"); | ||
| var iconfont = require('gulp-iconfont'); | ||
| var consolidate = require('gulp-consolidate'); | ||
| const | ||
| gulp = require('gulp'), | ||
| rename = require('gulp-rename'), | ||
| sketch = require('gulp-sketch'), | ||
| iconfont = require('gulp-iconfont'), | ||
| consolidate = require('gulp-consolidate') | ||
|
|
||
| var fontName = 'symbols'; // set name of your symbol font | ||
| var skethcFileName = 'symbol-android-16px.sketch'; | ||
| /** | ||
| * Font settings | ||
| */ | ||
| const | ||
| // set name of your symbol font | ||
| fontName = 'symbols' | ||
|
|
||
| gulp.task('symbols', function(){ | ||
| gulp.src(skethcFileName) // you can also choose 'symbol-font-16px.sketch' | ||
| /** | ||
| * Recommended to get consistent builds when watching files | ||
| * See https://github.com/nfroidure/gulp-iconfont | ||
| */ | ||
| const timestamp = Math.round(Date.now() / 1000) | ||
|
|
||
| gulp.task('symbols', () => | ||
| gulp.src('symbol-android-16px.sketch') | ||
| .pipe(sketch({ | ||
| export: 'artboards', | ||
| formats: 'svg' | ||
| })) | ||
| .pipe(iconfont({ fontName: fontName })) | ||
| .pipe(iconfont({ | ||
| fontName, | ||
| formats: ['ttf'], | ||
| timestamp, | ||
| log: () => {} // suppress unnecessary logging | ||
| })) | ||
| .on('glyphs', function(glyphs) { | ||
| var options = { | ||
| glyphs: glyphs.map(function(glyph) { | ||
| // this line is needed because gulp-iconfont has changed the api from 2.0 | ||
| return { name: glyph.name, codepoint: glyph.unicode[0].charCodeAt(0) } | ||
| }), | ||
| const options = { | ||
| glyphs: glyphs.map(mapGlyphs), | ||
| fontName: fontName | ||
| }; | ||
| } | ||
| gulp.src('android.xml') | ||
| .pipe(consolidate('lodash', options)) | ||
| .pipe(rename({ basename:fontName })) | ||
| .pipe(gulp.dest('dist/xml/')); // set path to export your xml | ||
| .pipe(rename({ basename: fontName })) | ||
| .pipe(gulp.dest('dist/xml/')) // set path to export your xml | ||
| }) | ||
| .pipe(gulp.dest('dist/fonts/')); // set path to export your fonts | ||
| }); | ||
| .pipe(gulp.dest('dist/fonts/')) // set path to export your fonts | ||
| ) | ||
|
|
||
| /** | ||
| * This is needed for mapping glyphs and codepoints. | ||
| */ | ||
| function mapGlyphs(glyph) { | ||
| return { name: glyph.name, codepoint: glyph.unicode[0].charCodeAt(0) } | ||
| } |