0.0.1 • Published 3 years ago

iconfont-gulp4.0-guanglong v0.0.1

Weekly downloads
-
License
ISC
Repository
-
Last release
3 years ago
iconfont官网:https://www.iconfont.cn/
gulp4.0 中文官网:https://www.gulpjs.com.cn/docs/getting-started/quick-start/

Iconfont-gulp4.0 压缩

gulp4 必须node14+
步骤:
1、创建package.json:npm init -y
2、全局安装gulp:npm i gulp -g
3、本项目安装gulp及iconfont相关依赖包:
    npm i gulp@4.0.2 gulp-iconfont@11.0.0 gulp-iconfont-css@3.0.0 gulp-template@5.0.0 del@6.0.0 -D
    安装时注意版本的匹配,必须按照上述版本安装
4、新建 gulpfile.js 文件
5、新建以下文件及其所属文件:
    src
    src/template
    src/template/iconfont-template.less   可在此文件line@25修改标签中使用的class名
    src/example
    src/example/index.html
    src/guanglongsvgs
    src/guanglongsvgs/***.svg   从其他地方拷过来的svg文件
6、修改 gulpfile.js 中的文件夹名和文件名,必须与上述创建的一致
7、执行 gulp
8、在 example/index.html 文件中引入 生成的 css 文件,并在此文件中按照list的格式添加图标名

发布到npm

1、修改package.json:
    * 修改name为"iconfont-gulp4.0-guanglong" 名字自定义就行
    * 修改版本号version为0.0.*
    * 删除private:true
    * 添加"main":"guanglong/css/iconfont.css"
    * 添加"files":["guanglong"]

2、发布到npm:npm publish
最后一行为 + iconfont-gulp4.0-guanglong@0.0.* 即发布成功
第一次使用 npm publish 需注册npm账号,注册并邮箱验证后 用 npm login登录才能publish
3、使用:
   安装: npm i iconfont-gulp4.0-guanglong -S
   项目的src/main.js中引入:import 'iconfont-gulp4.0-guanglong';
   .vue 中给标签加class即可:<span class="icon gl-icon-open">图标</span>