Gulp系列之工具使用
1.图片压缩工具–tinypng
关于图片的压缩,这是非常重要的,从我开始写博客开始,就会习惯于在操作用截图,遇到的问题,解决方法,以及其他的操作步骤等,都会截图保存,这样就导致了,即使只有几十篇文章,图片的个数已经超过了2000张,我写了一篇专门文章,专门探讨Gulp图片压缩 (Gulp图片压缩) 的文章,而这一篇文章,其实是我在综合了各种软件压缩方法之后,对gulp-tinypng-free进行修改的过程记录。
gulp-tinypng-free是在gulp-tinypng-nokey基础上扩展的,主要就是解决了tinypng的api中图片个数为500个的限制问题,但是还是有些问题:
- 出现 xxx Too many files uploaded at once 问题
- windows、linux或者是macos,因为图片路径问题导致的会重复压缩的问题
1.Too many files uploaded at once
这个问题,我其实在上一篇文章中已经讲过了,就是在请求头中添加一个’X-Forwarded-For’:getRandomIP(),通过随机ip的方式,绕过tinypng官网上的检测,这里不详细展开了。
2.图片路径问题导致的重复压缩
可以将存储在sign.json中的文件名进行替换,修改如下的代码:
1 | update: function (file, hash) { |
2.文件编码转换工具–iconv
虽然现在基本上都是utf-8编码了,但是也还是有些程序需要的是gb2312编码,如何进行压缩后,修改文件编码格式,并且不乱码呢?可以借助于iconv工具。
1 | const gulp = require('gulp') //引入gulp |
1.iconv-lite: Pure JS character encoding conversion
2.gulp生成utf-8文件的同时,也生成gbk版本 这里给了大部分的代码
3.gulp:将独立css、js文件中的代码注入到html页面中
3.内嵌js到html中
将js代码和css代码,内连到html中,使之成为一个整体,这个功能好像挺小众的,我查了很多资料,都是一些个人编写的gulp小插件,Start数量都非常的低,可能这个功能不常用吧。看了好几个自己写的插件,其实原理也是挺简单的,就是检测,并进行替换,其实也可以自己手撸一个。
1.送干货,实用内联gulp插件——gulp-embed 这个插件有一个data-embed=”disable”,可以在构建后删除脚本,这个倒是挺有用的,比如测试环境中的代码,就可以在构建后删除
2.使用gulp编写常用自动化构建任务
3.通过gulp-inject,gulp-inline-source把css、js代码内联插入到HTML中 这里有一个工具叫gulp-inject
4.前端加速与优化 1.缩减资源(HTML、CSS和JavaScript)的大小;2.优化图片:使用图片压缩工具、选择恰当的图片文件格式、尽可能考虑使用图标字体;4.首屏加载优化:结构化HTML,以便首先加载关键的首屏内容;5.优化CSS的渲染过程:避免内嵌较大的Data URI、避免内嵌CSS属性、内嵌较小CSS文件;6.移除阻止呈现的JavaScript:内嵌较小的JavaScript、异步加载JavaScript;7.启用Gzip压缩功能;8.避免目标网页重定向;9.使用浏览器缓存:Expires和Cache-Control、max-age标头、Last-Modifed和ETag标头、使用文件指纹;10.优化网络请求:减少DNS查询、使用cookie-free的独立域名;11.使用CDN加速
5. RodeyManager /gulp-html-inline gulp-html-inline
6. 蓝飞 / gulp-file-inline 这个插件除了可以内联js之外,还可以内联css,定义了替换的方式,也可以替换img标签
7.javascript - 无法使用gulp-inline-css将CSS内联到html文件中的样式标签