Google Web开发最佳实践(二)

简介:


本指南逐步引导你使用 Web 新手开发包创建新站点,帮助你充分利用 Web 新手开发包提供的工具。

1.开发环境配置

本人环境为win7x64。需要安装以下环境。

  • 安装NodeJS(同时会安装NPM);
  • 安装Ruby(需要大于1.8.7版本),然后安装sass:gem install sass(楼主安装了好几次都提示连接错误,最终还是装上了...)。
下载新手开发包: https://developers.google.com/web/starter-kit/,解压进入该目录,执行:
npm install
结果显示 Error: ENOENT, stat 'C:\Users\Administrator\AppData\Roaming\npm 解决方法:在C:\Users\Administrator\AppData\Roaming\ 在这个目录建立npm文件夹就行了。然后再执行还是抱一堆错,貌似是git问题。于是在电脑上又装了git并配置了git的环境变量,最后终于install 成功了。
然后官网来了一句gulp serve命令,又报错,原来gulp是JS的构建工具,需要自个安装的。
于是执行:
npm install -g gulp
然后再执行:
npm serve
如果在浏览器能访问http://localhost:3000说明配置成功了。




2.开发阶段

gulp.js 是一种基于流的,代码优于配置的新一代构建工具。Gulp 和 Grunt 类似。但相比于 Grunt 的频繁的 IO 操作,Gulp 的流操作,能更快地完成构建。这里用到的gulp命令主要有三个:gulp serve,gulp,gulp serve:dist。

2.1 gulp serve 启动本地服务

这个任务启动了一个本地 HTTP 服务器,让你可以在浏览器中查看你的站点,但幕后其实有一些其他工具在运作:

实时刷新

传统的刷新过程是,编辑器中修改,切换到浏览器,按 CTRL-R,等待页面重载,实时刷新则消去这一步。
有了实时刷新,你可以一边在编辑器中修改,一边看它们在打开的浏览器中即时生效。

跨设备测试

Browser Sync 帮你跨设备测试站点。任何的滚动,轻拍,或按键都将同步给所有连接着的浏览器。本人在iPad和PC上同时打开测试网页,发现对页面的响应是同步的,但是对于浏览器的响应并不同步。比如点击iPad上的浏览器的后退按钮,PC端并未同步,所以这里的同步是指页面响应同步。

自动化添加前缀

在面向诸多浏览器时,你需要使用浏览器厂商前缀来确保你能够使用它们的特性。Web 新手开发包为你自动化所有的添加前缀的工作。构建过程会让 autoprefixer 过一遍 CSS,自动添加浏览器厂商前缀。

检查 JavaScript

JSHint 是一个扫描 JavaScript 代码的工具,用于检查你 JavaScript 逻辑中的可能问题,而且能强化编码的最佳实践。
在你构建项目时,或是你运行 gulp server 然后对一个 JavaScript 文件做了修改,JSHint 都会运行。

编译你的 Sass

在你运行 serve 命令后,项目中任何针对 Sass 文件的修改都会被编译成 CSS 并且添加浏览器厂商前缀,随后页面由实时刷新功能来重载。
给不知道 Sass 的介绍一下,Sass 项目把自身描述为一种“CSS 扩展语言”。基本上它就是 CSS 加一些额外特性。比如,它添加了变量和函数的支持,可以帮你模块化、复用 CSS,更好地组织 CSS。

2.2 gulp 构建网站的生产版本

只要 gulp 命令,你就可以给你的网站构建一个可立即部署的版本。这个命令运行一些我们前面已经见过的任务,以及其它致力于让你的网站加载更快、更高效的任务。
构建生产版本执行的主要任务有:

构建样式

构建首先会先编译项目中的 Sass。Sass 编译完成后,Autoprefixer 过一遍所有的 CSS。

检查 JavaScript 中的问题

第二步运行 JSHint 检查 JavaScript。

构建 HTML 页面

下一步就是检查你的 HTML 文件,查找构建块,合并、压缩 JavaScript。处理完 JavaScript 后,构建会压缩 HTML 页面。
通过移除并非真正需要的注释或空格符,配合其它技术,压缩减小了最终 JavaScript 文件的字符数。这就减小了最终的文件大小,加快站点加载时间。
合并意味着把多个文件的内容并成一个。之所以这样做是因为浏览器可以因此只发送一个请求给服务器,而不是多个,对你的用户来说,这会更快。
关于哪些 JavaScript 文件需要我们合并、压缩到一起,构建块中都有。且让我们看一个构建块示例:
<!-- build:js scripts/main.min.js -->
<script src="scripts/example-1.js"></script>
<script src="scripts/example-2.js"></script>
<!-- endbuild -->

