字蛛，现已加入Gulp豪华午餐~

字蛛 （ fontspider ）是什么？用过 iconfont 我们知道图标也可以使用字体来绘制，各式各样的中文字体理所应当的也可以嵌入到Web上来。然而，相比英文字体，中文字体显然太过庞大，动辄几M的大小挂到页面上显然不现实。 字蛛 就应运而生，只保留你使用的文字，没有用到的字通通删掉，从而生成精简压缩的字体文件。

遇到特殊中文不想再切图片了？字蛛，让网页自由引入中文字体成为可能。更多详情请戳 → 字蛛官网

字蛛的 Gulp 插件现已基本完善，结合前面的 Gulp自动化教程   ，把字蛛（ fontspider ）整合到你的 gulpfile.js 中。

1. 给项目安装 gulp-font-spider

npm install gulp-font-spider --save-dev

2. 在 gulpfile.js 中引入 gulp-font-spider 插件，并修改原有任务

fontSpider = require( 'gulp-font-spider')

// fontspider gulp.task('fontspider', function() {   gulp.src('src/**/*.html')     .pipe(fontSpider()) });  // html gulp.task('html', function () {   gulp.src('src/*.html')     .pipe(fileinclude())     .pipe(rev())     .pipe(gulp.dest('dist/'));   return gulp.src('src/font/**/*')     .pipe(gulp.dest('dist/font')) });  // build gulp.task('build', ['sass', 'css', 'script', 'image', 'fontspider'], function () {   gulp.start('html'); });

3. 调整目录结构

源码目录增加 src/font 用于存放未修改字体

└── src/            源码目录

4. 在 CSS 和 HTML 中的正确打开方式

/*声明 WebFont*/ @font-face {   font-family: 'pinghei';   src: url('../font/pinghei.eot');   src:     url('../font/pinghei.eot?#font-spider') format('embedded-opentype'),     url('../font/pinghei.woff') format('woff'),     url('../font/pinghei.ttf') format('truetype'),     url('../font/pinghei.svg') format('svg');   font-weight: normal;   font-style: normal; }  /*使用选择器指定字体*/ .test {     font-family: 'pinghei'; }

本行文字将被标识

5. 完整的 gulpfile.js 示例

