参考如下网站

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. Linux 用户管理和提权

    Linux ⽀持多个⼈使⽤同⼀个⽤户登录系统, Windows 在修改组策略的情况下,也可以多个⼈使⽤同⼀个⽤户登录 远程连接Linux的⽅式:SSH协议 远程连接Windows的⽅式:RDP协议 安 ...

  2. 听说你在从事前端开发？那这10个JavaScript的优化问题你不得不知道！

    JavaScript的高效优化一直都是我们前端开发中非常重要的工作,也是很多开发人员无法做好的一部分内容,今天我总结了10个优化问题,大家可以参考来做优化,这其中很多问题都是大家经常遇到的哦. ==和 ...

  3. for-loop 与 json.Unmarshal 性能分析概要

    原文地址:for-loop 与 json.Unmarshal 性能分析概要 前言 在项目中,常常会遇到循环交换赋值的数据处理场景,尤其是 RPC,数据交互格式要转为 Protobuf,赋值是无法避免的 ...

  4. 老男孩教育每日一题-2017年3月29日-使用ifconfig取出网卡eth0的ip地址-看看你有多少方法...

    方法1:sed命令 [root@oldboyedu ~]# ifconfig eth0 |sed -n '2p' |sed's#^.*addr:##g'|sed 's#  B.*$##g' 10.0. ...

  5. HTML入门（HB、DW）

    一.文字内容 <b></b>  <strong></strong>     /*加粗 <i></i>   <em>& ...

  6. Guzzle 一个PHP的HTTP客户端

    Guzzle是一个PHP的HTTP客户端,用来轻而易举地发送请求,并集成到我们的WEB服务上. https://github.com/guzzle/guzzle 接口简单:构建查询语句.POST请求. ...

  7. （附音视频、PPT地址）《打开Python这扇窗》分享总结

    0.导读 2016年最新开发语言排行榜中,Python已经跃居第三,仅次于C.JAVA.掌握Python已经成为时下运维圈的共识,更让人期待的是,本次公开课分享的嘉宾自身就长期专注Python.Doc ...

  8. Vue项目中jQuery的引入

    1.安装jQuery依赖 npm install jquery --save-dev 2.在webpack.base.conf.js头部加入如下代码 var webpack = require(&qu ...

  9. golang 线上项目部署折腾之一

    最近自己使用golang折腾了一点东西,可是需要部署到线上才好玩,那么服务器使用了aws,然后使用了docker和没有使用docker部署了一次.简单记录一下过程 aws服务器 为什么使用aws呢,说 ...

  10. NodeJs mysql 开启事务

    如题:node后台使用mysql数据库,并使用事务来管理数据库操作. 这里主要讲一个事务的封装并写了一个INSERT 插入操作. code: 基础code: db.config.js const my ...