laoshu133 / gulp-css-spritesmith Goto Github PK
View Code? Open in Web Editor NEWA gulp plugin to help front engineer creating css sprite.
License: MIT License
A gulp plugin to help front engineer creating css sprite.
License: MIT License
[email protected]: pngjs2 has now taken over the original pngjs package on npm. Please change to use pngjs dependency, version 2+.
是否可以添加一个标识来按需合并图片,没有添加标识的不合并,例如以下:
background: url("css/index.png?__sprite");
最后,感谢您的插件!
gulp.task('moveFile',function(){
gulp.src('./public/css/*')
.pipe(gulp.dest('./output/css/'));
gulp.src('./public/imgs/*/*')
.pipe(gulp.dest('./output/imgs/'));
})
gulp.task('build',['moveFile'],function(){
gulp.src('./output/css/*.css')
.pipe(plugins.cssSpritesmith({
imagepath: './output/imgs/slice/',
spritedest: './output/imgs/sprite/',
spritepath: '../imgs/sprite/'
}))
.pipe(gulp.dest('./'));
});
首次执行gulp build无法生成雪碧图
问题是这样的,现在我的项目想要按以下的目录结构进行重构,其中每个目录代表一个网页:
└─ src/
├─ index/
├─ img/
└─ sprite
├─ 1.png
└─ 2.png
├─ index.html
└─ index.css
└─ other/
├─ img/
└─ sprite
├─ 3.png
└─ 4.png
├─ other.html
└─ other.css
其中我用到了 gulp-css-spritesmith
是这样的:
gulp.task('autoSprite', function() {
return gulp.src(config.tmp + '*/*.css')
.pipe(plugins.cssSpritesmith({
imagepath: config.tmp + '*/img/sprite',
spritedest: config.tmp + '*/img',
spritepath: 'img/sprite',
padding: 2
}))
.pipe(gulp.dest('./'));
});
但是其中的 imagepath
和 spritedest
是不识别 *
的,而我的页面可能随时增加(即增加一个目录),请问要如何解决这个问题?
css写了图片路径的,为什么还要指定这个参数?
这边没有生成@2x图是什么原因呢
只有style.png 没有 [email protected]
1倍图的时候没关系
2倍图的时候找不到图片 导致页面显示空白
/* 自动 sprite /
gulp.task('sprite', function() {
gulp.src('build/css/.min.css')
.pipe(cssSprite({
imagepath: './images/sprite',
imagepath_map: null,
spritedest: './images/sprite',
spritepath: '../images/',
padding: 0,
useimageset: false,
newsprite: false,
spritestamp: true,
cssstamp: true
}))
.pipe(gulp.dest('./'))
.pipe(notify({message: '雪碧图生成完成.'}));
});
配置如上,就是gulp.src()方法里面这样配置多级目录不会成功。如果把这个目录换成 gulp.src(sass/*/.scss) 就会有效果,感觉很奇怪,目录是没配错误的呀~
因为我的需求是
sass -> 编译并压缩 -> build/css/**.min.css
gulp工具生成后的结果我认为是生产环境,所以 autosprite是在sass编译完成后的css文件。请问有朋友遇到过?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.