在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):weixin/gulp-tmtsprite开源软件地址(OpenSource Url):https://github.com/weixin/gulp-tmtsprite开源编程语言(OpenSource Language):JavaScript 89.1%开源软件介绍(OpenSource Introduction):gulp-tmtsprite
NPM Home Page: https://www.npmjs.com/package/gulp-tmtsprite InstallInstall with NPM: npm install gulp-tmtsprite --save
npm install gulp-if --save Usagegulpfile.js var gulpif = require('gulp-if');
var tmtsprite = require('gulp-tmtsprite');
gulp.src('./src/css/style-*.css')
.pipe(tmtsprite())
.pipe(gulpif('*.png', gulp.dest('./dist/sprite/'), gulp.dest('./dist/css/')));
Options Custom your slice image path var gulpif = require('gulp-if');
var tmtsprite = require('gulp-tmtsprite');
gulp.src('./src/css/style-*.css')
.pipe(tmtsprite({slicePath: '../slice'}))
.pipe(gulpif('*.png', gulp.dest('./dist/sprite/'), gulp.dest('./dist/css/'))); ResultCSS In -> .icon-test {
width: 32px;
height: 32px;
background-image: url(../slice/test.png);
} Tips: try gulp-LazyImageCSS if you are too lazy to type image CSS Out -> .icon-test {
background-image: url(../sprite/style-index.png);
}
// Retina 2x supported
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-webkit-min-device-pixel-ratio: 2.5),
only screen and (min-resolution: 240dpi) {
.icon-test {
background-image:url("../sprite/[email protected]");
background-position: -36px -66px;
background-size: 32px;
}
} Tips: Retina 3x is ready based on image name, like Image In -> Image Out -> Tips: 3x sprite is an option when needed. Know Issues
Release History
Team & License |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论