gulp-qc-iconfont
gulp-qc-iconfont es un complemento de gulp que puede ayudarlo fácilmente a descargar los íconos de íconos de Ali al local.
Intención de desarrollo
- En la actualidad, hay muchos proyectos que usan íconos de fuentes en la parte frontal. El más utilizado es el ícono Ali. El ícono Ali se puede verificar agregando el ícono al carrito de compras y luego agregado al proyecto. El proyecto se puede compartir con el equipo, lo que proporciona mucha conveniencia para el desarrollo front-end.
- Soy un desarrollador de interfaz de usuario y diseño de interfaz de usuario. En el desarrollo de muchas veces, el icono se desarrolla durante el diseño, por lo que la adición, eliminación y modificación de iconos son más frecuentes. Afortunadamente, Ali proporciona un código CSS en línea para esto, que es muy fácil de usar. Pero en el entorno de producción, necesito descargar el archivo de fuente del icono de fuente al local, y necesito usar un CSS que haga referencia al archivo local. Otra cosa es que cuando el ícono se usa en combinación con vant, realmente espero que el ícono que descargue pueda tener un prefijo significativo para distinguirlo del ícono de vant predeterminado. Como programador bastante vago, realmente creo que la automatización es muy importante. Entonces comencé a tirar. Me pregunto si existe una herramienta que pueda generar automáticamente los archivos css y los archivos de fuentes relacionados que necesito de acuerdo con el entorno de desarrollo y producción, y que pueda modificar fácilmente el prefijo del icono. Entonces obtuve gulp-qc-iconfont
Guía del usuario
Instalación: $ npm install gulp-qc-iconfont
muy simple de usar, como la siguiente
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/'))
});
A continuación, resumiré brevemente los parámetros:
/* 参数说明
* @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时有效
*/
Resumen
- Un poco de blanco en la parte delantera, tratando de desarrollar el plugin gulp por primera vez, con la esperanza de que el dios muestre misericordia y pueda darle consejos a la niña.
- En la actualidad, vue y webpack son más populares en la parte frontal, pero la niña solo aprende mucho. Lo que aprende webpack es realmente escoria y no puede ser escoria, así que actualmente estoy trabajando duro para aprender webpack. Se puede llamar fácilmente.
El código fuente está en mi github, si necesita estudiantes, puede hacer clic aquí para descargar gulp-qc-iconfont
Nota: Antes de que este artículo se publicara con 52pojie, debido a que muchos socios pequeños no tenían una cuenta y no podían ver el artículo, entonces lo transfirí a mi blog y lo publiqué nuevamente. En vista de esto, intentaré publicar en dos copias ~~~~~ Jajaja
Autor: Leona
Descripción enlace: https://www.cnblogs.com/leona-d/p/12697290.html
Aviso: Este artículo pertenece al autor y el blog total del parque, bienvenido a imprimir, pero sin el consentimiento del autor declaró por esta sección debe ser retenido , Y coloque el enlace del texto original en una posición obvia en la página del artículo