轻松的前端开发
背景
在我职业生涯的初期以及之后的几年里，我主要从事前端开发，具体来说，就是将 Photoshop 中创建的网站设计稿转换成 HTML 和 CSS 模板，偶尔也会借助 JavaScript（多亏了 jQuery！）。这些模板之后会被客户的后端程序员与一些内容管理系统 (CMS) 集成到网站上。尽管当时的技术、流程和应用场景都发生了翻天覆地的变化，但我们最终总是会回归到最基本的——纯文本*.html文件。
那时候，很多工作都是重复性的（或许只是我不知道更好的方法）：比如把设计中的通用元素复制粘贴到每个模板里，像页眉或页脚之类的。想象一下，有十几个不同的子页面——主页、文章、产品、购物车等等的模板，突然你发现自己忘了在页脚的某个地方添加网站logo。你不得不打开每个模板，把logo添加到相应的位置。当然，后来PHP帮我生成了模板，但我还是觉得有点麻烦。
现在，完成之后，我需要分享我的作品，让对方检查是否一切正常。这意味着要把所有文件打包成一个 ZIP 文件，通过电子邮件发送，然后等待回复。如果发现错误？设计师想要修改某些内容，哪怕只是很小的一部分？那就得重新来过。
在 FTP 时代，由于有免费主机可用，事情变得稍微容易一些，但由于设计不断变化，仍然非常容易出错且费力。
我现在在找什么？
不多：
- 共享模板的通用部分——无需再将相同内容复制粘贴到多个位置。
- 为设计师或客户提供一些更新后的预览图——以便他们能够立即对更改做出反应（或者在他们有时间的时候做出反应）。
- 一种简便的更新方式——无需再通过FTP进行复制粘贴。
- 更好的最终解决方案分发方式——ZIP 文件？真的吗？
- 更快捷的反馈处理——电子邮件或聊天沟通很容易变得混乱，人们很容易忽略重要信息。
- 留出一些空间用于文档记录——不仅是为了最终的后端实现者，也是为了未来的自己。
今天的各种可能性
正如我在文章开头所描述的那样，一切都在不断变化，但经过多次尝试和失败后，我目前的技术栈包括：
- Nunjucks - JavaScript 模板语言
- Gulp——处理重复性任务
- Browsersync——提供实时重新加载功能，在开发阶段非常有用。
- Bitbucket - 为您的文件提供（私有）存储。
- Netlify - 托管您的预览
修女
Nunjucks 作为一种模板语言，满足了我所有的需求。它支持变量、模板继承（非常适合定义全局布局）、宏（即自定义函数）、过滤器（用于修改输出）等等。它还允许你将模板的不同部分拆分到多个文件中，从而遵循 DRY（Don't Repeat Yourself，不要重复自己）原则。
{% extends "base.html" %}
{% block header %}
<h1>{{ title }}</h1>
{% endblock %}
{% block content %}
<ul>
{% for name, item in items %}
<li>{{ name }}: {{ item }}</li>
{% endfor %}
</ul>
{% endblock %}
问题来了——为什么不直接用那些静态网站生成器呢？或者用默认基于组件的 React？我觉得用它们来创建虚拟模板有点杀鸡用牛刀了。我得记住，我不知道谁会用我的作品，无论是最终输出还是源代码，所以我尽量让最终用户（无论是谁）都能轻松上手。最近我还接触到了嵌入式 JavaScript 模板，感觉也是个不错的选择。
Gulp 和 Browsersync
即使现在有了功能强大的 Webpack，广为人知的任务自动化管理工具 Gulp 在当今的 Web 开发中仍然占有一席之地。通过纯 JavaScript 函数配置的任务易于被广大用户理解。Browsersync 可以自动同步您的更改，使其同时反映在单个浏览器、多个浏览器甚至移动设备上，从而加快您的开发流程，节省大量时间。
以下是一个示例，展示了它的gulpfile.js外观。由于每个项目的设置都不尽相同，所以这里做了一些简化。
Bitbucket
Bitbucket 是一个 Git 代码管理工具，用于存储你的代码，你可以将其他人添加为贡献者，然后与他们共享代码。它提供无限数量的私有仓库，这非常棒。每个项目都有一个专属仓库，你可以将简单的文档保存在README.md文件中，或者使用嵌入式 Wiki 页面来提供更完善的帮助文档。
但真正有价值的是问题跟踪系统。您可以针对每个缺陷或新功能分别在特定的工单中发起讨论，并在完成后将其标记为已完成。您再也不会迷失在无数的邮件往来中。这非常强大。
Netlify
最后，Netlify 是一个静态托管服务。你无法在后端运行 PHP 或其他语言，但这没关系，因为我们只需要展示一些简单的 HTML 页面。它可以连接到你的 Bitbucket 代码仓库，并在每次代码更改（每次提交）时运行特定的任务。
你还记得咕噜声吗？
当您将所有内容连接起来后，Netlify 可以运行 gulp 任务来构建您用 Nunjucks（或任何其他模板语言）编写的模板，并将其免费托管在自定义子域名上，例如https://metropole-33b4eb.netlify.com/。而且，每当您向存储库推送源文件时，它都会执行此操作。
现在，您只需与客户共享一个域名，他/她就能随时查看您作品的最新版本。自动化功能非常强大。
概括
每个项目都不一样，所以我没有具体说明过程中可能会用到哪些 CSS 预处理器或 JavaScript 库。可能性可能数不胜数。我目前的配置（前面提到的 Nunjucks + Gulp + Browsersync + Bitbucket + Netlify）现在对我来说够用，但将来可能会有所改变。
请记住，并非每个人都习惯使用问题跟踪系统或 Gulp 任务/npm 脚本之类的工具。但教会您的客户或同事正确使用它们真的很有好处。这对双方都有益处。
文章来源：https://dev.to/rmnvsl/easy-frontend-development-8gh觉得有用吗？太好了！但我猜你可能有不同的方法。你的方法是什么呢？