【Web】阿里icon图标gulp插件（gulp-qc-iconfont）

gulp-qc-iconfont

gulp-qc-iconfont是一个gulp插件，可以轻松地帮你将阿里icon的图标项目下载至本地。

开发初衷

• 目前前端使用字体图标的项目很多，最常用的是阿里图标，阿里图标可以勾选图标加入购物车，然后添加进项目，项目可以分享给团队，为前端开发提供了不少便利。
• 我是一名UI设计兼前端开发，在开发上很多时候图标是一边设计一边开发的，因此图标增删改比较频繁，庆幸的是阿里为此提供了在线的css代码，非常的人性化。但是在生产环境我又需要去下载字体图标的相关字体文件到本地，还需要重新用一个引用本地文件的css。再有就是当图标结合vant使用时，我很希望我下载的图标能有一个显著的前缀，来和默认的vant图标区别开来，作为一个相当懒的程序员，我真的觉得自动化非常重要，于是乎，我就开始折腾了。我就想啊能不能有一个工具可以根据开发和生产环境自动的生成我需要的css文件和相关字体文件，还能轻松的修改图标前缀。于是乎便有了gulp-qc-iconfont

使用指南

安装： $ npm install gulp-qc-iconfont
使用非常简单啊，就像下面这样就可以了

var gulp = require('gulp');
var gulpQcIconFont = require('gulp-qc-iconfont');

gulp.task('default', () => {
  gulpQcIconFont({
    url: '//at.alicdn.com/t/font_xxxxxxx_xxxxxx.css',
    isDev: true,
    fontPath: './iconfont/iconfont',
    iconPrefix: '.cu-icon-',
    keepIconFontStyle: false,
    fontExt: ['.eot', '.ttf', '.svg', '.woff', '.woff2']
  }).pipe(gulp.dest('./dist/'))
});

接下来我对参数进行一个简单概括：

/* 参数说明
* @param {String} url  必须，阿里我的图标项目中获取的css代码url 
* @param {Boolean} isDev 可选，默认为 true ，是否开发环境
* @param {String} fontPath 可选，默认为 './iconfont/iconfont' ,字体图标保存路径，只有在 isDev 为false时有效
* @param {String} iconPrefix 可选，默认与源文件保持一致，字体图标统一前缀，如设置为'.cu-icon-',则图标调用为：<i class="cu-icon-XXX"></i>
* @param {Boolean} keepIconFontStyle 可选，保留css源文件中的  .iconfont{/*...*/} 样式，结合vant使用时就很需要，因为vant已经对字体进行了定义
* @param {Array} fontExt 可选，默认全部下载，需要下载的字体图标格式扩展名，如'[.svg' , '.woff' , '.ttf']等，只有在 isDev 为false时有效
*/

总结

• 前端小白一名，初次尝试开发gulp插件，望大神口下留情，能为小女子指点一二
• 目前前端比较流行vue，webpack，但是小女子才疏学浅，webpack学的真的是渣的不能再渣，所以目前正在努力学习webpack，下一步想把我小插件做成webpack的，以便在vue等项目中可以便捷调用。
  源码在我的github里，有需要同学，可以点击这里下载 gulp-qc-iconfont

注：此前该文发布与52pojie，由于很多小伙伴反应没有账号看不到文章，故转到我的博客再发一次，鉴于此以后我发文都尽量一式两份~~~~~哈哈哈

作者：leona
原文链接：https://www.cnblogs.com/leona-d/p/12697290.html
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接