├── .gitignore ├── .jshintrc ├── LICENSE ├── README.md ├── gulpfile.js ├── index.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | cache.manifest 4 | _draft/ 5 | npm-debug.log 6 | .tmp 7 | .sass-cache 8 | .idea 9 | .markdowns 10 | release 11 | test 12 | 13 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "esnext": false, 3 | "moz": true, 4 | "boss": true, 5 | "node": true, 6 | "validthis": true, 7 | "browser": false, 8 | "globals": { 9 | "describe": true, 10 | "it": true 11 | } 12 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 糖饼 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 字蛛 - gulp 插件 2 | 3 | 字蛛是一个中文 WebFont 自动化压缩工具，它能自动分析页面使用的 WebFont 并进行按需压缩，无需手工配置。 4 | 5 | 官方网站： 6 | 7 | ## 特性 8 | 9 | 1. 按需压缩：从原字体中剔除没有用到的字符，可以将数 MB 大小的中文字体压缩成几十 KB 10 | 2. 简单可靠：完全基于 HTML 与 CSS 分析进行本地处理，无需 js 与服务端辅助 11 | 3. 自动转码：将字体转码成所有浏览器支持的格式，包括老旧的 IE6 与现代浏览器 12 | 4. 图标字体：除了常规的字体支持外，还支持图标字体（字蛛 v1.0.0 新特性） 13 | 14 | ## 安装 15 | 16 | ```shell 17 | npm install gulp-font-spider --save-dev 18 | ``` 19 | 20 | ## 使用 21 | 22 | ```javascript 23 | var gulp = require( 'gulp' ); 24 | var fontSpider = require( 'gulp-font-spider' ); 25 | 26 | gulp.task('fontspider', function() { 27 | return gulp.src('./index.html') 28 | .pipe(fontSpider()); 29 | }); 30 | 31 | gulp.task('defualt', ['fontspider']); 32 | ``` 33 | 34 | 推荐的跨浏览器 `@font-face` CSS 写法： 35 | 36 | ``` css 37 | /*声明 WebFont*/ 38 | @font-face { 39 | font-family: 'pinghei'; 40 | src: url('../font/pinghei.eot'); 41 | src: 42 | url('../font/pinghei.eot?#font-spider') format('embedded-opentype'), 43 | url('../font/pinghei.woff') format('woff'), 44 | url('../font/pinghei.ttf') format('truetype'), 45 | url('../font/pinghei.svg') format('svg'); 46 | font-weight: normal; 47 | font-style: normal; 48 | } 49 | 50 | /*使用选择器指定字体*/ 51 | .home h1, .demo > .test { 52 | font-family: 'pinghei'; 53 | } 54 | ``` 55 | 56 | > 特别说明： `@font-face` 中的 `src` 定义的 .ttf 文件必须存在，其余的格式将由工具自动生成 57 | 58 | ## API 59 | 60 | ### fontSpider(options) 61 | 62 | ### options 63 | 64 | ``` javascript 65 | { 66 | /** 67 | * 忽略加载的文件规则（支持正则） - 与 `resourceIgnore` 参数互斥 68 | * @type {Array} 69 | */ 70 | ignore: [], 71 | 72 | /** 73 | * 映射的文件规则（支持正则） - 与 `resourceMap` 参数互斥 - 可以将远程字体文件映射到本地来 74 | * @type {Array>} 75 | * @example [['http://font-spider.org/font', __diranme + '/font'], ...] 76 | */ 77 | map: [], 78 | 79 | /** 80 | * 是否支持备份原字体 81 | * @type {Boolean} 82 | */ 83 | backup: true, 84 | 85 | /** 86 | * 是否对查询到的文本进行去重处理 87 | * @type {Boolean} 88 | */ 89 | unique: true, 90 | 91 | /** 92 | * 是否排序查找到的文本 93 | * @type {Boolean} 94 | */ 95 | sort: true, 96 | 97 | /** 98 | * 是否支持加载外部 CSS 文件 99 | */ 100 | loadCssFile: true, 101 | 102 | /** 103 | * 是否忽略内部解析错误-关闭它有利于开发调试 104 | * @type {Boolean} 105 | */ 106 | silent: true, 107 | 108 | /** 109 | * 请求超时限制 110 | * @type {Number} 毫秒 111 | */ 112 | resourceTimeout: 8000, 113 | 114 | /** 115 | * 最大的文件加载数量限制 116 | * @type {Number} 数量 117 | */ 118 | resourceMaxNumber: 64, 119 | 120 | /** 121 | * 是否缓存请求成功的资源 122 | * @type {Boolean} 123 | */ 124 | resourceCache: true, 125 | 126 | /** 127 | * 映射资源路径 - 与 `map` 参数互斥 128 | * @param {String} 旧文件地址 129 | * @return {String} 新文件地址 130 | */ 131 | resourceMap: function(file) {}, 132 | 133 | /** 134 | * 忽略资源 - 与 `ignore` 参数互斥 135 | * @param {String} 文件地址 136 | * @return {Boolean} 如果返回 `true` 则忽略当当前文件的加载 137 | */ 138 | resourceIgnore: function(file) {}, 139 | 140 | /** 141 | * 资源加载前的事件 142 | * @param {String} 文件地址 143 | */ 144 | resourceBeforeLoad: function(file) {}, 145 | 146 | /** 147 | * 加载远程资源的自定义请求头 148 | * @param {String} 文件地址 149 | * @return {Object} 150 | */ 151 | resourceRequestHeaders: function(file) { 152 | return { 153 | 'accept-encoding': 'gzip,deflate' 154 | }; 155 | } 156 | } 157 | ``` 158 | 159 | ## 使用场景限制 160 | 161 | - 仅支持固定的文本与样式，不支持 javascript 动态插入的元素与样式 162 | - .otf 字体需要转换成 .ttf 才能被压缩 163 | - 仅支持 `utf-8` 编码的 HTML 与 CSS 文件 164 | - CSS `content` 属性只支持普通文本，不支持属性、计数器等特性 165 | 166 | ## 字体兼容性参考 167 | 168 | | 格式 | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Chrome for Android | 169 | | ------- | ---- | ------- | ------ | ------ | ----- | ---------- | --------------- | ------------------ | 170 | | `.eot` | 6 | -- | -- | -- | -- | -- | -- | -- | 171 | | `.woff` | 9 | 3.6 | 5 | 5.1 | 11.1 | 5.1 | 4.4 | 36 | 172 | | `.ttf` | -- | 3.5 | 4 | 3.1 | 10.1 | 4.3 | 2.2 | 36 | 173 | | `.svg` | -- | -- | 4 | 3.2 | 9.6 | 3.2 | 3 | 36 | 174 | 175 | 来源： 176 | 177 | ## 贡献者 178 | 179 | * [@chenmnkken](https://github.com/chenmnkken) 180 | * [@aui](https://github.com/aui) 181 | 182 | ## 相关链接 183 | 184 | - [fontmin](https://github.com/ecomfe/fontmin) 185 | - [Google: 网页字体优化](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization?hl=zh-cn) 186 | - [思源黑体: ttf 版本](https://github.com/akiratw/kaigen-gothic/releases) 187 | 188 | ============= 189 | 190 | *字体受版权保护，若在网页中使用商业字体，请联系相关字体厂商购买授权* -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var gulp = require('gulp'); 3 | var fontSpider = require('./'); 4 | 5 | gulp.task('font', function() { 6 | return gulp 7 | .src('test/*.html') 8 | .pipe(gulp.dest('release')) 9 | .pipe(fontSpider({ 10 | silent: false, 11 | backup: false, 12 | ignore: ['\\.woff2$'] 13 | })); 14 | }); 15 | 16 | gulp.task('default', ['font']); -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var fontSpider = require('font-spider'); 4 | var colors = require('colors/safe'); 5 | var through = require('through2'); 6 | var gutil = require('gutil'); 7 | var fs = require('fs'); 8 | var path = require('path'); 9 | var htmlFiles = null; 10 | 11 | function createStream(options) { 12 | 13 | options = options || {}; 14 | 15 | if (!options.resourceBeforeLoad) { 16 | options.resourceBeforeLoad = function(file) { 17 | if (/https?/.test(file)) { 18 | gutil.log('Load', colors.cyan(file)); 19 | } 20 | }; 21 | } 22 | 23 | 24 | function bufferContents(file, enc, callback) { 25 | 26 | if (file.isNull()) { 27 | callback(null); 28 | return; 29 | } 30 | 31 | if (file.isBuffer && file.isBuffer()) { 32 | if (!htmlFiles) { 33 | htmlFiles = []; 34 | } 35 | htmlFiles.push(file); 36 | callback(null, file); 37 | 38 | } else { 39 | callback(null, file); 40 | } 41 | 42 | } 43 | 44 | 45 | function endStream(callback) { 46 | 47 | if (!htmlFiles || htmlFiles.length === 0) { 48 | callback(); 49 | return; 50 | } 51 | 52 | fontSpider(htmlFiles, options).then(function(webFonts) { 53 | 54 | webFonts.forEach(function(webFont) { 55 | 56 | gutil.log('Font family', colors.green(webFont.family)); 57 | gutil.log('Original size', colors.green(webFont.originalSize / 1000 + ' KB')); 58 | gutil.log('Include chars', webFont.chars); 59 | gutil.log('Font id', webFont.id); 60 | gutil.log('CSS selectors', webFont.selectors.join(', ')); 61 | 62 | webFont.files.forEach(function(file) { 63 | if (fs.existsSync(file.url)) { 64 | gutil.log('File', colors.cyan(path.relative('./', file.url)) + ' created: ' + 65 | colors.green(file.size / 1000 + ' KB')); 66 | } else { 67 | gutil.log(colors.red('File ' + path.relative('./', file.url) + ' not created')); 68 | } 69 | }); 70 | }); 71 | 72 | callback(null); 73 | 74 | }).catch(callback); 75 | 76 | 77 | htmlFiles = null; 78 | } 79 | 80 | 81 | return through.obj(bufferContents, endStream); 82 | } 83 | 84 | module.exports = createStream; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gulp-font-spider", 3 | "version": "0.3.6", 4 | "description": "font-spider for gulp", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "gulp" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/aui/gulp-font-spider.git" 12 | }, 13 | "author": "chenmnkken@gmail.com, sugarpie.tang@gmail.com", 14 | "license": "ISC", 15 | "bugs": { 16 | "url": "https://github.com/aui/gulp-font-spider/issues" 17 | }, 18 | "homepage": "https://github.com/aui/gulp-font-spider", 19 | "dependencies": { 20 | "colors": "^1.1.2", 21 | "font-spider": "^1.0.0", 22 | "gutil": "^1.6.4", 23 | "through2": "^0.6.5" 24 | }, 25 | "devDependencies": { 26 | "gulp": "^3.9.1" 27 | } 28 | } 29 | --------------------------------------------------------------------------------