Gulp系列之工具使用

标签: Gulp 分类: Nodejs 创建时间:2020-12-30 01:24:13 更新时间:2023-10-20 11:23:25

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
update: function (file, hash) {
this.changed = true;
// 主要是这里,将路径的\\,变为/
var filepath=file.path.replace(file.cwd, "").split(path.sep).join('/');
this.sigs[filepath] = hash;

this.write();
return this;
},
compare: function (file, cb) {
var md5 = this.calc(file),
// 和这里,将路径的\\,变为/
filepath = file.path.replace(file.cwd, "").split(path.sep).join('/'),
result = filepath in this.sigs && md5 === this.sigs[filepath];

return cb
? this
: {
match: result,
hash: md5,
};
},
参考文章:
1.windows和linux下的路径分隔符问题 (这篇文章提到了问题产生的原因以及解决方法)
2.Node.js之path模块的使用

2.文件编码转换工具–iconv

虽然现在基本上都是utf-8编码了,但是也还是有些程序需要的是gb2312编码,如何进行压缩后,修改文件编码格式,并且不乱码呢?可以借助于iconv工具。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
const gulp = require('gulp') //引入gulp
const htmlmin = require('gulp-htmlmin') //引入html压缩模块
const cleanCss = require('gulp-clean-css') //引入css压缩模块
const autoprefixer = require('gulp-autoprefixer') //引入加前缀模块
const babel = require('gulp-babel'), //引入es6转es5模块
uglify = require('gulp-uglify') //引入js压缩模块
const fs=require("fs")
const iconv = require('iconv-lite');

const path = { //方便管理路径
/*一个*表示所有文件,两个*表示所有目录*/
html: {
src: 'index.html',
dest: 'dist'
}
}

const html = () => { //创建任务,并命名任务名
return gulp.src(path.html.src) //打开读取文件
.pipe(htmlmin({
removeComments: true, //清除HTML注释
collapseWhitespace: true, //压缩HTML
collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input checked />
removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: false, //删除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
minifyJS: true, //压缩页面JS
minifyCSS: true //压缩页面CSS
})) //管道流操作,压缩文件
.pipe(gulp.dest(path.html.dest)) //指定压缩文件放置的目录
.on('end', function () {
fs.readFile('dist/index.html', 'utf-8', function (err, data) {
var gbkCode = new Buffer(iconv.encode(data, 'GB2312'));
fs.writeFile('dist/index_gb2312.html', gbkCode, function (err) {
if (err) {
return;
}
console.log('GB2312文件成功生成');
});
});

});
}
module.exports = {
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文件中的样式标签
小额赞助
本人提供免费与付费咨询服务,感谢您的支持!赞助请发邮件通知,方便公布您的善意!
**光 3.01 元
Sun 3.00 元
bibichuan 3.00 元
微信公众号
广告位
诚心邀请广大金主爸爸洽谈合作
每日一省
isNaN 和 Number.isNaN 函数的区别?

1.函数 isNaN 接收参数后,会尝试将这个参数转换为数值,任何不能被转换为数值的的值都会返回 true,因此非数字值传入也会返回 true ,会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字,如果是数字再继续判断是否为 NaN ,不会进行数据类型的转换,这种方法对于 NaN 的判断更为准确。

每日二省
为什么0.1+0.2 ! == 0.3,如何让其相等?

一个直接的解决方法就是设置一个误差范围,通常称为“机器精度”。对JavaScript来说,这个值通常为2-52,在ES6中,提供了Number.EPSILON属性,而它的值就是2-52,只要判断0.1+0.2-0.3是否小于Number.EPSILON,如果小于,就可以判断为0.1+0.2 ===0.3。

每日三省
== 操作符的强制类型转换规则?

1.首先会判断两者类型是否**相同,**相同的话就比较两者的大小。

2.类型不相同的话,就会进行类型转换。

3.会先判断是否在对比 null 和 undefined,是的话就会返回 true。

4.判断两者类型是否为 string 和 number,是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean,是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol,是的话就会把 object 转为原始类型再进行判断。

每日英语
Happiness is time precipitation, smile is the lonely sad.
幸福是年华的沉淀,微笑是寂寞的悲伤。