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";


相关文章
|
1月前
|
Web App开发 编解码 vr&ar
使用Web浏览器访问UE应用的最佳实践
在3D/XR应用开发中,尤其是基于UE(虚幻引擎)开发的高精度场景,传统终端因硬件局限难以流畅运行高帧率、复杂效果的三维应用。实时云渲染技术,将渲染任务转移至云端服务器,降低终端硬件要求,确保用户获得流畅体验。具备弹性扩展、优化传输协议、跨平台支持和安全性等优势,适用于多种终端和场景,特别集成像素流送技术,帮助UE开发者实现低代码上云操作,简化部署流程,保留UE引擎的强大开发能力,确保画面精美且终端轻量化。
使用Web浏览器访问UE应用的最佳实践
|
1月前
|
人工智能 前端开发 API
Gemini Coder:基于 Google Gemini API 的开源 Web 应用生成工具,支持实时编辑和预览
Gemini Coder 是一款基于 Google Gemini API 的 AI 应用生成工具,支持通过文本描述快速生成代码,并提供实时代码编辑和预览功能,简化开发流程。
143 38
Gemini Coder:基于 Google Gemini API 的开源 Web 应用生成工具,支持实时编辑和预览
|
2月前
|
前端开发 安全 JavaScript
2025年,Web3开发学习路线全指南
本文提供了一条针对Dapp应用开发的学习路线,涵盖了Web3领域的重要技术栈,如区块链基础、以太坊技术、Solidity编程、智能合约开发及安全、web3.js和ethers.js库的使用、Truffle框架等。文章首先分析了国内区块链企业的技术需求,随后详细介绍了每个技术点的学习资源和方法,旨在帮助初学者系统地掌握Dapp开发所需的知识和技能。
2025年,Web3开发学习路线全指南
|
3月前
|
监控 前端开发 JavaScript
使用 MERN 堆栈构建可扩展 Web 应用程序的最佳实践
使用 MERN 堆栈构建可扩展 Web 应用程序的最佳实践
59 6
|
3月前
|
存储 前端开发 JavaScript
如何在项目中高效地进行 Web 组件化开发
高效地进行 Web 组件化开发需要从多个方面入手,通过明确目标、合理规划、规范开发、加强测试等一系列措施,实现组件的高效管理和利用,从而提高项目的整体开发效率和质量,为用户提供更好的体验。
55 7
|
3月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
66 2
|
3月前
|
开发框架 搜索推荐 数据可视化
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
159 62
|
3月前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
88 1
|
3月前
|
XML 安全 PHP
PHP与SOAP Web服务开发:基础与进阶教程
本文介绍了PHP与SOAP Web服务的基础和进阶知识,涵盖SOAP的基本概念、PHP中的SoapServer和SoapClient类的使用方法,以及服务端和客户端的开发示例。此外,还探讨了安全性、性能优化等高级主题,帮助开发者掌握更高效的Web服务开发技巧。
|
3月前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
269 45

热门文章

最新文章