西西木科技-专业的shopify liquid开发机构-前端JS丨a href=’https://dev.weswoo.com/’>react后端丨API接口丨shopify plus丨外贸独立站
一般来说，网页开发的流程大致是这样的：设计师（设计师不是艺术家，就像程序员不是编码员）提供设计稿，通常是图像格式。 然后前端开发（在ThoughtWorks我们称之为UI Dev）手动将图像转换为相应的HTML+CSS，这往往需要在各个浏览器中进行调试。
大多数时候，设计师会向开发提供色卡，或者至少是前景/背景/高亮颜色值。 如果没有，开发会使用一些工具，例如颜色选择器、标尺等来确保最终效果与设计稿一致。
如果你观察过UI Dev的工作流程，你会发现它基本上是这样的：使用编辑器（或IDE）编写HTML代码、CSS代码，保存修改，切换到浏览器窗口，按F5或Ctrl-刷新R，然后对比设计稿和实现。 如果发现不一致就切换到编辑器修改代码等等。
避免体力劳动
手动编辑 HTML/CSS 将非常耗时，特别是因为 HTML 是一种标记语言。 开发需要时刻注意关闭开放标签。 例如，对于标题元素网站开发流程，您需要：
这是页面标题
几乎从一开始网站开发流程；现代网页开发流程，人们就想到了各种方法来避免重复输入，比如 Vim 的 SuperTab 和 Snipmate 插件，可以通过输入标签名+Tab 的方式补全所有标签，或者用 DreamWaver 生成的代码的方式来简化这个过程。
Sublime 的编辑器上著名的插件 Emmet 可以帮助开发快速开发HTML/CSS。 这是一个小例子。 假设我们需要实现的页面如下所示：
那么对应的HTML结构可能是：
…
使用Emmet，你只需要给出
表达式，然后按Tab键完成以上结构：
ul>li*3>.feature>span.number+i+h4+p
上面的命令可以理解为：“创建一个UL，这个UL下有3个LI，每个LI下有一个具有类特征的DIV（如果不指定元素名，会默认生成一个div） .在每个DIV内，有一个类.number的SPAN，一个i元素，一个H4元素和一个P元素”
完整的技术请参考官方文档。
避免重复工作
上面提到的频繁的F5刷新可以通过LiveReload+Guard工具的组合来解决。 LiveReload是一个浏览器插件，通过协议与后端服务器进行通信。 当后台文件发生变化时，LiveReload会自动刷新页面。
Guard会使用操作系统的API来感知本地文件的变化。 当文件发生变化时网站开发流程，可以通知LiveReload进行刷新。 当然，Guard 还可以做其他事情，比如当 SCSS 发生变化时自动编译 CSS。
两者结合起来之后，我们可以节省很多时间，专注于事情本身的开发。
示例项目
我已经在 Github 上发布了一个示例项目。 这是一个开箱即用的项目，提供以下配置：
SCSS 编译环境（使用指南针） Guard 配置（修改 SCSS 文件或 HTML 文件后自动通知 LiveReload 刷新浏览器） 一个标准的 HTML5 模板文档 一个基本的 style.scss
Guardfile的配置中，如果index.html发生变化，或者stylesheets中的css文件发生变化，或者scripts目录下的js文件发生变化，都会触发livereload任务（通知浏览器）。
守卫 'livereload' do watch('index.html') watch(%r{stylesheets/.+.(css)}) watch(%r{scripts/.+.(js)}) end Guard :compass
你只需要简单地在本地克隆这个项目：
$ git克隆：abruzzi/design-boilerplate.git mydesign
然后在目录中执行bundle install：
$ cd mydesign $ 捆绑安装
这里有两个假设： 1.你已经安装了rvm 2.你已经使用rvm安装了某个版本的ruby，即bundler gem
开发流程
我通常启动两个终端，一个用于运行 Guard，另一个用于运行 HTTP Server，然后是一个浏览器：
在编辑器中编辑完成后，保存文件，浏览器会自动刷新。 这么快的反馈可以告诉我接下来如何修改：将背景颜色调整得更浅，或者将h2的字体变大。 ，或者图片和文字的上边缘不对齐等。
这个开发过程与后端开发执行TDD的方式非常相似：实时反馈和小步前进！ 如果你的办公桌上有两台显示器那就更好了。 您可以在一台显示器上显示设计稿，并在另一台显示器上分屏显示编辑器和浏览器，这样您就可以非常舒适地进行UI开发。 得到：
西西木科技是shopify官方合作伙伴，通过了Shopify Partner Academy认证，具备多年shopify lic主题开发经验，熟悉Liquid和各项计算机语言。