结合慕课网从PSD到HTML和FullPage.js全屏滚动插件等多个课程制作的单页应用

最近在慕课网上学了好几门课，结合这些课里讲的技术做了一个静态页面，在这里简单总结记录一下。

项目演示地址：https://seed-fe.github.io/psd-html/

从切图开始

最开始我只是想学习一下切图，很早就看到慕课网有前端工程师必备的PS技能——切图篇这个课程，看完以后我不仅学会了Photoshop各种基本工具的操作，还学会了在新版本的Photoshop中使用生成图像资源的方法直接把psd文件中的单个图层转化为jpg、png等图片文件的精准切图方法，在实际的页面重构工作中，这个方法是很实用的。

从切图到重构页面

学会了切图以后，我就想找个实际的psd设计稿来切图重构一下练练手，刚好又看到了从 psd 到 html这门课。在这门课里，老师手把手教大家拿到一个psd设计稿如何分析页面结构，类型，从而确定内容划分和布局，如何和结合设计以及后端同事的需求来编写HTML和CSS。

在这门课里，老师是用转换为智能对象的方法来进行切图，也很方便，不过我个人感觉还是直接用图层转换为图片文件更快。

在编写CSS样式的时候，可以把样式分为重置样式reset.css，公共样式common.css和这个页面的独立样式index.css三个部分。

在重置样式中提到了一个解决子元素浮动造成父元素高度塌陷的方法，没有详细讲，所以我查找资料理解了一下：

/*IE6/7不支持:after 伪类，使用IE私有的zoom缩放属性防止包裹浮动元素的
父元素高度塌陷，触发haslayout*/
.clearfloat {
	zoom:1;
}
/*IE8+和其他所有现代浏览器都支持:after+content，所以，对这些浏览器可以
使用:after+content方法清除浮动子元素造成的父元素高度塌陷*/
/*float的本意是文字环绕图片，所以本身的目的就是使浮动的子元素从父元素中
溢出，从而让后面的文字环绕上来（所以父元素会高度塌陷），用:after在父元素
的最后添加一个block元素并且清除浮动，就能把父元素撑开，
visibility: hidden和height: 0都是为了让添加的元素不显示出来，
这里的两条.clearfloat结合起来使用在各种浏览器中都比较保险*/
.clearfloat:after {
	display: block;
	clear: both;
	content: "";
	visibility: hidden;
	height: 0;
}

另外一个知识点是CSS sprite雪碧图技术，就是把一些小图标拼在一张大图上，通过CSS的background-image和background-position属性来调用不同的小图标，从而减少加载图片的HTTP请求数。这个本身是很好理解的，慕课网也有这个课程，所以我也简单看了一下。

增加CSS3动画特效

在从 psd 到 html这门课程的最后老师还提到了可以给图片增加一些CSS3动画，但是他没有专门做这个，所以我又发现了CSS3图片动态提示效果这门课，里面讲到了用HTML5新增的语义标签figure和figcaption来包裹图片，然后用CSS3的transform和transition给图片和图片说明增加动画效果。我把这些方法用到了自己的页面里，很快就掌握了。

实现全屏滚动效果

这个重构完成的页面是一个餐厅的宣传介绍页面，可以分成header，menu，featured dishes，gallery和footer五个部分，每个部分的大小比较相近，于是我又想到：能不能把这个页面改造成现在流行的全屏滚动效果呢？这时我又在慕课网上找到了FullPage.js全屏滚动插件这门课，刚好带着大家做了一个全屏滚动实例。于是我把这个插件用到了这个项目中。

插件的使用本身不难，只要根据文档稍微改造一下页面的结构和样式就能实现单页全屏切换的效果，但是课程里面没有讲这个插件的原理。所以我又找资料了解了一下，简单的说全屏滚动是通过鼠标事件MouseWheel动态改变每一页的位置，并添加CSS3 transition过渡效果，让切换更平滑。结合move.js这个CSS3动画的js库，我还在页面切换的时候给页面元素添加了淡入、飘入等动画效果。

fullpage插件除了全屏滚动还提供了图片延迟加载（lazyload）的功能，这个功能也是很实用的，想想看，既然做成了单页应用，刚打开页面的时候其实只需要加载第一页的内容，这样减少了HTTP请求数，能够提升加载速度。延迟加载就是当需要加载的时候再加载，比如我滚动加载到了第三页，这个时候再加载第三页的图片。当然也可以用jQuery的lazyload插件来做这个工作。

延迟加载的原理也不难理解：

1. 页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片（也就没有请求咯，也就提高性能咯），一旦通过javascript设置了图片路径，浏览器才会送请求。有点按需分配的意思，你不想看，就不给你看，你想看了就给你看~

1. 如何获取正真的路径，这个简单，现在正真的路径存在元素的“data-url”（这个名字起个自己认识好记的就行）属性里，要用的时候就取出来，再设置；
2. 判断元素是否进入或者即将进入视口，然后设置真正的路径。

用Unslider插件实现轮播