如你所见,一个构建块不过是一个格式特殊的注释,第一行表示该构建块是针对 JavaScript 的,最终文件的名称及路径应该是 scripts/main.min.js。最后一行关闭了块。两行之间则是我们要压缩、合并的 JavaScript 文件,在这个例子中是指 example-1.js 和 example-2.js。

优化图片资源

JPEGs 和 PNGs 格式的图片的元数据被剔除;对渲染图片来说这些是多余的。元数据包括了诸如拍照所用的相机等信息。
至于 SVGs,构建会移除所有不需要的属性或空白,以及存在的注释。

拷贝字体

这个简单工作就是把我们的字体从 app 目录拷贝到最终的构建目录里。

拷贝根目录下所有文件

如果项目根目录下存在任何文件,则构建也会将它们拷入最终的构建目录中。

2.3 测试你的网站

在你推送任何东西到生产环境前,你需要确保一切如你所预料的一样正常工作。gulp serve:dist 命令构建出一个网站的生产版本,然后启动一个服务器,再为你打开一个浏览器。它没有实时刷新或 Browser Sync,但在部署你的站点前,它是个可靠的测试站点的方法。

3.使用样式指南

Web 新手包附带一个样式指南,能够快速、便捷地查看你站点使用的所有样式。从组件的角度思考你的 CSS,然后相应地拆分样式与类,你就得到清晰结构的样式,也能看到所有组件放在一起是什么样子。

查看样式指南 HTML

要查看添加页面元素所需的 HTML 和类名,点击样式指南顶部的 ’Toggle Code Snippets’ 按钮。一旦启用,你会在每个元素下看到一段带有适当标记的代码示例,你可以拷贝、粘贴到你的页面。
Toggle Code Snippet 按钮的截图

扩展样式指南

不管你什么时候创建一个会在网站的许多地方上使用的新元素,请考虑添加该元素到你的样式指南中。

添加一个新的组件

打开 app/styleguide/index.html,在最后一个元素后面给你的新元素添加 HTML。
在 app/styles/components/ 中,给你的组件创建一个名称合适的新 Sass 文件。
打开 app/styles/components.scss,在文件底部,以如下方式导入新 Sass 文件。
 // New Styles
 @import "_components/_<My Component Name>";

别忘了在文件名中添加下划线;它指明该文件的目的是用于合并到其他 Sass 文件。
访问 http://localhost:/styleguide/,在本地测试它的外观情况,确保构建成功。
最后,在你的页面中使用新组件。

示范如何添加组件

下面是一个简单的添加组件到样式指南中的步骤。
首先我们在 app/styleguide/index.html 底部添加 <footer> 标签,给它一个类名 Footer。
接着创建我们的 Sass 文件。这里我们会创建 app/styles/components/_footer.scss 文件然后添加一些非常基本的样式以便开始。
 .Footer {
   height: 180px;
   background-color: #404040;
 }

在 components.css 底部,添加我们的 footer sass 文件。
 // New Styles
 @import "_components/_footer";

现在,运行 gulp serve 并检查样式指南,我们应该能看到赏心悦目的 footer。
添加多一点样式:
 .Footer {
   height: 180px;


   color: white;
   background-color: #404040;


   a {
       text-decoration: none;
       color: white;
   }
 }

让我们在 styleguide.html 中添加一个标题,这样它看起来跟其他样式指南元素就很像,也许还可以在页面顶部添加一个链接。
 // Footer Link at top of styleguide.html
 <li class="summary-header__anchors-item">
   <a href="#footer">Footer</a>
 </li>


 .......


 // Footer Title
 <div class="container">
   <a name="footer"></a>
     <h2 class="subsection-title">
       <strong class="subsection-number">#21</strong> Footer
     </h2>
   </div>


   <!-- Input Component HTML Here -->
 </div>

最后,再充实下 HTML。
 <footer class="Footer">
   <div class="container">
     <p>
       <a href="#">
         <i class="icon icon-chevron-up"></i> Back to top
       </a>
     </p>
   </div>
 </footer>
最后结果如下:


你现在可以在引入 components.scss 文件的任意页面中使用 footer 组件 (比如 app/styles/main.scss 文件)。
/*
 * Visual Style Guide styles
 * Remove if you prefer to use a CSS library, like Bootstrap
 */
