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. Workflow_工作流发送Document和Form链接的实现(案例)

    2014-06-01 Created By BaoXinjian

  2. DDoS-Deflate安装及配置

    (D)DoS-Deflate是一款免费的用来防御和减轻DDoS攻击.它通过netstat监测跟踪创建大量网络连接的IP地址,在检测到某个结点超过预设的限制时,该程序会通过APF或iptables禁止或 ...

  3. java web 插件式开发

    1.支持pagelet2.菜单扩展3.静态文件访问 4.开发环境. 5.OSGi平台. tms:pagelet 是一个jsp标签 <div> <tms:pagelet show=&q ...

  4. Android之访问下载文件

    1.SD卡操作类 FileUtils.java package com.example.mars_1500_download; import java.io.File; import java.io. ...

  5. animateWithDuration 动画的速度选择

    + (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnim ...

  6. java从控制台读取数据的方式

    1. Scanner sc = new Scanner(System.in); String s = sc.readLine(); 2. BufferReader br = new BufferRea ...

  7. JDK环境变量中dt.jar、tools.jar等变量值的作用

    变量名:CLASSPATH 变量值:.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar; tools.jar: 工具类 库,它跟我们程序中用到的 基础 ...

  8. angularJs编写多指令的情况

    本实例主要展示controller和link参数的使用.以及多个指令同时作用的情况. <!DOCTYPE html> <html ng-app="myModule" ...

  9. Understanding Python metaclasses

    转载:https://blog.ionelmc.ro/2015/02/09/understanding-python-metaclasses/ None of the existing article ...

  10. xdg-open 打开“irc:*”链接

    用于打开chrome浏览器中的"irc://*" #cp /usr/share/applications/xchat.desktop /home/zsj/.local/share/ ...