世書 名付, Mini Gulp

Introduction to Gulp.js 6: Images and Vector Fonts

This is the 6th part of my series Introduction to Gulp.js. The last article was very long and complicated. This time it’s a easier one: I will show how I move my images and generate vector fonts.

Images

The image task is a simple one again. All it does for now is copying the images to the asset directory. I will optimize my images later during the production build.

gulp/config.js
gulp/tasks/development/images.js

Vector Fonts

I use vector fonts for my website. Vector fonts are one option to include high quality icons on a website. Another option is using SVG directly or to use high resolution images.

I use Font Custom to generate my vector fonts. There is a gulp plugin for this, but I couldn’t get it running. But I’m totally fine with running this task with a shell command (via Gulp.js). I will use Gulp.js later to watch the folder containing the SVG files and recreate the vector fonts if needed.

First I need to install Font Custom (with Homebrew, you can find more installation methods on the Font Custom website):

$ brew install fontforge —-with-python
$ brew install eot-utils

Next I run the command bundle exec fontcustom config inside my main projects directory, which will create a file fontcustom.yml. I adjust my file until it looks like this:

fontcustom.yml

Next I add configuration and the task to copy the fonts to their location:

gulp/config.js
gulp/tasks/development/copy-fonts.js

As you may have seen, before copying the fonts to the asset folder another task gets executed: fontcustom.

Font Custom checks the files for changes and doesn’t generate anything if the files are still the same.

To execute a shell command I use the Gulp.js plugin gulp-shell:

$ npm install —-save-dev gulp-shell@0.5.0
gulp/tasks/development/fontcustom.js

Fontcustom is a Ruby Gem and you’ll need to install the Gem either globally or in your Gemfile (if you install it globally you need to drop the bundle exec from your command). I choose to install it with my Gemfile:

Gemfile

After you add the line for fontcustom you will need to run bundle install again.

Source Code

View Source on GitHub

Conclusion

This concludes the 6th part of my series Introduction to Gulp.js. We learned how to move files with Gulp.js (and don’t even need a plugin for that), and how I create my vector fonts. Nothing special, but the next part will be more interesting again.


This article was first published on stefanimhoff.de
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.