0.0.1 • Published 3 years ago
iconfont-gulp4.0-guanglong v0.0.1
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>
0.0.1
3 years ago