gulp-qc-iconfont

gulp-qc-iconfontは、ローカルにAliアイコンアイコンアイテムを簡単にダウンロードできるgulpプラグインです。

開発意図

現在、フロントエンドにはフォントアイコンを使用するプロジェクトが多数あります。最も一般的に使用されるのはAliアイコンです。Aliアイコンは、アイコンをショッピングカートに追加してプロジェクトに追加することで確認できます。プロジェクトはチームと共有できるため、フロントエンド開発に非常に便利です。
私はUIデザインとフロントエンドの開発者です。多くの開発では、アイコンは設計中に開発されるため、アイコンの追加、削除、変更が頻繁に行われます。幸いにも、Aliはこのためのオンラインcssコードを提供しており、非常にユーザーフレンドリーです。しかし、実稼働環境では、フォントアイコンのフォントファイルをローカルにダウンロードする必要があり、ローカルファイルを参照するcssを使用する必要があります。もう1つは、アイコンを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の方が人気がありますが、小さな女の子は多くのことしか学べません。簡単に呼び出せます。
ソースコードは私のgithubにあります。学生が必要な場合は、ここをクリックしてgulp-qc-iconfontをダウンロードできます。

注：この記事が52pojieで公開される前は、多くの小さなパートナーがアカウントを持っていなかったため記事を表示できなかったため、ブログに転送して再度投稿しました。これを考慮して、2つのコピーを投稿しようとします~~~~~ Hahaha

作者：レオナの
説明リンク：https://www.cnblogs.com/leona-d/p/12697290.html
免責事項：この記事は、執筆者に属し、公園の合計をブログ、転載を歓迎するが、作者の同意なしに、このセクションで宣言され保持されなければなりません、元のテキストリンクを記事ページのわかりやすい位置に配置します

[Web] Ali icon icon gulpプラグイン（gulp-qc-iconfont）

gulp-qc-iconfont

開発意図

ユーザーガイド

まとめ

おすすめ