RyanGun's Blog

最近在做和WebVR有关的项目，在这里简单地分析一下总体的脉络。整个实现的方式是通过js来控制css 3d变换来实现的，我们将围绕360度全景VR来做例子。

通常在首屏资源尚未准备好之前，需要做首屏预加载。

有时候H5没有必要在手机横屏下和PC下显示，可以做一个提示层，提示用户使用竖屏浏览。

该篇主要记一下Webpack的心得，会根据认知的进度更新。一开始Webpack的入门，推荐摸索一遍这篇中文指南；另外，我又看到了这一篇《webpack入门，看这篇就够了》，再进一步认识了webpack。

Gulp.js在现在来说已经不是一个什么新鲜的事物，但是，在我们前端开发者的工作中依然发挥着重要的作用。按照官方的定义，Gulp.js是一个自动化构建工具，即开发者可以使用它在项目开发过程中自动执行常见任务，避免重复繁琐的操作，提高效率。从它诞生的那一刻起，就以易于使用、构建快速、插件高质、易于学习等优点深受前端甚至后端开发者的青睐。

这里专门用来整理在平常的工作和学习过程中遇到的移动端兼容问题，方便回顾查阅。

Vuejs常用于快速构建单页应用，容易上手，其学习成本相对于Angular、React等要低。Vuejs最简单的用法是直接在页面用script标签加载独立包，独立包分为开发版本（Development Version）和生产版本（Production Version），区别在于前者包含非常友好的错误提醒方便debug，建议在开发环境使用前者、生产环境更换成后者，我们会在接下来的实践中体验这个Debug Mode。

前面有讲到Browsersync监听修改保存自动刷新调试的功能，这很方便。但Browsersync的作用不仅仅如此，它还有一个特别重要的功能——多终端调试。还记得类似下面这个截图吗？

下面所要说的这个响应式解决方案，是我对比不同的方法再糅合整理成自己习惯的一套方案，一直都在使用，觉得还可以，不一定适合大家，也不可能适合所有的需要响应式的网站，但应付一些官网性质、展示性的静态网站还是游刃有余，总体说一下思路：rem + sass + media query。

咱们切图仔平常在写页面非常烦的一件事是不停地去刷新调试，而这个操作是可以省去的。有尝试过去解决这个问题的朋友估计会知道chrome的livereload插件＋gulp-livereload、npm模块livereload等等，甚至自己写node去监听。如果你不是后者，不妨关注一下Browsersync，它相比各种前者来得简单。