/*!  * gulp  * $ npm install gulp gulp-sass gulp-cached gulp-uglify gulp-rename gulp-concat gulp-notify gulp-filter gulp-jshint gulp-rev-append gulp-cssnano gulp-imagemin browser-sync gulp-font-spider gulp-file-include gulp-autoprefixer del --save-dev  */  // Load plugins var gulp = require('gulp'), // 必须先引入gulp插件     del = require('del'),  // 文件删除     sass = require('gulp-sass'), // sass 编译     cached = require('gulp-cached'), // 缓存当前任务中的文件，只让已修改的文件通过管道     uglify = require('gulp-uglify'), // js 压缩     rename = require('gulp-rename'), // 重命名     concat = require('gulp-concat'), // 合并文件     notify = require('gulp-notify'), // 相当于 console.log()     filter = require('gulp-filter'), // 过滤筛选指定文件     jshint = require('gulp-jshint'), // js 语法校验     rev = require('gulp-rev-append'), // 插入文件指纹（MD5）     cssnano = require('gulp-cssnano'), // CSS 压缩     imagemin = require('gulp-imagemin'), // 图片优化     browserSync = require('browser-sync'), // 保存自动刷新     fontSpider = require( 'gulp-font-spider'), // 字蛛，让Web中文字体成为可能     fileinclude = require('gulp-file-include'), // 可以 include html 文件     autoprefixer = require('gulp-autoprefixer'); // 添加 CSS 浏览器前缀  // sass gulp.task('sass', function() {   return gulp.src('src/sass/**/*.scss')  // 传入 sass 目录及子目录下的所有 .scss 文件生成文件流通过管道     .pipe(cached('sass'))  // 缓存传入文件，只让已修改的文件通过管道（第一次执行是全部通过，因为还没有记录缓存）     .pipe(sass({outputStyle: 'expanded'})) // 编译 sass 并设置输出格式     .pipe(autoprefixer('last 5 version')) // 添加 CSS 浏览器前缀，兼容最新的5个版本     .pipe(gulp.dest('dist/css')) // 输出到 dist/css 目录下（不影响此时管道里的文件流）     .pipe(rename({suffix: '.min'})) // 对管道里的文件流添加 .min 的重命名     .pipe(cssnano()) // 压缩 CSS     .pipe(gulp.dest('dist/css')) // 输出到 dist/css 目录下，此时每个文件都有压缩（*.min.css）和未压缩(*.css)两个版本 });  // css （拷贝 *.min.css，常规 CSS 则输出压缩与未压缩两个版本） gulp.task('css', function() {   return gulp.src('src/css/**/*.css')     .pipe(cached('css'))     .pipe(gulp.dest('dist/css')) // 把管道里的所有文件输出到 dist/css 目录     .pipe(filter(['**/*', '!*.min.css'])) // 筛选出管道中的非 *.min.css 文件     .pipe(autoprefixer('last 5 version'))     .pipe(gulp.dest('dist/css')) // 把处理过的 css 输出到 dist/css 目录     .pipe(rename({suffix: '.min'}))     .pipe(cssnano())     .pipe(gulp.dest('dist/css')) });  // styleReload （结合 watch 任务，无刷新CSS注入） gulp.task('styleReload', ['sass', 'css'], function() {   return gulp.src(['dist/css/**/*.css'])     .pipe(cached('style'))     .pipe(browserSync.reload({stream: true})); // 使用无刷新 browserSync 注入 CSS });  // script （拷贝 *.min.js，常规 js 则输出压缩与未压缩两个版本） gulp.task('script', function() {   return gulp.src(['src/js/**/*.js'])     .pipe(cached('script'))     .pipe(gulp.dest('dist/js'))     .pipe(filter(['**/*', '!*.min.js'])) // 筛选出管道中的非 *.min.js 文件     // .pipe(jshint('.jshintrc')) // js的校验与合并，根据需要开启     // .pipe(jshint.reporter('default'))     // .pipe(concat('main.js'))     // .pipe(gulp.dest('dist/js'))     .pipe(rename({suffix: '.min'}))     .pipe(uglify())     .pipe(gulp.dest('dist/js')) });  // image gulp.task('image', function() {   return gulp.src('src/img/**/*.{jpg,jpeg,png,gif}')     .pipe(cached('image'))     .pipe(imagemin({optimizationLevel: 3, progressive: true, interlaced: true, multipass: true}))      // 取值范围：0-7（优化等级）,是否无损压缩jpg图片，是否隔行扫描gif进行渲染，是否多次优化svg直到完全优化     .pipe(gulp.dest('dist/img')) });  // fontspider gulp.task('fontspider', function() {   gulp.src('src/**/*.html') // 输入所有的HTML页面给 font-spider 匹配标识文字     .pipe(fontSpider()) });  // html 编译 html 文件并复制字体 gulp.task('html', function () {   gulp.src('src/*.html')     .pipe(fileinclude()) // include html     .pipe(rev()) // 生成并插入 MD5     .pipe(gulp.dest('dist/'))   gulp.start('fontspider') // 在此处进行 fontspider 处理   return gulp.src('src/font/**/*')     .pipe(gulp.dest('dist/font')) // 将 font-spider 处理完的字复制到 dist/font });  // clean 清空 dist 目录 gulp.task('clean', function() {   return del('dist/**/*'); });  // build，关连执行全部编译任务 gulp.task('build', ['sass', 'css', 'script', 'image'], function () {   gulp.start('html'); });  // default 默认任务，依赖清空任务 gulp.task('default', ['clean'], function() {   gulp.start('build'); });  // watch 开启本地服务器并监听 gulp.task('watch', function() {   browserSync.init({     server: {       baseDir: 'dist' // 在 dist 目录下启动本地服务器环境，自动启动默认浏览器     }   });    // 监控 SASS 文件，有变动则执行CSS注入   gulp.watch('src/sass/**/*.scss', ['styleReload']);   // 监控 CSS 文件，有变动则执行CSS注入   gulp.watch('src/css/**/*.css', ['styleReload']);   // 监控 js 文件，有变动则执行 script 任务   gulp.watch('src/js/**/*.js', ['script']);   // 监控图片文件，有变动则执行 image 任务   gulp.watch('src/img/**/*', ['image']);   // 监控 html 文件，有变动则执行 html 任务   gulp.watch('src/**/*.html', ['html']);   // 监控 dist 目录下除 css 目录以外的变动（如js，图片等），则自动刷新页面   gulp.watch(['dist/**/*', '!dist/css/**/*']).on('change', browserSync.reload);  });

6. 使用场景及浏览器兼容性参考

使用场景限制:

• 仅支持固定的文本与样式，不支持 javascript 动态插入的元素与样式
• .otf 字体需要转换成 .ttf 才能被压缩
• 仅支持 utf-8 编码的 HTML 与 CSS 文件
• CSS content 属性只支持普通文本，不支持属性、计数器等特性

字体兼容性参考:

来源： http://caniuse.com/#feat=fontface

7.  正确的打开方式及待解决问题

单独执行 gulp fontspider 无法完成 fontspider，因为还需要复制字体到 dist/font ，请使用 gulp html 任务替代。原因在于没找到合适的方案定义输出字体文件位置，只能妥协的使用复制的方式附加在 html 任务里实现，单独使用 gulp fontspider 无法完成 fontspider 的所有流程。反而实现了在 watch 任务里使用 fontspider ，达成了意外的成就2333

字蛛，现已加入Gulp豪华午餐~