转载

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

这是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/ 。