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 ...
随机推荐
- Python 结巴分词(2)关键字提取
提取关键字的文章是,小说完美世界的前十章: 我事先把前十章合并到了一个文件中: 然后直接调用关键字函数: import sys sys.path.append('../') import jieba ...
- RabbitMQ介绍3 - 运行和管理RabbitMQ
安装.官方介绍:http://www.rabbitmq.com/download.html.一般产品环境会部署到Linux环境,但做为简单尝试,可以部署到Windows上(这里是部署介绍:http:/ ...
- 将博客搬至51CTO
为了统一博客文章,将文章搬至51cto个人博客
- ylbtech-dbs:ylbtech-1,FAM(家庭资产管理系统)
ylbtech-dbs:ylbtech-1,FAM(家庭资产管理系统) -- =============================================-- Family Assets ...
- GC之三--GC 触发Full GC执行的情况及应对策略
1.System.gc()方法的调用 此方法的调用是建议JVM进行Full GC,虽然只是建议而非一定,但很多情况下它会触发 Full GC,从而增加Full GC的频率,也即增加了间歇性停顿的次数. ...
- Good Sentences
Wine in, truth out One is never too old to learn What is done can not be undone Time tries all thing ...
- linux内核设计与实现--进程管理
进程就是出于执行期的程序.进程的另一个名字是任务. 执行线程,简称线程(thread),是在进程中活动的对象.每个线程都有一个独立的程序计数器.进程栈和一组进程寄存器.内核调度的对象是线程,而不是进程 ...
- [Java] 日期的简单处理
package test.date; import java.text.ParseException; import java.text.SimpleDateFormat; import java.u ...
- C# 操作网页标签
1 元素的 显示与隐藏 C# HTML: <div Id="div1" runat="server" style="display:non ...
- .NET 集合操作性能
如果单元格的内容是na(not applicatable),就表示这个操作不能应用于这种集合类型.