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 ...
随机推荐
- Spring5参考指南:AspectJ注解
文章目录 什么是AspectJ注解 启用AOP 定义Aspect 定义Pointcut 切入点指示符(PCD) 切入点组合 Advice 访问JoinPoint Advice参数 Advice参数和泛 ...
- SpringBoot应用操作Rabbitmq（direct高级操作）
一.首先声明完成任务架构,通过direct订阅/发布的模式进行生产消费. a.消息生产指定交换器和路由key b.消费者绑定交换器,路由key和队列的关系(集群监控收到的消息不重复) 二.实战演练 1 ...
- 原生JS中获取位置的方案总结
获取鼠标当前位置 clientY.clientX: 鼠标当前位置 相对于 浏览器可视区域顶部.浏览器可视区域左部 的位置: pageY.pageX: 鼠标当前位置 相对于 文档顶部.文档左部的位置: ...
- CYQ.Data 轻量数据层之路 使用篇-MProc 存储过程与SQL 视频[最后一集] H (二十八)
2019独角兽企业重金招聘Python工程师标准>>> 说明: 本次录制主要为使用篇:CYQ.Data 轻量数据层之路 使用篇五曲 MProc 存储过程与SQL(十六) 的附加视 ...
- 记坑: ConfigurationProperties 和 RefreshScope
为什么80%的码农都做不了架构师?>>> 当使用spring-cloud-config 和 spring-boot-configuration-processor时 使用bean ...
- 酷狗音乐快速转换MP3格式的方法
喜欢听音乐的朋友们,散步跑步的时候都是随身听,音乐可以给人带来力量,让人心情愉悦,有时候甚至还可以让我们忘记烦恼和忧愁,是一种不错的解压方式,所以热爱运动的宝宝们是离不来音乐的陪伴的,这样说来随身听的 ...
- webpack4.x下babel的安装、配置及使用
前言 目前,ES6(ES2015)这样的语法已经得到很大规模的应用,它具有更加简洁.功能更加强大的特点,实际项目中很可能会使用采用了ES6语法的模块,但浏览器对于ES6语法的支持并不完善.为了实现兼容 ...
- Codeforces Round #587
题目链接:Round #587 题目答案:官方Editorial.My Solution A. Prefixes 题意:给一字符串,只含有'a'或'b',需要改变某些位置('a'变'b'或'b'变'a ...
- 刷新DNS解析缓存+追踪+域名解析命令
刷新DNS解析缓存 命令:ipconfig /flushdns 用于改完host之后. 追踪IP: 命令:tracert www.baidu.com 域名解析: 命令:nslookup www.bai ...
- python——append后的列表为什么打印出来为空
关于python 列表append的用法: list = [] list = list.append("c") print(list) >>>None 正确写法应 ...