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 ...
随机推荐
- 自动化部署jenkins
jenkins下载网站 https://mirrors.tuna.tsinghua.edu.cn/jenkins/redhat/ 一.配置环境 [root@localhost ~]# hostname ...
- C# richtextbox 自动下拉到最后 方法 & RichTextBox读取txt中文后出现乱码
C# richtextbox 自动滚动到最后 光标到最后 自动显示最后一行 private void richTextBox1_TextChanged(object sender, EventArg ...
- Linux从入门到精通系列之NFS
网络文件系统(NFS,Network File System)是一种将远程主机上的分区(目录)经网络挂载到本地系统的一种机制,通过对网络文件系统的支持,用户可以在本地系统上像操作本地分区一样来对远程主 ...
- Rabbit and Turtle
知乎上有这样一个问题:如果兔子都在拼命奔跑,是什么给了作为乌龟的你前进的动力? 随着视野的不断开阔,我们难免怀疑自身前进的意义,曾经有很长一段时间我也深陷其中,直到看到余亦多先生的回答才有所感悟. 问 ...
- 白话typescript中的【extends】和【infer】(含vue3的UnwrapRef)
大家好,我是小雨小雨,致力于分享有趣的.实用的技术文章. 内容分为翻译和原创,如果有问题,欢迎随时评论或私信,希望和大家一起进步. 分享不易,希望能够得到大家的支持和关注. extends types ...
- PyCharm 集成 SVN，检出、提交代码
1.安装 SVN,解决 SVN 目录中没有 svn.exe 问题 重新打开 TortoiseSVN 安装文件 选择 Modify 后在command line client tools 选项修改为 W ...
- idea使用maven在install时跳过测试
在右边1处点开maven面板,然后选中2,会发现test已经×掉了,再进行install时将跳过test
- SaltStack漏洞导致的挖矿排查思路
描述 SaltStack是一套C/S架构的运维工具,服务端口默认为4505/4506,两个端口如果对外网开放危害非常大,黑客利用SaltStack的远程命令执行漏洞CVE-2020-11651可以直接 ...
- socket编程之并发回射服务器2
承接上文:socket编程之并发回射服务器 为了让服务器进程的终止一经发生,客户端就能检测到,客户端需要能够同时处理两个描述符:套接字和用户输入. 可以使用select达到这一目的: void str ...
- P1666前缀单词
题目传送门点我传送 Ⅰ.字典树+树型DP 非常奇妙的一种解法 第一部分:构建树 先对来的单词读入,插入字典树 然后对于一颗字典树,其实是有很多无用边的,所以我们需要删去一些边 删去非单词节点和非单词节 ...