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 ...
随机推荐
- DBA_Oracle Erp R12中文补丁安装升级(案例)
2014-07-11 Created By BaoXinjian
- Mac下lombok无法安装到eclipse mars
eclipse升级到mars之后 , 在mac下已经不再是文件夹中有很多文件的eclipse了 , 只有一个单独的app文件.用原来的方式运行lombok再选eclipse.app已经不行了. 自己鼓 ...
- mysql基础语法之(全文索引)
1.概要 InnoDB引擎对FULLTEXT索引的支持是MySQL5.6新引入的特性,之前只有MyISAM引擎支持FULLTEXT索引.对于FULLTEXT索引的内容可以使用MATCH()…AGAIN ...
- Linux中变量$#,$@,$0,$1,$2,$*,$$,$?的含义(转载)
From:http://dadekey.blog.51cto.com/107327/119938 我们先写一个简单的脚本,执行以后再解释各个变量的意义 # touch variable # vi ...
- Java多线程之Wait()和Notify()
1.Wait()和Notify.NotifyAll都是Object的方法 2.多线程的协作是通过控制同一个对象的Wait()和Notify()完成 3.当调用Wait()方法时,当前线程进入阻塞状态, ...
- 8 个 Git 的小技巧
git 已经成为了我日常必备工具之一,我总结我几乎每天使用的8个有用(且简洁)的git技巧. 使用-p选择性添加 当你想提交内容时,你可以通过使用 git commit -am 来选择所有文件或使 ...
- 94、EventBus框架 ---- 转载
EventBus使用之基础 http://blog.csdn.net/yanbober/article/details/45667363 EventBus框架库代码走读 http://blog.cs ...
- 92、App Permissions(权限管理)实例
•Manifest权限声明 •Permission Groups-权限组 •权限的区分-安装时授权于运行时授权 •撤销权限 •检查.请求权限 •在应用中如何合理的处理权限请求逻辑 在Android ...
- [ActionScript 3.0] as3可以通过CDATA标签声明多行字符串
var str:String=<![CDATA[YANSHUANGPING yanshuangping yanshuangping ]]>; trace(str); var myname: ...
- IOS学习之路-- 指针&宏函数
如果*p被()包住,说明指针变量p将来指向的是函数 //声明一个指针变量 //int (*p)(int, int) = sum; int (*p)(int, int); p = sum; // 如果* ...