拉勾网系列页面重构

演示地址： http://47.100.222.240/lagou

总结一下之前的工作内容，好久前做的，但我觉得需要好好给它画个句号

本项目目的：

1，为了重新复习html，css做的一个实战，锻炼自己拿到任何一系列页面，如何从0到1的进行像素级还原的能力

2，在不使用其他任何技术的情况下，只用html，css写，想体会下这种纯粹的工具下会有什么局限性；以及如何使用现有的技术知识解决问题，重走一遍革命人的路程

在不依靠任何工具框架的情况纯html，css编写页面的一些体会：【真的过程很痛苦】

遇到的问题：

1，分析页面结构时，发现很多结构重复的部分，如果每个页面这些相同的代码都重写一遍，真的效率很低

2，css样式如果每一个样式都重写，会造成文件太长，不易维护，读起来困难，且大量代码冗余

3，在有限短短几天的时间，如何保证每天项目有效率的开发，完成产品交付

解决方案：

1，拿到任何一系列的页面后，观察页面结构：

看哪些部分被重复利用在多个页面中---（如本实例中的header和footer部分；）
哪些部分是相似部分---（如本实例中的轮播图那一块，在首页和校园页中都有；还有sidebar；还有面板切换展示公司处理简历）24hot及it-hot；
对页面整体布局在脑中有一个清晰的概念，html结构怎样正确合理的安排也很重要，考虑后续与数据渲染如何方便。

2，开始着手编写每一模块的html和css（分文件，写好注释）

先写一个common.css，用于存放一些全局用到的css样式
采取先布局，后样式的编写规则
- 根据场景需要，选择性的采用浮动，定位，flex，或者grid进行布局
- 对局部进行细节样式的修改，直到复刻完成，注意使用属性继承，不写多余代码，使代码精简而有效
样式分全局样式文件，局部样式文件局部样式分两类：一：是每个可重用模块的样式；二：是每个其他子页面可能需要再添加的一些样式
按照上述步骤首页应该可以完全搞出来，后续拼凑其他页面，注意样式的引用，按照文档中结构的先后顺序引用。

3，项目计划安排

图片可能显示不出来，完整内容可查看我在掘金发的文章

展望：对框架和工具，实际项目中还是要针对具体情况具体问题有选择性的使用。

总结：

可能写着写着就容易因大量的代码而烦躁，但要冷静，思考如何处理问题很关键，同时也体会到，要多练“懒人思维”（我自己瞎造的词）：这里并不是贬义，而是希望自己能够多往能开发一些可通用的代码方向上发展，使日常的开发工作更有效率。

阶段二：考虑工程化，规范化

Gulp与Sass

在项目根目录下安装一些包 npm install --global gulp(可以试一下要不要)

npm install --save-dev gulp gulp-sass node-sass

Gulp 配置 Sass 编译的示例代码

在项目根目录下创建一个名为 gulpfile.js 的文件

文件的合并

方法1: gulp-concat

目的为了合并sass编译好后的css文件

TODO问题：关于sass写的css文件中图片路径处理。

scss文件组合

方法2：@import 手动有序合并，就可以不用gulp-concat，不过gulp-concat可以合并其他文件

出现问题：一些样式出现了互相干扰--考虑不只搞一个index.min.js

文件压缩

css文件： sass自带css压缩风格（模式）输出/或使用gulp-minify-css

html文件：gulp-minify-html

图片压缩：gulp-imagemin

Minify PNG, JPEG, GIF and SVG images with imagemin

目前：gulp-imagemin: Minified 30 images (saved 138 kB - 14.3%)

由于我有images嵌套文件夹，所以去考虑到gulp.src的用途，匹配模式

 .   点表示当前路径

 通配符：

 *  一个星号，匹配该路径段中0个或多个任意字符

 ** 两个星号，不但匹配该路径段中0个或多个任意字符。而且还匹配形如“tj/pl/ab”这样的字符串，其实就是子文件夹了。

now:gulp-imagemin: Minified 70 images (saved 478 kB - 17.9%)

js压缩：gulp-uglify

需求：修改文件名，例如将demo.css修改为demo.min.css

文件的重命名gulp-rename

gulp会以输入的文件流的名称来命名处理后的文件名，因此，如果需要重命名文件时，可以使用 gulp-rename插件；

如果需要让任务（task）按顺序执行，请使用 series() 方法。

每个 gulp 任务（task）都是一个异步的 JavaScript 函数，此函数是一个可以接收 callback 作为参数的函数，或者是一个返回 stream、promise、event emitter、child process 或 observable (后面会详细讲解) 类型值的函数。由于某些平台的限制而不支持异步任务，因此 gulp 还提供了一个漂亮替代品。

目前先采用手动编译先体验一下这个流程，之后可以做到自动化一点

如何优化处理网页内的图片资源，提高网页加载速度？

1、压缩图片

有损--利用了人类对图像或声波中的某些频率成分不敏感的特性，允许压缩过程中损失一定的信息;虽然不能完全恢复原始数据，但是所损失的部分对理解原始图像的影响缩小，却换来了大得多的压缩比。

优点：更高的压缩比，图像体积变得更小
缺点：丢失一部分图片信息，图像相应质量下降

无损--对文件本身的压缩，和其它数据文件的压缩一样，是对文件的数据存储方式进行优化，采用某种算法表示重复的数据信息，文件可以完全还原，不会影响文件内容，对于数码图像而言，也就不会使图像细节有任何损失。

优点：图像可完全还原，图像质量不变
缺点：压缩比较低，相对比于有损压缩图片体积要大

2、雪碧图使用构建工具gulp的雪碧图插件，自动合成雪碧图

3、图片转为base64编码形式

主要应用在一些小图标上，小图标转为base64后虽然数据量增大了但是可以减少HTTP请求，提高加载速度。（大图片就别这么折腾了，那完全是在作~）

优点：减少了HTTP请求，提高网页加载速度

缺点：破坏了html页面结构，数据量较原图片增大约三分之一。base64无法缓存（当然有解决方案，但意义不大）

4、其他优化方式

1、能用CSS写出来的别去用图片，比如纯色或渐变色的背景，可以写出来就不要切图平铺，还有一些形状规则的小图标，例如方形、圆形、三角形等。
2、能用background就不用img，（啥意思？），就是说能使用背景图片，就不要使用img标签（这是有很大区别滴！）
3、能使用png8就不使用gif，同一图片png8比gif格式体积小。

5、图片预加载和延迟加载技术

songguoguo927/lagou