gulp iconfont
参考如下网站
https://github.com/hjzheng/CUF_meeting_knowledge_share/tree/master/2015-7-24/gulp-test-iconfont
gulpfile.js
var gulp = require('gulp');
var iconfont = require('gulp-iconfont');
var iconfontCss = require('gulp-iconfont-css');
var template = require('gulp-template');
var fs = require('fs');
var icons = fs.readdirSync('src/style/svg');
icons = icons.map(function(icon) {
return icon.replace(/\.\w+$/, '');
});
var cssName = 'iconfont'; //生成的css名称
gulp.task('icon', function() {
let dirname = 'src/style';
return gulp
.src([`${dirname}/svg/*.svg`])
.pipe(
iconfontCss({
fontName: 'iconfont', // iconfont.css的font-family值
path: `${dirname}/template/iconfont.template.less`, //css模版文件
targetPath: `../${cssName}.css`, //css生成文件
fontPath: 'fonts/' //iconfont.template.less文件中的fontPath
})
)
.pipe(
iconfont({
fontName: 'iconfont',
formats: ['svg', 'ttf', 'eot', 'woff', 'woff2'],
normalize: true
})
)
.pipe(gulp.dest(`${dirname}/fonts`)); //svg的字体文件存放位置
});
gulp.task('example', function() {
let dirname = 'src/style';
gulp.src(`${dirname}/example/index.html`) //样式例子文件
.pipe(template({ icons: icons, cssName: cssName }))
.pipe(gulp.dest(`${dirname}`)); //样式例子文件存放位置
});
gulp.task('default', ['icon', 'example']);
iconfont-template.less
@font-face {
font-family: "<%= fontName %>";
src: url('<%= fontPath %><%= fontName %>.eot');
src: url('<%= fontPath %><%= fontName %>.eot?#iefix') format('eot'),
url('<%= fontPath %><%= fontName %>.woff') format('woff'),
url('<%= fontPath %><%= fontName %>.ttf') format('truetype'),
url('<%= fontPath %><%= fontName %>.svg#<%= fontName %>') format('svg');
font-weight: normal;
font-style: normal;
}
.icon:before {
font-family: "<%= fontName %>";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-style: normal;
font-variant: normal;
font-weight: normal;
/* speak: none; only necessary if not using the private unicode range (firstGlyph option) */
text-decoration: none;
text-transform: none;
}
<% _.each(glyphs, function(glyph) { %>
.icon-<%= glyph.fileName %>:before {
/* content: "\<%= JSON.stringify(glyph) %>";*/
content: "\<%= glyph.codePoint %>";
}
<% }); %>
example/index.html
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>icon font test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<%= cssName%>.css">
<style>
.icon_lists li{
float:left;
width: 120px;
height:170px;
text-align: center;
list-style: none;
}
.icon_lists .icon{
font-size: 42px;
margin: 10px 0;
color:#333;
-webkit-transition: font-size 0.25s ease-out 0s;
-moz-transition: font-size 0.25s ease-out 0s;
transition: font-size 0.25s ease-out 0s; }
.icon_lists .icon:hover{
font-size: 120px;
}
.name {
font-size: 16px;
} .clear:after {
content: '\20';
display: block;
height: 0;
clear: both;
}
</style>
</head> <body>
<h2>Icon Font</h2>
<ul class="icon_lists clear">
<% _.each(icons, function(icon) { %>
<li class="icon icon-<%= icon %>">
<div class="name"><%= icon%></div>
</li>
<% }); %>
</ul>
<div>
<h2>Use Icon Font</h2>
<pre>
<span class="icon icon-add"></span>
</pre>
</div>
</body>
</html>
执行语句
gulp icon
gulp example
与
gulp.task('example', function() {....
中的task值相同
gulpfile.js文件中增加
=====缺点
生成的font字体 1.只能是黑白色调， 2.svg图片中如果有线条重合，就会被重叠消除为白色【这个问题在icomoon网站中也存在】
=====总结
https://icomoon.io/app/ 这个网站生成font字体，还是不错的 【第一种缺点是没有颜色】 第二种生成iconfont方式【可以有颜色】 gulpfile.js
var gulp = require('gulp');
var rename = require('gulp-rename');
var iconfont = require('gulp-iconfont');
var consolidate = require('gulp-consolidate');
var template = require('gulp-template');
var fs = require('fs');
var icons = fs.readdirSync('src/style/svg');
icons = icons.map(function(icon) {
return icon.replace(/\.\w+$/, '');
});
gulp.task('icon', function() {
let dirname = 'src/style';
return gulp
.src([`${dirname}/svg/*.svg`])
.pipe(
iconfont({
fontName: 'iconfont1',
formats: ['svg', 'ttf', 'eot', 'woff', 'woff2'],
normalize: true,
options: {
fixedWidth: false,
normalize: false,
// fontHeight: 512,
// descent: -32
},
// prependUnicode: true // 会修改掉svg的名字
})
)
.on('glyphs', function(glyphs, options) {
gulp.src(`${dirname}/iconfont.template.1.less`)
.pipe(
consolidate('lodash', {
glyphs: glyphs.map(function(glyph) {
glyph.unicode = glyph.unicode[0]
.charCodeAt(0)
.toString(16)
.toUpperCase(); // unicode是16进制的
return glyph;
}),
fontName: options.fontName,
// glyphs: glyphs,
fontPath: 'fonts/'
})
)
.pipe(rename(`${options.fontName}.css`))
.pipe(gulp.dest(dirname));
})
.pipe(gulp.dest(`${dirname}/fonts`));
});
gulp.task('example', function() {
let dirname = 'src/style';
gulp.src(`${dirname}/example/index.1.html`)
.pipe(template({ icons: icons }))
.pipe(gulp.dest(`${dirname}`));
});
gulp.task('default', ['icon', 'example']);
iconfont-template.less
中循环语句修改
<% _.each(glyphs, function(glyph) { %>
.icon-<%= glyph.name %>:before {
/* content: "\<%= JSON.stringify(glyph) %>";*/
content: "\<%= glyph.unicode %>";
<%= glyph.color?'color:'+glyph.color :null %>
}
<% }); %>
gulp iconfont的更多相关文章
- webapp项目前端总结
提纲 整体把握,从设计稿入手——技术选型 并行开发,从实现静态页面开始 前端自动化 前端js逻辑 前后端集成 小问题集合 总结 1.整体把握,从设计稿入手 —— 技术选型 新项目到手,算是运气好,设计 ...
- 前端自动化构建工具gulp记录
一.安装 1)安装nodejs 通过nodejs的npm安装gulp,插件也可以通过npm安装.windows系统是个.msi工具,只要一直下一步即可,软件会自动在写入环境变量中,这样就能在cmd命令 ...
- 前端构建工具gulp使用
前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://g ...
- 前端们，gulp该用起来了，简单的demo入门——gulp系列（一）
gulp.grunt前端自动化工具,只有用过才知道多么重要. 它们问世这么久了?你真的用过吗? 写个简单的less.watch任务的demo分享———— 1.准备: 安装全局node.npm,这个教程 ...
- (转载)前端构建工具gulp使用
前端构建工具gulp使用 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中 ...
- gulp编译less简单demo
写个简单的less.watch任务的demo分享———— 1.准备: 安装全局node.npm,这个教程很多不作详细介绍: 安装全局gulp npm install -g gulp 新建getstar ...
- nodejs iconfont处理
做前端优化,iconfont可以替换掉很多图片,减少请求,并有很好的兼容性,颜色大小也有很好的自由度.现在网上已经有很多公开的iconfont供我们使用.但是每个项目有不同的应用场景,网上的并不能满足 ...
- 前端构建工具gulp
前端构建工具gulp使用 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gul ...
- gulp生成发布包脚本
var formPost = require('./tools/submit.js');var gulp = require('gulp'), zip = require('gulp-zip'), h ...
随机推荐
- Windows 挂起进程
A thread can suspend and resume the execution of another thread. While a thread is suspended, it is ...
- Spring Boot JPA中使用@Entity和@Table
文章目录 默认实现 使用@Table自定义表格名字 在JPQL Queries中重写表格名字 Spring Boot JPA中使用@Entity和@Table 本文中我们会讲解如何在Spring Bo ...
- OpenWrt-19.07.2 For HC5861(极路由3) /HiWiFi/Gee最新固件，极路由3刷openwrt
OpenWrt For HiWiFi(HC5861) 自编译精减固件,极路由3自用固件 HC5861-uboot.bin v19.07.2 下载 支持 NTFS 读写 支持 Wi-Fi 5G 驱动 默 ...
- CC视频CTO栗伟：CDN系统架构及CC视频应用实践
2017 年 11 月9日,CC视频获2.08 亿元C轮融资. EGO 北京分会会员.CC视频CTO栗伟获邀作为 EGO 线上分享第三季嘉宾,与大家交流了CDN系统架构及CC 视频的应用实践. \\ ...
- 单源最短路径（3）：SPFA 算法
SPFA(Shortest Path Faster Algorithm)算法,是西南交通大学段凡丁于 1994 年发表的,其在 Bellman-ford 算法的基础上加上一个队列优化,减少了冗余的松弛 ...
- 从零搭建Prometheus监控报警系统
什么是Prometheus? Prometheus是由SoundCloud开发的开源监控报警系统和时序列数据库(TSDB).Prometheus使用Go语言开发,是Google BorgMon监控系统 ...
- 数学--数论--HDU 5019 revenge of GCD
Revenge of GCD Problem Description In mathematics, the greatest common divisor (gcd), also known as ...
- C++--浅谈开发系统的经验
最近写了不少类了,从垃圾代码爬坑,虽然还是很垃圾,但是照葫芦画瓢,有几分神韵.在这里总结一下,写类的经验教训. 第一步 分析: 当拿到一个要求时,要先去考虑怎样一个类到底该实现什么样的功能,有什么样的 ...
- 图论--二分图最佳完美匹配（KM模板）
#include <iostream> #include <cstring> #include <cstdio> using namespace std; cons ...
- [CodeForces-259C] Little Elephant and Bits
C. Little Elephant and Bits time limit per test 2 seconds memory limit per test 256 megabytes input ...