基于Gulp编写的图片、JS、CSS压缩工具包含图片裁剪、合并功能 图片裁剪、合并功能使用的是images插件实现 插件地址:https://www.npmjs.com/package/images 执行图片压缩之前先执行图片合并 app.js文件中写了一些注释 目录结构增加调整 node app.js 图片压缩主要有3中方法 1、使用 gulp-imagemin 插件进行压缩,效果比较差,图片压缩后大小变化不是很大; 2、使用 gulp-tinypng-nokey 插件进行压缩,效果一般,图片压缩后的比例一般; 3、使用 gulp-tinypng-compress 插件进行压缩,花钱的就是不一样,压缩后的效果很好,需要申请KEY,每个月免费压缩500张。 去tinypng官网申请key:https://tinypng.com/developers 环境说明 node >= 8.0.0 gulp >= 4.0.0 使用 1、安装依赖 yarn install / npm install 2、启动 gulp script // 压缩js gulp css // 压缩css gulp image // 第一种压缩图片方法 gulp tp // 第二种压缩图片方法 gulp tinypng // 第三种压缩图片方法 gulp upload // 上传图片到腾讯云 gulp del // 删除dist文件夹下的所有文件 #! 打算把这些命令集合在一起,正在研究~~~~ 3、文件存放 1、图片存放在根目录的images目录下,执行完命令后会在根目录生成dist文件夹images文件夹生成压缩后的图片 2、js文件存放在根目录的js目录下,执行完命令后会在根目录生成dist文件夹js文件夹生成压缩后的js文件 3、css文件存放在根目录的css目录下,执行完命令后会在根目录生成dist文件夹css文件夹生成压缩后的css文件