页面的第三屏需要用到轮播特效，fullpage插件也自带了轮播功能，但是它的页面结构要求比较特定，和这个页面的结构不符。这里当然可以用原生的js实现，但是既然用到了jQuery，不如用Unslider这个基于jQuery的轮播插件，当然，也需要对HTML结构和CSS样式进行一些修改。

部署到Github Pages上

Github Pages 是 Github 的静态页面托管服务。一些小的个人项目和demo很适合托管在上面，也很方便，步骤也很简单：

1. 在项目的git repo中新建gh-pages分支，也就是用来部署的分支。
2. 在settings options GitHub Pages Source选择gh-pages branch。
3. 部署地址：https://<github username>.github.io/<project name>/，其中<>里的内容换成自己的github账号和项目repo名称。

总结

从这个项目里学到了切图，页面重构，CSS3动画以及一些常用的jQuery插件的使用，收获还是很大的，慕课网的一些实践类课程很实用，不过如果能讲讲原理和思想就更好了，毕竟理解了插件和库的思想才能自己去改造和实现。本来不打算写这篇手记，因为感觉用的技术并不高大上，但是当静下心开始写的时候，发现总结一下还是能够帮助自己理解，所以还是不能忽视总结的意义啊。

项目地址：https://github.com/seed-fe/psd-html

希望对同在慕课网学习的小伙伴们也有帮助~

Update

用gulp改进工作流

关于gulp的基础知识我在另一篇手记：Gulp基础及其在前端工作流自动化实践中的应用 里已经进行了详细的讲解，这里不再重复，只讲一下gulp在这个项目里如何改进工作流。

因为最后要部署到github pages上让人访问，就要做一些前端性能优化的工作，这个项目里有三个css文件，一个自己编写的js文件和多个第三方js库，还有很多图片，第三方js库可以直接CDN加载，图片可以进行压缩，单个js文件也可以用gulp简单地压缩，添加hash防缓存，而css所要完成的工作稍微多一点，在开发阶段，三个css文件没有进行合并，在发布阶段我想合并为一个，并且用gulp自动替换原先的三个css引用为一个新的css引用，因此gulp要对css进行的处理有：合并 压缩 添加hash防缓存 自动替换html文件里css的引用。

具体流程如下：

1. 在html文件中把要替换的css引用包裹在注释块里：

<!-- build:css css/all.css -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/index.css">
<!-- endbuild -->

注释里包括了要替换的文件类型（这里是css），优化后的文件路径（这里是css/all.css）
2. gulp-useref插件解析html文件里build注释部分并对其做合并操作，然后把html和合并后的文件都传递到流中
3. 用gulp-filter从流中单独取出css文件再用gulp-cleanCSS进行压缩
4. 调用gulp-filter的restore 方法恢复流中被过滤之前的文件，再次用gulp-filter过滤掉html文件，剩下css文件用gulp-rev添加hash
5. 用gulp-revReplace把优化后的css替换到html里用build注释块包裹的部分

代码如下：

gulp.task('cssReplace', function() {
	var cssFilter = plugins.filter('**/*.css', {restore: true});
	var indexHtmlFilter = plugins.filter(['**/*', '!**/index.html'], {restore: true});
    return gulp.src('src/index.html')
    	// useref解析html文件里build注释的部分并且合并build注释部分包括的css/js文件，然后把html和合并的文件传递到流中
      .pipe(plugins.useref({}, lazypipe().pipe(plugins.sourcemaps.init, {loadMaps: true})))
      // cssFilter从流里取出css文件单独操作
      .pipe(cssFilter)
      // 压缩css
      .pipe(cleanCSS())
      // 恢复用filter过滤之前的所有文件
      .pipe(cssFilter.restore)
      // 过滤掉流中的html文件，这里只剩下css文件
      .pipe(indexHtmlFilter)
      // 给合并压缩后的css文件添加hash
      .pipe(rev())
      // 再次恢复过滤之前的所有文件
      .pipe(indexHtmlFilter.restore)
      // 用上述处理后的css替换html里用build注释部分的css引用
      .pipe(plugins.revReplace())
      .pipe(plugins.sourcemaps.write('./'))
      .pipe(gulp.dest('dist/'));
});

这里只列出对css的处理，js和图片的处理相对简单，就不展开了，可以参考Gulp基础及其在前端工作流自动化实践中的应用

参考资料

1. 慕课网——前端工程师必备的PS技能——切图篇
2. 慕课网——从 psd 到 html
3. Containing Floats
4. 慕课网——CSS Sprite雪碧图应用
5. 慕课网——CSS3图片动态提示效果
6. 慕课网——FullPage.js全屏滚动插件
7. FullPage.js 文档
8. 滚动加载图片（懒加载）实现原理
9. Unslider jQuery轮播插件

本作品采用知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。要查看该许可协议，可访问 http://creativecommons.org/licenses/by-nc-sa/4.0/ 或者写信到 Creative Commons, PO Box 1866, Mountain View, CA 94042, USA。