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

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

这是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.htmlair max 90 essential yellow

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

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部