参考如下网站

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. Cent OS 7 搭建MySQL

    搭建数据库服务器 版本众多,但为了追求稳定选择的是5.7 在使用YUM REPOSITORY官方给出的版本如下: The MySQL Yum repository includes the lates ...

  2. Python与Excel交互——Xlwings实战

    这一期直接来实战. 比如说,我们在一个快递网站上爬取了几个快递的轨迹信息,我们需要将数据保存下来,一个常规做法是把数据保存在数据库里(Mysql,MongoDB,Redis),另一个是用Excel的形 ...

  3. Latex-0-latex2word

    Latex-0-latex2word LatexXeLaTex Latex 转 Word 虽然latex 格式很方便,能够满足绝大部分的排版要求,但是在与人沟通的时候不可避免地需要用到其他格式文件,比 ...

  4. 运用jieba库统计词频及制作词云

    一.对中国十九大报告做词频分析 import jieba txt = open("中国十九大报告.txt.txt","r",encoding="utf ...

  5. Linux运维面试题：请简要说明Linux系统在目标板上的启动过程?

    Linux运维面试题:请简要说明Linux系统在目标板上的启动过程? 该问题是Linux运维面试最常见的问题之一,问题答案如下: 1.用户打开PC的电源,BIOS开机自检,按BIOS中设置的启动设备( ...

  6. 地表最简单安装MySQL及配置的方法，没有之一

    第一步下载我的压缩包 链接:https://pan.baidu.com/s/1EE40dU0j2U1d-bAfj7TeVA 提取码:n25c 复制这段内容后打开百度网盘手机App,操作更方便哦 第二步 ...

  7. LeetCode 45. 跳跃游戏 II | Python

    45. 跳跃游戏 II 题目来源:https://leetcode-cn.com/problems/jump-game-ii 题目 给定一个非负整数数组,你最初位于数组的第一个位置. 数组中的每个元素 ...

  8. Navicat，SQL注入，pymysql模块

    # 关键字exists(了解) 只返回布尔值 True False 返回True的时候外层查询语句执行 返回False的时候外层查询语句不再执行 select * from emp where exi ...

  9. 看直播 csust oj

    看直播 Description 小明喜欢看直播,他订阅了很多主播,主播们有固定的直播时间 [Li, Ri] . 可是他网速只有2M,不能同时播放两个直播,所以同一时间只能看一个直播. 并且他只会去看能 ...

  10. uniapp自定义简单省市区联动组件

    又双叒一个uniapp组件 最近有一个选择地址的需求,就写了一个省市区联动选择器. 选择日期使用的picker,就照着它简单的整了一个,使用网络请求城市数据,还用到了vuex组件数据共享. 本来自己整 ...