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 ...
随机推荐
- WANNACRY病毒中的加密技术分析
WANNACRY病毒中的加密技术分析 2019/11/6 16:56:46 分析WANNACRY病毒中的加解密技术的应用.分析内容包括但不限于:对称密码技术和公钥密码技术的作用:受害者支付赎金后就会恢 ...
- RedHat 的 crontab
Chapter 39. Automated Tasks In Linux, tasks can be configured to run automatically within a specifie ...
- CentOS上安装配置 mongodb
CentOS 首先yum list mongo* 查看是否有关于mongo的安装包,检查后安装即可 mongo 分client端和server端,server启动db服务,client可以连接到s ...
- java 之 javaBean
什么是JavaBean? JavaBean是特殊的Java类,使用J ava语言书写,并且遵守JavaBean API规范. JavaBean与其它Java类相比而言独一无二的特征: 提供一个默认的无 ...
- 【Linux常见命令】tail命令
tail - output the last part of files tail 命令可用于查看文件的内容,有一个常用的参数 -f 常用于查阅正在改变的日志文件. tail -f filename ...
- Linux中的常用快捷键
tab 命令或路径补全键,linux里面最有用的快捷键,如果tab不到路径或命令,就代表没有这个路径或者命令,还有可能是权限不对 ctrl+c 终止当前任务命令或程序 ctrl+d 退出当前用户环境, ...
- 解读网易易盾新一代IoT安全编译器Maze
一.网易易盾为什么会推出安全编译器Maze? 随着5G时代的到来,会有越来越多的物联网设备走进我们的生活,然而物联网的终端本身普遍处于白盒环境中,***者很容易获取相关的信息进行***,这个时候如果不 ...
- Vue学习—— Vuex学习笔记
组件是Vue最强大的功能之一,而组件实例的作用域是相互独立的,意味着不同组件之间的数据是无法相互使用.组件间如何传递数据就显得至关重要,这篇文章主要是介绍Vuex.尽量以通俗易懂的实例讲述这其中的差别 ...
- CodeForces - 262B
Roma works in a company that sells TVs. Now he has to prepare a report for the last year. Roma has g ...
- spark系列-8、Spark Streaming
参考链接:http://spark.apache.org/docs/latest/streaming-programming-guide.html 一.Spark Streaming 介绍 Spark ...