Gulp系列教程：图片和矢量字体

作者：Blueed 日期：2015-12-25 点击：905
Gulp系列教程
gulp
workflow
工作流

这是Gulp系列教程的第六部分。上篇文章长而复杂。这次的文章比较简单：我会展示如何移动图片以及生成矢量字体。

Images

image任务很简单。现在它的功能仅仅是把图片复制到资源目录。我会在稍后产品构建的过程中优化图片。

// gulp/config.js

images: {
  src:  srcAssets + '/images/**/*',
  dest: developmentAssets + '/images'
}

// gulp/tasks/development/images.js

var gulp        = require('gulp');
var changed     = require('gulp-changed');
var config      = require('../../config').images;

/**
 * Copy images to build folder
 * if not changed
 */
gulp.task('images', function() {
  return gulp.src(config.src)
    .pipe(changed(config.dest)) // Ignore unchanged files
    .pipe(gulp.dest(config.dest));
});

矢量字体

我在网页中使用矢量字体。矢量字体是在网页中使用高质量图片的一个选项。另一个选项是直接用SVG或高分辨率图片。

我使用Font Custom来生成矢量字体。它也有gulp插件，但我运行不了。我觉得在命令行里运行任务（通过Gulp.js）完全可以接受。随后我会用Gulp.js监听含有SVG文件的目录并在需要时重建矢量字体。

首先需要安装Font custom（通过Homebrew，我可以在Font Custom网页上找到更多安装方法）：

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

下一步在主目录中运行命令bundle exec fontcustom config，这条命令会创建一个fontcustom.yml文件。修改文件如下：

# --------------------------------------------------------- #
#   Project Info
#   Default values shown. Learn more about these options by running
#   `fontcustom help` or visiting <http://fontcustom.com>.
# --------------------------------------------------------- #

font_name: fontcustom
css_selector: .icon-
css_prefix: icon-
preprocessor_path: "/assets/fonts"
autowidth: false
no_hash: false
force: false
debug: false
quiet: false

# -------------------------------------------------- #
# Project Paths
#   Relative paths are expanded from PROJECT_ROOT (defaults to the directory
#   where the fontcustom command is run). INPUT and OUTPUT can be strings or
#   hashes or file types / names.
# ------------------------------------------------- #

#project_root: some/other/place
#manifest: tmp/fontcustom

input:
  vectors: vectors # required
#  templates: app/assets/fonts/fontcustom/templates

output:
  fonts: app/_assets/fonts # required
  css: app/_assets/scss
  preview: docs
#  my-custom-template.yml: config

# ---------------------------------------------- #
# Templates
#   Included in Font Custom:
#     preview, css, scss, scss-rails, bootstrap, bootstrap-scss, bootstrap-ie7,
#     bootstrap-ie7-scss
#   Custom templates should be saved in the INPUT[:templates] directory and
#   referenced by their base file name.
# --------------------------------------------- #

templates: [ scss, preview ]

下一步添加配置文件以及任务用来把字体复制到目标路径：

// gulp/config.js

copyfonts: {
  development: {
    src:  srcAssets + '/fonts/*',
    dest: developmentAssets + '/fonts'
  }
}

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

var gulp   = require('gulp');
var config = require('../../config').copyfonts.development;

/**
 * Copy fonts to folder
 */
gulp.task('copy:fonts', ['fontcustom'], function() {
  return gulp.src(config.src)
    .pipe(gulp.dest(config.dest));
});

如你所见，在把字体复制到资源目录前还运行了另一个任务：fontcustom。

Font Custom检查文件的修改并且如果文件内容一致不会生成任何内容。

我使用gulp-shell插件来执行shell命令：

$ npm install --save-dev gulp-shell@0.5.0

// gulp/tasks/development/fontcustom.js

var gulp  = require('gulp');
var shell = require('gulp-shell');

/**
 * Generate fonts with Fontcustom
 * `brew install fontforge --with-python`
 * `brew install eot-utils`
 */
gulp.task('fontcustom', shell.task([
  'bundle exec fontcustom compile'
]));

Fontcustom是一个Ruby Gem包因此你需要全局安装Gem或在Gemfile中配置（如果全局安装需要在命令行中运行bundle exec）。我选择在Gemfile中安装。

source "https://rubygems.org"

gem 'jekyll', '~> 2.5.2'
gem 'sass', '>= 3.3'
gem 'fontcustom', '~> 1.3.7'

添加fontcustom配置后需要再次运行bundle install。

源代码

在Github上查看源码

总结

这是Gulp系列教程的第六部分的总结。我们学习了如何用Gulp.js移动文件（甚至不需要额外插件），以及如何创建矢量字体。这没有什么特别的，但是下一部分我们会再次讨论一些有趣的事情。

本文根据@Stefan Imhoff的《Introduction to Gulp.js 6: Images and Vector Fonts》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://stefanimhoff.de/2014/gulp-tutorial-6-images-vector-fonts/。

Blueed

现居上海。正在学习前端的道路上，欢迎交流。个人博客：Blueed.me,微博：@Ivan_z3

如需转载，烦请注明出处：http://www.w3cplus.com/workflow/gulp-tutorial-6-images-vector-fonts.html

返回顶部