一、配置 gulp的雪碧图功能没有grunt那么强大,但是类似功能也支持,功能稍微弱一些,但是也很棒 npm地址:https://www.npmjs.com/package/gulp-css-spriter/ https://www.npmjs.com/package ...
相信做前端的同学都做过这样的事情,为优化图片,减少请求会把拿到切好的图标图片,通过ps 或者其他工具 把图片合并到一张图里面,再通过css定位把对于的样式写出来引用的html里面。对于一些图片较多的项目,这个过程可能要花费我们一天的时间,来实现这步。今天我给大家带来一个工具,将这一步缩短到几秒钟就能完成,究竟是什么工具这么神奇呢,他就是gulp的一个插件gulp.spritesmith。下面一张 ...
2015-12-17 15:08 7 9357 推荐指数:
一、配置 gulp的雪碧图功能没有grunt那么强大,但是类似功能也支持,功能稍微弱一些,但是也很棒 npm地址:https://www.npmjs.com/package/gulp-css-spriter/ https://www.npmjs.com/package ...
一、安装nodejs之后,要设置两个环境变量 在 计算机右击属性---高级系统设置---高级---环境变量 打开窗口 新建2个环境变量,它们的值分别是nodejs根目录下的node_modules ...
最近公司这边事情不是很多,所以就要多学点东西了,把学的先记下来,避免睡一觉又忘了。到时候想不起来,过来翻翻就好了。 这是继上一篇的基础上改的,没有什么技术上的改进,上一篇用粒子组合成图片,,图片的宽高是100*100的。宽高都是每隔一个像素取的,再除去透明的,其总粒子数都有1914个粒子了,这要 ...
安装依赖 gulpfile.js的配置 const gulp = require("gulp") // 本实例为完成精灵图的合并 const spritesmith = require("gulp.spritesmith") gulp ...
...
NPM地址:https://www.npmjs.com/package/gulp-css-spriter/ 配置gulpfile.js: var gulp = require('gulp'), minifyCSS = require('gulp ...
图片合成,多张图片的合成,通过canvas将多张图片及二维码合成一张图片,然后再转换成图片展示 完整代码 canvas画图主要代码 ...
1.多张图片合成一张比如: 图片合成,可以显示在浏览器上面同时保存到文件夹下面 图片合成 2.获取 源图片的高度和宽度 list($width, $height) = getimagesize($file); ...