gulp.spriteSmith使用
var gulp = require('gulp');
var spritesmith = require('gulp.spritesmith');
gulp.task('sprite', function () {
var spriteData = gulp.src('images/*.png').pipe(spritesmith({
imgName: 'sprite.png',
cssName: 'sprite.css'
}));
return spriteData.pipe(gulp.dest('path/to/output/'));
});
var gulp = require('gulp');
var buffer = require('vinyl-buffer');
var csso = require('gulp-csso');
var imagemin = require('gulp-imagemin');
var merge = require('merge-stream');
var spritesmith = require('gulp.spritesmith');
gulp.task('sprite', function () {
// Generate our spritesheet
var spriteData = gulp.src('images/*.png').pipe(spritesmith({
imgName: 'sprite.png',
cssName: 'sprite.css'
}));
// Pipe image stream through image optimizer and onto disk
var imgStream = spriteData.img
// DEV: We must buffer our stream into a Buffer for `imagemin`
.pipe(buffer())
.pipe(imagemin())
.pipe(gulp.dest('path/to/image/folder/'));
// Pipe CSS stream through CSS optimizer and onto disk
var cssStream = spriteData.css
.pipe(csso())
.pipe(gulp.dest('path/to/css/folder/'));
// Return a merged stream to handle both `end` events
return merge(imgStream, cssStream);
});
gulp.spriteSmith使用的更多相关文章
- gulp.spritesmith修改px为rem单位
移动端开发中,使用gulp.spritesmith进行小图sprite并生成样式,但由于spritesmith默认是以px为单位,所以就把插件的内容修改了下让生成rem单位并且能把background ...
- 用 gulp.spritesmith 自动化雪碧图
一.安装nodejs之后,要设置两个环境变量 在 计算机右击属性---高级系统设置---高级---环境变量 打开窗口 新建2个环境变量,它们的值分别是nodejs根目录下的node_modules路径 ...
- 利用gulp 插件gulp.spritesmith 完成小图合成精灵图,并自动输出样式文件
安装依赖 yarn add gulp yarn add gulp.spritesmith 本次依赖的版本是: "gulp": "^3.9.1" "gu ...
- 基于gulp 的前端自动化构建方案总结
一,基础篇 先安装nodejs 使用淘宝镜像安装tnpm 安装 cnpm 插件:npm install -g cnpm --registry=https://registry.npm.taobao.o ...
- gulp 制作雪碧图
雪碧图:sprite 是把多张图片拼到一张图中,提升性能的一种做法.把合并的图片一次性加载到内存中,需要时只渲染一部分. 我们选择gulp.spritesmith插件. 使用gulp时首先要在指定的任 ...
- gulp多张图片自动合成雪碧图
相信做前端的同学都做过这样的事情,为优化图片,减少请求会把拿到切好的图标图片,通过ps(或者其他工具)把图片合并到一张图里面,再通过css定位把对于的样式写出来引用的html里面.对于一些图片较多的项 ...
- 使用gulp构建自动化工作流
简单易用 高效构建 高质量的生态圈 可能很多人会说现在提gulp也太落后了吧,但我想说写点东西并不是为了讨论它是否过时,而是来帮助我们自己来记忆.整理和学习.任何工具,我需要,我才去使用它,正如此时我 ...
- 构建工具Gulp
前面的话 与grunt类似,gulp也是构建工具,但相比于grunt的频繁IO操作,gulp的流操作能更快更便捷地完成构建工作.gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接 ...
- 前端-如何用gulp快速搭建项目(sass预编译,代码压缩,css前缀,浏览器自动刷新,雪碧图合成)
一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...
随机推荐
- CE_现金模组基本概念(概念)
2014-07-12 Created By BaoXinjian
- NeHe OpenGL教程 第四十三课:FreeType库
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- Android屏幕适配建议
一.关于布局适配 1.不要使用绝对布局 2.尽量使用match_parent 而不是fill_parent . 3.能够使用权重的地方尽量使用权重(android:layout_weight) 4.如 ...
- Redis中7种集合类型应用场景&redis常用命令
Redis常用数据类型 Redis最为常用的数据类型主要有以下五种: String Hash List Set Sorted set 在具体描述这几种数据类型之前,我们先通过一张图了解下Redis内部 ...
- iOS字符串加密至MD5&及获取文件MD5
iOS 字符串加密至MD5 #import <CommonCrypto/CommonDigest.h> + (NSString *) md5:(NSString *)str { const ...
- FBI传授9秘诀:如何看穿对方在撒谎 z
第1招:不提及自身和姓名 美国赫特福德郡大学的心理学家韦斯曼说,〝人们在说谎时会本能地把自己从他们所说的谎言中剔除出去〞.所以如果你向某人提问时,他们总是反覆地省略〝我〞,他们就有被怀疑的理由了.反过 ...
- [Flex] IFrame系列 —— 在flex的web应用中嵌入html的方法
在flex的web应用中,我们往往必须有嵌入html的需求,这时候你会发现IFrame很有用! flex而且可以和html中的JavaScript进行交互,flex可以通过iframe调用到html中 ...
- awk 两列相减
cat http.txt |awk -F ':' '{print($2-$3)}' 百度文库
- 如何将MVC Areas中的某一个页设为起始页
area的默认页: routes.MapRoute( name: "MyArea", url: "{controller}/{action}/{id}", de ...
- GridView内容<br />换行
if (e.Row.RowType == DataControlRowType.DataRow) { e.Row.Cells[].Text = Server.HtmlDecode(e.Row.Cell ...