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.
- Intro and Setup
- Server with BrowserSync and Configuration
- Build, Clean and Jekyll
- Creating CSS with Sass (and Compass)
- Images and Vector Fonts
- Base64 Encoded Images
- Watch for Changes
- Generating CSS Image Sprites
- Production Build, Server and Jekyll
- Deploying the Website with Rsync
- Performance Improvements with WebP and Gzip
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.
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:
Next I add configuration and the task to copy the fonts to their location:
As you may have seen, before copying the fonts to the asset folder another task gets executed:
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
$ npm install --save-dev email@example.com
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:
After you add the line for
fontcustom you will need to run
bundle install again.
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.