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使用的更多相关文章

  1. gulp.spritesmith修改px为rem单位

    移动端开发中,使用gulp.spritesmith进行小图sprite并生成样式,但由于spritesmith默认是以px为单位,所以就把插件的内容修改了下让生成rem单位并且能把background ...

  2. 用 gulp.spritesmith 自动化雪碧图

    一.安装nodejs之后,要设置两个环境变量 在 计算机右击属性---高级系统设置---高级---环境变量 打开窗口 新建2个环境变量,它们的值分别是nodejs根目录下的node_modules路径 ...

  3. 利用gulp 插件gulp.spritesmith 完成小图合成精灵图,并自动输出样式文件

    安装依赖 yarn add gulp yarn add gulp.spritesmith 本次依赖的版本是: "gulp": "^3.9.1" "gu ...

  4. 基于gulp 的前端自动化构建方案总结

    一,基础篇 先安装nodejs 使用淘宝镜像安装tnpm 安装 cnpm 插件:npm install -g cnpm --registry=https://registry.npm.taobao.o ...

  5. gulp 制作雪碧图

    雪碧图:sprite 是把多张图片拼到一张图中,提升性能的一种做法.把合并的图片一次性加载到内存中,需要时只渲染一部分. 我们选择gulp.spritesmith插件. 使用gulp时首先要在指定的任 ...

  6. gulp多张图片自动合成雪碧图

    相信做前端的同学都做过这样的事情,为优化图片,减少请求会把拿到切好的图标图片,通过ps(或者其他工具)把图片合并到一张图里面,再通过css定位把对于的样式写出来引用的html里面.对于一些图片较多的项 ...

  7. 使用gulp构建自动化工作流

    简单易用 高效构建 高质量的生态圈 可能很多人会说现在提gulp也太落后了吧,但我想说写点东西并不是为了讨论它是否过时,而是来帮助我们自己来记忆.整理和学习.任何工具,我需要,我才去使用它,正如此时我 ...

  8. 构建工具Gulp

    前面的话 与grunt类似,gulp也是构建工具,但相比于grunt的频繁IO操作,gulp的流操作能更快更便捷地完成构建工作.gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接 ...

  9. 前端-如何用gulp快速搭建项目(sass预编译,代码压缩,css前缀,浏览器自动刷新,雪碧图合成)

    一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...

随机推荐

  1. 安装Nginx+uWSGI+Django环境

    Ubuntu Server 12.04 安装Nginx+uWSGI+Django环境 今天要介绍的是利用APT源直接apt-get install安装配置我们所需要的环境,首先按惯例先安装MySQL和 ...

  2. API 双方认证探讨

    开放 api 已是大势所趋.而 api 这种东西有个特点就是覆水难收.一旦公开出去了,被大量用户使用,一旦修改,就会让广大用户都掉坑里.所以,api 在设计之初就要尽量考虑周全,并预留扩展可能. 目前 ...

  3. 如何给ubuntu虚拟机添加硬盘和快捷键(转载)

    From:http://os.51cto.com/art/201003/188721.htm 刚开始建立Ubuntu虚拟机时间,把容量设置为8Gb 了,然后没过几天就没有地方了,郁闷!查了一下,有几种 ...

  4. UITouch 触摸事件处理(实例)

    来源:http://www.open-open.com/lib/view/open1341882439838.html 1. UITouch 的主要方法: - (void)touchesBegan:( ...

  5. cmd 登录oracle

    源地址:http://zhidao.baidu.com/link?url=mehN7bFY14DGH6DwhpbJnAbzb_fI3WbQn2-WqVInyyqHkfYlZSfu7GQVjQgQoPV ...

  6. [Java] 字符流 Writer,输出字符数据PrintWriter

    package test.stream; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.Fi ...

  7. CRM IFRAME 显示地图

    作者:卞功鑫  ,转载请保留.http://www.cnblogs.com/BinBinGo/p/5274409.html 需要背景: 现在已经有经纬度,需要在地图上显示出来. 环境: CRM 4.0 ...

  8. [kuangbin带你飞]专题十 匹配问题

        A-L 二分匹配 M-O 二分图多重匹配 P-Q 二分图最大权匹配 R-S 一般图匹配带花树 模板请自己找     ID Origin Title   61 / 72 Problem A HD ...

  9. Centos 7配置LAMP

    因为安装zabbix需要LAMP环境,特记录如下. LAMP指的Linux(操作系统).Apache HTTP 服务器,MySQL(有时也指MariaDB,数据库软件)和PHP(有时也是指Perl或P ...

  10. ORACLE快速彻底Kill掉的会话(转载)

    转载:http://www.cnblogs.com/kerrycode/p/4034231.html 在ORACLE数据库当中,有时候会使用ALTER SYSTEM KILL SESSION 'sid ...