@import "components/components";


相关文章
|
2月前
|
关系型数据库 分布式数据库 数据库
PolarDB Supabase最佳实践-Web应用
PolarDB Supabase 是基于 PolarDB PostgreSQL 版的全托管服务,集成 Realtime 实时数据库、RESTful API、身份认证、文件存储等功能,提供高性能、灵活扩展的后端解决方案。用户可快速构建 Web 应用、SaaS 平台及 AI 集成应用,简化运维操作,提升开发效率。
|
4月前
|
Web App开发 前端开发 JavaScript
鸿蒙5开发宝藏案例分享---Web适配一多开发实践
这是一份实用的鸿蒙Web多设备适配开发指南,针对开发者在不同屏幕尺寸下的布局难题提供了解决方案。文章通过三大法宝(相对单位、媒体查询和窗口监听)详细介绍如何实现智能适配,并提供了多个实战案例,如宫格布局、对话框变形和自适应轮播图等。此外,还分享了调试技巧及工具推荐,帮助开发者快速上手并优化性能。最后鼓励读者实践探索,并提示更多官方资源等待发现。
|
11月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
610 3
|
6月前
|
关系型数据库 MySQL 数据库
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
TIS 是一款基于Web-UI的开源大数据集成工具,通过与人大金仓Kingbase的深度整合,提供高效、灵活的实时数据集成方案。它支持增量数据监听和实时写入,兼容MySQL、PostgreSQL和Oracle模式,无需编写复杂脚本,操作简单直观,特别适合非专业开发人员使用。TIS率先实现了Kingbase CDC连接器的整合,成为业界首个开箱即用的Kingbase CDC数据同步解决方案,助力企业数字化转型。
1143 5
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
|
8月前
|
人工智能 前端开发 API
Gemini Coder:基于 Google Gemini API 的开源 Web 应用生成工具,支持实时编辑和预览
Gemini Coder 是一款基于 Google Gemini API 的 AI 应用生成工具,支持通过文本描述快速生成代码,并提供实时代码编辑和预览功能,简化开发流程。
448 38
Gemini Coder:基于 Google Gemini API 的开源 Web 应用生成工具,支持实时编辑和预览
|
6月前
|
机器学习/深度学习 开发框架 API
Python 高级编程与实战:深入理解 Web 开发与 API 设计
在前几篇文章中,我们探讨了 Python 的基础语法、面向对象编程、函数式编程、元编程、性能优化、调试技巧以及数据科学和机器学习。本文将深入探讨 Python 在 Web 开发和 API 设计中的应用,并通过实战项目帮助你掌握这些技术。
|
8月前
|
Web App开发 编解码 vr&ar
使用Web浏览器访问UE应用的最佳实践
在3D/XR应用开发中,尤其是基于UE(虚幻引擎)开发的高精度场景,传统终端因硬件局限难以流畅运行高帧率、复杂效果的三维应用。实时云渲染技术,将渲染任务转移至云端服务器,降低终端硬件要求,确保用户获得流畅体验。具备弹性扩展、优化传输协议、跨平台支持和安全性等优势,适用于多种终端和场景,特别集成像素流送技术,帮助UE开发者实现低代码上云操作,简化部署流程,保留UE引擎的强大开发能力,确保画面精美且终端轻量化。
356 17
使用Web浏览器访问UE应用的最佳实践
|
10月前
|
开发框架 搜索推荐 数据可视化
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
380 67
|
10月前
|
存储 前端开发 JavaScript
如何在项目中高效地进行 Web 组件化开发
高效地进行 Web 组件化开发需要从多个方面入手,通过明确目标、合理规划、规范开发、加强测试等一系列措施,实现组件的高效管理和利用,从而提高项目的整体开发效率和质量,为用户提供更好的体验。
305 63
|
9月前
|
前端开发 安全 JavaScript
2025年,Web3开发学习路线全指南
本文提供了一条针对Dapp应用开发的学习路线,涵盖了Web3领域的重要技术栈,如区块链基础、以太坊技术、Solidity编程、智能合约开发及安全、web3.js和ethers.js库的使用、Truffle框架等。文章首先分析了国内区块链企业的技术需求,随后详细介绍了每个技术点的学习资源和方法,旨在帮助初学者系统地掌握Dapp开发所需的知识和技能。
2025年,Web3开发学习路线全指南

推荐镜像

更多