为优化图片,减少请求会把拿到切好的图标图片,通过ps(或者其他工具)把图片合并到一张图里面,再通过css定位把对于的样式写出来引用的html里面,对于一些图片较多的项目,这个过程可能要花费我们一天的时间,来实现这步.今天这一步缩短到几秒钟就能完成,究竟是什么工具这么神奇呢,他就是gulp的一个插件gulp.spritesmith.下面一张图来说明他能做什么. 第一步:npm install --save-dev gulp.spritesmith 安装 gulp.spritesmith 第二部:配…

相信做前端的同学都做过这样的事情,为优化图片,减少请求会把拿到切好的图标图片,通过ps(或者其他工具)把图片合并到一张图里面,再通过css定位把对于的样式写出来引用的html里面.对于一些图片较多的项目,这个过程可能要花费我们一天的时间,来实现这步.今天我给大家带来一个工具,将这一步缩短到几秒钟就能完成,究竟是什么工具这么神奇呢,他就是gulp的一个插件gulp.spritesmith.下面一张图来说明他能做什么. 看到这个图片介绍,相信大家已经对gulp.spritesmith能做到什么一目了…

最近一直在做移动端的改版项目,做之前老大就跟我说了好几次,说这次改版一定要用雪碧图减少一个页面的图片的请求次数,能加快页面的加载速度就一定要加快,我说可以.因为之前的项目开发时间过短,也没有时间去慢慢实现雪碧图,所以就一直没有做这样的一个功能,但这次时间较为充分,于是就开始着手做雪碧图.做之前呢,首先想到的就是用PS将所有的小图放在一张大图上,可那么多的小图,一张一张往上放,岂不累趴,而且你还没有办法去确切的计算整张雪碧图的宽高,这不搞死人吗?于是就上网查资料,然后就有了本文很简单的生成雪碧图的…

一.配置eslint module.exports={ "printWidth": 240, //一行的字符数,如果超过会进行换行,默认为80 "tabWidth": 2, //一个tab代表几个空格数,默认为80 "useTabs": false, //是否使用tab进行缩进,默认为false,表示用空格进行缩减 "singleQuote": true, //字符串是否使用单引号,默认为false,使用双引号 "s…

下载地址 http://www.99css.com/1524/ 包含详细的下载地址.下载步骤以及使用教程 亮点:自动合成雪碧图+自动生成雪碧图background-position代码 简单过程 下载 网页中的demo 并解压至 D 盘根目录 images 目录下存放三个子目录,将要合成雪碧图的图片放到子目录文件中 将要合成的图片直接拖到软件中,出现Image code 将Image code内的css代码复制覆盖到style.css文件中,再把style.css文件拖到软件中 最后打开_gag…

一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作. 易于学习 通过最少的 API,掌握 Gulp 毫不费力,构建工作尽在掌握:如同一系列流管道. 二.依赖安装 1.安装node.js, 2.全局安装gulp npm install gulp -g 3.本地安装gulp npm init…

首先解释下CSS Sprites是什么:有称CSS精灵,有称CSS雪碧的,无论叫什么,他的作用就是把网页上很多小图标放到一张图片里面,然后通过CSS里面的background-position来控制每个图片的坐标,这样不但减少http请求,而且还降低了图片的大小,加快图片的加载速度,对前端开发的朋友来说是必备技能.更详细的解释请到[百度百科]围观. 雪碧图使用场景 1.静态图片,不随用户信息的变化而变化 2.小图片,图片容量比较小 3.加载量比较大 注:一些大图片.有动态效果图片无需使用雪碧图…

NPM地址:https://www.npmjs.com/package/gulp-css-spriter/ 配置gulpfile.js: var gulp = require('gulp'),     minifyCSS = require('gulp-minify-css'),     spriter = require('gulp-css-spriter'); gulp.task('css', function() {     var timestamp = +new Date();    …

什么是CSS Sprite精灵? 是用于前端的一种图片应用技术,通常情况,我们的开发的网页或许有很多张图片,假如在一个页面上有50多张小图片,这意味着浏览器要逐个下载50张图片.Css Sprite它允许你将一个页面涉及到的所有零星图片都包含到一张图中,这样一来,当访问页面时,就只需要下载1张图片了,这显然大大减低了服务器请求压力. 这个技术加速网页响应速度,加速的关键,不是降低质量,而是减少个数.传统切图讲究精细,图片规格越小越好,重量越小越好,其实规格大小无所谓,计算机统一都按byte计算.…

雪碧图:sprite 是把多张图片拼到一张图中,提升性能的一种做法.把合并的图片一次性加载到内存中,需要时只渲染一部分. 我们选择gulp.spritesmith插件. 使用gulp时首先要在指定的任务目录下本地安装 gulp及任务需要的gulp插件. (1)建立package.json文件,可以手动建立.也可以使用 cnpm init,然后在命令行中写(学用命令行) (2)在指定的任务目录下本地安装gulp及插件:   cnpm install gulp --save  cnpm instal…