参考如下网站

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>

      &lt;span class=&quot;icon icon-add&quot;&gt;&lt;/span&gt;

     </pre>

   </div>

</body>

</html>

执行语句

gulp icon

gulp example

与

gulp.task('example', function() {....
中的task值相同

gulpfile.js文件中增加
　　gulp.task('default', ['icon', 'example']);
　就可以直接gulp生成font，css ，html



=====缺点
生成的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的更多相关文章

  1. webapp项目前端总结

    提纲 整体把握,从设计稿入手——技术选型 并行开发,从实现静态页面开始 前端自动化 前端js逻辑 前后端集成 小问题集合 总结 1.整体把握,从设计稿入手 —— 技术选型 新项目到手,算是运气好,设计 ...

  2. 前端自动化构建工具gulp记录

    一.安装 1)安装nodejs 通过nodejs的npm安装gulp,插件也可以通过npm安装.windows系统是个.msi工具,只要一直下一步即可,软件会自动在写入环境变量中,这样就能在cmd命令 ...

  3. 前端构建工具gulp使用

    前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://g ...

  4. 前端们，gulp该用起来了，简单的demo入门——gulp系列（一）

    gulp.grunt前端自动化工具,只有用过才知道多么重要. 它们问世这么久了?你真的用过吗? 写个简单的less.watch任务的demo分享———— 1.准备: 安装全局node.npm,这个教程 ...

  5. (转载)前端构建工具gulp使用

    前端构建工具gulp使用 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中 ...

  6. gulp编译less简单demo

    写个简单的less.watch任务的demo分享———— 1.准备: 安装全局node.npm,这个教程很多不作详细介绍: 安装全局gulp npm install -g gulp 新建getstar ...

  7. nodejs iconfont处理

    做前端优化,iconfont可以替换掉很多图片,减少请求,并有很好的兼容性,颜色大小也有很好的自由度.现在网上已经有很多公开的iconfont供我们使用.但是每个项目有不同的应用场景,网上的并不能满足 ...

  8. 前端构建工具gulp

    前端构建工具gulp使用   前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gul ...

  9. gulp生成发布包脚本

    var formPost = require('./tools/submit.js');var gulp = require('gulp'), zip = require('gulp-zip'), h ...

随机推荐

  1. MySQL系列（四）

    本章内容: 主从复制 简介原理 Mysql主从同步脚本部署 读写分离 如果主宕机了,怎么办? 双主的情况 MySQL 备份及恢复方案 备份单个及多个数据库 mysqldump 的常用参数 如何增量恢复 ...

  2. Vue Router路由守卫妙用：异步获取数据成功后再进行路由跳转并传递数据，失败则不进行跳转

    问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...

  3. vuex vue-devtools 安装

    vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率.接下来我们就介绍一下vue-devtools的安装 chrome商店直接安装 谷歌访问助 ...

  4. 9） drf JWT 认证 签发与校验token 多方式登陆 自定义认证规则反爬 admin密文显示

    一 .认证方法比较 1.认证规则图 django 前后端不分离 csrf认证 drf 前后端分离 禁用csrf 2. 认证规则演变图 数据库session认证:低效 缓存认证:高效 jwt认证:高效 ...

  5. 题目分享H 二代目

    题意:有m个限制,每个限制l1,r1,l2,r2四个数,限制了一个长度为n的数第l1到r1位要与第l2到r2相同,保证r1-l1=r2-l2,求在限制下一共有多少种数 分析: 暴力的话肯定是从l1-r ...

  6. 自动化API之一 生成开源ERP Odoo App 的RestFul API

    1.在服务器上安装开源ERP Odoo 安装步骤请自行百度,本文重点不在于指导安装,以下是安装后PC端效果. Odoo: 2.在Uniconnector平台上注册Odoo App 移动端应用 3.配置 ...

  7. 如何对Code Review的评论进行分级

    我曾写过一篇关于Code Review的文章<Code Review 最佳实践>,在文章中建议对Code Review的评论进行分级: 建议可以对Review的评论进行分级,不同级别的结果 ...

  8. 使用Redis构建电商网站

    涉及到的key: 1. login,hash结构,存储用户token与用户ID之间的映射. 2. recent_tokens,存储最近登陆用户token,zset结构 member: token,sc ...

  9. vue项目兼容ie

    一.兼容ES6 Vue 的核心框架 vuejs 本身,以及官方核心插件(VueRouter.Vuex等)均可以在 ie9 上正常使用.但ie不兼容es6,所以需要安装插件将“Promise”等高级语法 ...

  10. 软路由OpenWrt（LEDE）2020.4.4编译 UnPnP+NAS+多拨+网盘+DNS优化

    近期更新:2020.04.24编译-基于OpenWrt R2020.3.19版本.   2020.04.04更新记录: 修正国内域名加速脚本部分缺陷 内置打印机共享,ZeroTier 新增多套主题 S ...