文件名称：gulp-spritesmith-demo:一个使用spritesmith自定义模板的demo
文件大小：143KB
文件格式：ZIP
更新时间：2024-05-18 15:02:09
JavaScript
test-sprite-smith 一个使用gulp-spritesmith自定义模板功能实现的demo。gulp-spritesmith支持1倍图和2倍图的自动适配，但前提是需要同时提供这两种尺寸的图片。这对一些要求快速迭代的小公司来说是不能接受的。因此，本demo忽视2倍图对dpr为1的设备屏幕的视觉损失，通过修改自定义模板默认拼接二倍图并产出1倍尺寸的css样式。 相关路径 模板路径：gulp_templates/ 图片输出路径： src/assets/**/gulp_sprite/sprite.png scss文件输出路径：src/theme/sprites/**/sprite.scss 使用方式 递归生成sprite gulp sprite [dir] 清除sprite gulp clearSprite 引入 在vue文件的style标签中 <style lang="sc
【文件预览】：
gulp-spritesmith-demo-master
----gulp_templates()
--------scss.2x.template.handlebars(4KB)
----package.json(3KB)
----src()
--------components()
--------main.js(360B)
--------assets()
--------theme()
--------App.vue(374B)
--------router()
----gulpfile.js(2KB)
----build()
--------check-versions.js(1KB)
--------build.js(1KB)
--------webpack.sprite.conf.js(1KB)
--------utils.js(3KB)
--------webpack.base.conf.js(2KB)
--------logo.png(7KB)
--------webpack.dev.conf.js(3KB)
--------webpack.prod.conf.js(5KB)
--------vue-loader.conf.js(553B)
----static()
--------.gitkeep(0B)
----README.md(1KB)
----config()
--------dev.env.js(156B)
--------index.js(2KB)
--------prod.env.js(61B)
--------test.env.js(149B)
----index.html(279B)
----test()
--------e2e()
--------unit()
----yarn.lock(335KB)