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 ...
随机推荐
- poj 3048 Max Factor(素数筛)
这题就是先写个素数筛,存到prime里,之后遍历就好,取余,看是否等于0,如果等于0就更新,感觉自己说的不明白,引用下别人的话吧: 素数打表,找出20000之前的所有素数,存入prime数组,对于每个 ...
- Visual Studio 2012 比较好用的插件推荐
为了高效率的开发,下面笔者推荐几款非常不错的插件,方便大家. 以上控件的安装方式是: 然后通过联网的方式下载,安装后,需要重启一下Visual Studio方可使用.
- 关于Rotation和Quaternion的一些问题
当我们使用unity的时候,面对一个物体,一个不可避免的问题就是:控制物体的旋转. unity的Transform组件的第二个属性Rotation为我们提供控制物体旋转的功能.在一个物体的Inspec ...
- SQL Server查询死锁并KILL
杀掉死锁的sqlserver进程 SELECT request_session_id spid,OBJECT_NAME (resource_associated_entity_id)tableNa ...
- windows service的继承类ServiceBase
https://msdn.microsoft.com/zh-cn/library/system.serviceprocess.servicebase.exitcode(v=vs.80).aspx 在停 ...
- vi命令的使用
<转:http://linux.vbird.org/linux_basic/0310vi.php> 基本上 vi 共分为三种模式,分别是『一般模式』.『编辑模式』与『指令列命令模式』. 圖 ...
- 【转】oracle数据库中varchar2陷阱
源地址:http://www.cnblogs.com/iyangyuan/p/3491215.html oracle数据库相信大家都比较熟悉,数据库中有一种非常常用的数据类型:字符串型. 对应该类型, ...
- oracle10g如何配置客户端
http://jingyan.baidu.com/article/4d58d541c108939dd4e9c0f5.html 不行的话: 对tnsnames.ora进行编辑:ORCL = (DESCR ...
- C++学习2
命名空间(Namespace)主要为了避免命名冲突,其关键字为namespace 在多人代码整合过程中常用到: namespace Li{ //小李的变量声明 ; } namespace Han{ / ...
- [ActionScript 3.0] AS3 双A字模型
package { import caurina.transitions.Tweener; import flash.display.Sprite; import flash.events.Mouse ...