参考如下网站

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. redis5.0.3配置文件详解

    Redis最新版本5.0.3配置文件详解 单位 #当你需要为某个配置项指定内存大小的时候,必须要带上单位, #通常的格式就是 1k 5gb 4m 等: #1k => 1000 bytes #1k ...

  2. Synchronization and Overlapped Input and Output

    You can perform either synchronous or asynchronous (also called overlapped) I/O operations on files, ...

  3. MySQL join的7种理论及SQL写法

    转载于    https://www.cnblogs.com/dinglinyong/p/6656315.html 建表 在这里呢我们先来建立两张有外键关联的张表. CREATE DATABASE d ...

  4. Makefile 中引用多个 include 路径

    LIB=-L/usr/informix/lib/c++ INC=-I/usr/informix/incl/c++ -I/opt/informix/incl/public default: main m ...

  5. Manjaro Linux 入门使用教程

    Manjaro 初体验 Manjaro 是一款基于 Arch LInux 的自由开源发行版,它吸收了 Arch Linux 优秀丰富的软件管理,同时提供了稳定流畅的操作体验.优雅简单是它的追求,稳定实 ...

  6. Maven Wrapper简介

    文章目录 简介 Maven Wrapper的结构 下载Maven Wrapper 使用 Maven Wrapper简介 简介 开发java项目少不了要用到maven或者gradle,对比gradle而 ...

  7. 【Leetcode】104. 二叉树的最大深度

    题目 给定一个二叉树,找出其最大深度. 二叉树的深度为根节点到最远叶子节点的最长路径上的节点数. 说明: 叶子节点是指没有子节点的节点. 示例:给定二叉树 [3,9,20,null,null,15,7 ...

  8. 怎么在Chrome和Firefox浏览器中清除HSTS设置？

    HSTS代表的是HTTPS严格传输安全协议,它是一个网络安全政策机制,能够强迫浏览器只通过安全的HTTPS连接(永远不能通过HTTP)与网站交互.这能够帮助防止协议降级攻击和cookie劫持. HST ...

  9. vue-cli3.0 gui初体验

    为什么80%的码农都做不了架构师?>>>   介绍 新版的vuecli3.0提供了一个vue ui这个命令,这个命令是做什么的呢,这里引用官网的一段介绍 vue ui 你可以通过 v ...

  10. 浅谈 Objective-C Associated Objects

    简介 Associated Objects 是 Objective-C 2.0 中 Runtime 的特性之一. 在 <objc/runtime.h> 中定义的三个方法, void obj ...