web开发入门_Web开发人员工作流程工具：入门指南
web开发入门
Here’s a primer for the tools all web developers should get to know, from basic Bash commands to web browser add-ons that will debug your web apps and automate navigation tests, plus continuous integrations pipelines.
这是所有Web开发人员都应了解的工具的入门指南，从基本的Bash命令到Web浏览器加载项，将调试您的Web应用程序并自动进行导航测试，以及持续的集成管道。
Keep in mind this article is intended to cover the tools that the largest number of web developers will share a need to learn, not a comprehensive listing. So don’t get too mad if your favorite tool isn’t here! (For example, I intentionally left out WYSIWYG website builders .)
请记住，本文旨在涵盖最多的Web开发人员将共享学习需求的工具，而不是完整的清单。 因此，如果您最喜欢的工具不在这里，请不要生气！ (例如，我故意省略了所见即所得的 网站建设者 。)
命令行 (Command Line)
The command line is an interface that allows you to interact with the operating system through a console, and it can go a very long way to facilitate and even automate tedious and routine tasks.
该命令行是一个接口，使您可以通过一个控制台与操作系统互动，同时也可以走很远的路，方便，甚至繁琐的自动化和日常任务。
You shouldn’t be afraid of getting your hands dirty with the console. The time you’ll spend learning some basic scripting will most definitely pay off.
您不必担心会弄脏控制台。 您花时间学习一些基本的脚本肯定会有所收获。
Bash工具(Linux，macOS) (Bash Tools (Linux, macOS))
Bash is the most popular shell for the “Unix-like” operating systems such as Linux and macOS.
Bash是诸如Linux和macOS之类的“ 类Unix ”操作系统的最流行外壳。
Your mastery — or at the very minimum, a basic knowledge — of the Bash shell can save you a lot of time. Things like locating and renaming files, finding and replacing text strings, can literally take just a few seconds with commands like locate and grep with sed, respectively.
您对Bash shell的掌握-或至少是对基础知识的了解，可以节省大量时间。 像定位和重命名文件，查找和替换文本字符串的东西，可以从字面上只需几秒钟，就像命令locate和grep与sed分别。
Become proficient in Bash by reading the Bash Quick Start Guide.
阅读《 Bash快速入门指南》，精通Bash。
PowerShell(Windows) (PowerShell (Windows))
PowerShell is the “bash-like” task automation and configuration management framework from Microsoft. It comes with a command-line similar to that of the [Command Prompt](https://en.wikipedia.org/wiki/Cmd.exe (CMD)), but it also includes modules and a proper scripting language. But keep in mind that scripting is PowerShell in nothing like scripting in Bash. Except for a few exceptions, the commands have entirely different names, meaning that you’ll need to learn these separately.
PowerShell是Microsoft的“类似bash”的任务自动化和配置管理框架。 它带有与[Command Prompt](https://en.wikipedia.org/wiki/Cmd.exe(CMD))类似的命令行，但是它还包含模块和适当的脚本语言 。 但是，请记住， 脚本是在PowerShell中 没有像Bash中的脚本。 除了少数例外，命令的名称完全不同，这意味着您需要分别学习这些名称。
PowerShell 7 (under development) is intended as a successor to PowerShell Core 6, which was introduced as a successor to PowerShell 5. Who knows, folks at Microsoft might figure the naming thing out by version 8 or 9. ♂️
PowerShell 7(正在开发中)旨在作为PowerShell Core 6的继任者， PowerShell Core 6是作为PowerShell 5的继任者引入的。
Cygwin(也是Windows) (Cygwin (also Windows))
You missed the Bash on Windows? Miss it no more! For those of you used to the power of the Bash shell but working regularly on a Windows environment, there’s an alternative.
您错过了Windows上的Bash吗？ 不再错过！ 对于那些习惯使用Bash shell功能但在Windows环境中正常工作的人来说，还有另一种选择。
Cygwin is a POSIX-compatible environment that runs natively on Microsoft Windows, where the installation directory behaves like the root and follows a similar directory layout to that found in Unix-like systems.
Cygwin是与POSIX兼容的环境，可在Microsoft Windows上本地运行，安装目录的行为类似于根目录，并遵循与类似Unix的系统相似的目录布局。
代码编辑器 (Code Editors)
You almost certainly know what a source-code editor is, but you might not know about some of their power features, such git integration.
您几乎可以肯定知道什么是源代码编辑器 ，但是您可能不知道它们的某些强大功能 (如git集成)。
There are integrated development environments (IDEs) such as NetBeans and Eclipse — but they’re bloated with features we mostly won’t care about anyway.
有诸如NetBeans和Eclipse之类的集成开发环境 (IDE)，但是它们充斥着我们通常不会在意的功能。
As web developers, we’re more inclined towards cross-platform tools. Let’s take a look at a few of them.
作为Web开发人员，我们更倾向于跨平台工具 。 让我们看看其中的一些。
原子 (Atom)
Not surprisingly, as it’s developed by GitHub, Atom has the finest embedded Git control of any text editor, specifically aimed for GitHub repositories.
毫不奇怪，由于它是由GitHub开发的，因此Atom具有所有文本编辑器中最好的嵌入式Git控件，专门针对GitHub存储库。
But that’s not all. The “hackable text editor for the 21st Century” is incredibly easy to customize (see the docs), and a rich packages and themes ecosystem has flourished around it. Be sure to check out the blog and discussion forums to see what’s been cooking, as there are plenty of regular updates.
但这还不是全部。 “ 21世纪可破解的文本编辑器”非常易于定制(请参阅docs )，并且围绕着它的内容丰富的程序包和主题生态系统蓬勃发展。 由于有大量的定期更新，因此请务必查看博客和讨论论坛以查看正在做什么。
崇高文字 (Sublime Text)
Sublime Text is the oldest product in this list (it’s been around since 2008), and the only one that’s not free. It’s still very popular, and was the first editor to introduce many of the features we considered a given today in any decent code editor, such as “goto anything”, “goto definition”, and “multiple selections”, among others.
Sublime Text是该列表中最古老的产品(自2008年以来一直存在)，并且是唯一一个免费的产品。 它仍然很受欢迎，并且是第一个在当今任何体面的代码编辑器中引入我们今天认为已经赋予的许多功能的编辑器，例如“ goto any”，“ goto definition”和“ multiple selections”等。
It also has a companion Git client with a very sleek interface, Sublime Merge, introduced in 2018.
它还具有一个具有非常流畅界面的伴侣Git客户端Sublime Merge ，于2018年推出。
Visual Studio程式码 (Visual Studio Code)
Visual Studio Code (not to be confused with Visual Studio is another very popular code editor right now, which includes power features such as:
Visual Studio Code (不要与Visual Studio混淆)是目前另一个非常流行的代码编辑器，它包括一些强大的功能，例如：
IntelliSense, which provides smart completions based on variable types, function definitions, and imported modules.
IntelliSense ，它基于变量类型，函数定义和导入的模块提供智能完成。
Inline debugging to analyze coding issues right from within the editor.
内联调试可直接在编辑器中分析编码问题。
Version control with Git commands built-in (learn how to use version control).
使用Git 版本控制命令的内置(了解如何使用版本控制 )。
Extensions and customization which run in separate processes, ensuring they won’t slow down the editor (learn more about extensions).
扩展和自定义在单独的过程中运行，以确保它们不会减慢编辑器的速度(了解有关扩展的更多信息 )。
Cloud integration with Microsoft Azure to deploy and host sites, store and query relational and document based data, and scale with serverless computing.
与Microsoft Azure进行云集成 ，以部署和托管站点，存储和查询基于关系和文档的数据，并通过无服务器计算进行扩展。
Read our Visual Studio Code power user’s guide to become a VS Code pro, and dive even deeper with the book Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers.
阅读我们的Visual Studio Code高级用户指南以成为VS Code专业人士，并进一步深入阅读《 Visual Studio Code：面向Web开发人员的端到端编辑和调试工具》一书 。
亚军 (The Runners Up)
Although not so popular, Brackets is worth mentioning, as it’s primarily focused on web development, with a very interesting feature called Live Preview, which gives real-time connection to your browser to instantly visualize changes to CSS and HTML on screen.
虽然没有那么流行，但Brackets值得一提，因为它主要专注于Web开发，它具有一个非常有趣的功能，称为Live Preview，该功能可以实时连接到您的浏览器，以在屏幕上立即可视化CSS和HTML的更改 。
Notepad++ is a drop-in replacement for Windows Notepad, very minimalist and lacking some power features we mentioned such as Git integration, but it’s still a powerful, lightweight application to edit code.
Notepad ++是Windows Notepad的直接替代品，它非常简约，缺少我们提到的一些强大功能，例如Git集成，但它仍然是功能强大，轻巧的应用程序，用于编辑代码。
基于命令行 (Command Line–Based)
As for commaind line–based editors, you’ve got Emacs and Vim … and endless flame wars about which one is better!
对于基于行的通用编辑器，您已经有了Emacs和Vim …… 无休止的烈火大战，其中哪一个更好 ！
浏览器工具-调试，调试，调试 (Browser Tools — Debugging, Debugging, Debugging)
The web development tools shipped by some browsers aren’t quite website builders or IDEs, as they neither assist in the direct creation of a web page nor are a replacement for a code editor. Rather, they help to test the user interface (UI) of the project you’re working on.
某些浏览器附带的Web开发工具并不是完全的网站构建器或IDE，因为它们既无助于直接创建网页，也无助于代码编辑器。 相反，它们有助于测试您正在处理的项目的用户界面 (UI)。
Back in the day, you’d need a number of extensions to make for a decent debugging environment, but nowadays most browsers have great built-in tools to help web developers.
过去，您需要大量扩展才能实现像样的调试环境，但是如今，大多数浏览器都具有强大的内置工具来帮助Web开发人员。
Some tools you can expect to find:
您可以期望找到一些工具：
A DOM inspector to edit HTML and CSS code directly on the document object model (DOM), view event listeners, and set DOM mutation breakpoints.
DOM检查器 ，可直接在文档对象模型 (DOM)上编辑HTML和CSS代码，查看事件侦听器并设置DOM突变断点 。
A console to view and filter log messages, inspect JavaScript objects and DOM nodes, and run JavaScript code in the context of the active window or frame.
一个控制台，用于查看和过滤日志消息，检查JavaScript对象和DOM节点 ，以及在活动窗口或框架的上下文中运行JavaScript代码。
A debugger to control the execution flow stepping through code, and set watches and breakpoints.
调试器控制逐步执行代码的执行流程，并设置监视和断点。
A network monitor to inspect requests and responses from the network and browser cache, including asynchronous XMLHttpRequest (XHR) — all of which can be very useful to identify bottlenecks.
一个网络监视器，用于检查来自网络和浏览器缓存的请求和响应，包括异步XMLHttpRequest (XHR)，所有这些对于识别瓶颈都非常有用。
An accessibility inspector to access the page’s accessibility (a11y) tree, allowing you to check what’s missing or otherwise what needs attention to make your site available to as many people as possible.
一个可访问性检查器，用于访问页面的可访问性(a11y)树，使您可以检查缺少的内容或需要注意的内容，以使您的网站对尽可能多的人可用。
Performance measurement to profile execution time and system resources required by the site and walk JavaScript call stacks.
性能度量，用于分析站点和漫游JavaScript调用堆栈所需的执行时间和系统资源。
Memory measurement to track memory consumption and compare heap snapshots at different stages of the code execution.
内存测量可跟踪内存消耗并比较代码执行不同阶段的堆快照 。
A storage manager to handle cached data, cookies, web storage, and even IndexedDB structured data.
存储管理器，用于处理缓存的数据，cookie， Web存储 ，甚至是IndexedDB结构化数据。
A service worker manager to handle and debug service workers with updates, unregisters, and start/stop of individual workers.
服务工作者管理器 ，用于通过更新，注销和单个工作者的启动/停止来处理和调试服务工作者。
An emulator to test for different screen resolutions, and even different location coordinates.
一个模拟器，用于测试不同的屏幕分辨率，甚至不同的位置坐标。
Chrome DevTools (Chrome DevTools)
Google Chrome comes with a comprehensive and incredibly well-documented set called DevTools.
Google Chrome浏览器随附了称为DevTools的全面且功能齐全的文档集。
In fact, it’s a good idea to visit Google’s Tools for Web Developers, as you’ll find plenty of useful resources.
实际上，访问Google的Web开发人员工具是一个好主意，因为您会发现大量有用的资源。
Firefox开发人员工具 (Firefox Developer Tools)
Firefox first introduced the DOM inspector in version 3, and ever since then its Developer Tools are a state-of-the-art set that comes with extra goodies such as Eyedropper, taking screenshots, and rulers, to name a few.
Firefox在版本3中首次引入了DOM检查器 ，从那时起， 它的开发人员工具集就成为了最先进的工具集，并附带了其他一些好东西，例如Eyedropper ， 截图和标尺 ，仅举几例。
Likewise, the Mozilla Developer Network (MDN) is a mandatory resource for web developers.
同样， Mozilla开发人员网络 (MDN)是Web开发人员的必备资源。
Safari开发人员工具 (Safari Developer Tools)
Because of its lack of features and poor support to web developers, Apple Safari is a pain to work with, and, like Internet Explorer back in the day, it would be nice not to have to deal with it. But you just have to.
由于缺乏功能以及对Web开发人员的支持不佳， Apple Safari很难使用，并且像当初的Internet Explorer一样，不用处理它也很好。 但是你只需要。
It does ship Web Development Tools that aren’t nearly as comprehensive as the aforementioned ones, and all the documentation you’ll get is what someone may have written over a lunch break. (Yes, that’s all there is.)
它提供的Web开发工具确实不如上述工具那么全面，并且您将获得的所有文档都是某人在午休时间写的。 (是的，仅此而已。)
其他 (Others)
Even Microsoft Edge, the successor of infamous Internet Explorer, has a decent set of Developer Tools!
甚至臭名昭著的Internet Explorer的继任者Microsoft Edge也拥有一套不错的开发人员工具 ！
And if you fancy good old Opera, check this Stack Exchange answer to see how you open its developer tools.
如果您喜欢老式的Opera ，请查看此Stack Exchange答案，以了解如何打开其开发人员工具。
Learn the Chrome and Firefox DevTools with Browser Devtool Secrets.
了解带有浏览器Devtool秘密的Chrome和Firefox DevTools。
JavaScript工具 (JavaScript Tools)
Since the arrival of Node.js (the runtime environment that executes JavaScript code outside the web browser), JavaScript has been used not only to enhance user interfaces but to write command-line tools and for server-side scripting programs, effectively establishing the “JavaScript everywhere” paradigm.
自从Node.js (在网络浏览器外部执行JavaScript代码的运行时环境)问世以来，JavaScript不仅用于增强用户界面，还用于编写命令行工具和服务器端脚本程序，从而有效地建立了“ JavaScript无处不在”范例。
Consequently a whole ecosystem has emerged around it, and here are some tools you need to know.
因此，围绕它出现了整个生态系统，这是您需要了解的一些工具。
npm (npm)
The Node package manager (npm) claims to be “the world’s largest software registry”, and it’s an essential tool as it is the main way to distribute JavaScript code these days.
Node软件包管理器 (npm)声称是“世界上最大的软件注册中心”，并且是必不可少的工具，因为它是当今分发JavaScript代码的主要方式 。
As listed on its website, you can use npm to:
如其网站上列出的，您可以使用npm进行以下操作：
- Adapt packages of code for your apps, or incorporate packages as they are. 为您的应用调整代码包，或按原样合并程序包。
- Download standalone tools you can use right away. 下载您可以立即使用的独立工具。
Run packages without downloading using npx.
运行软件包而不使用npx下载。
- Share code with any npm user, anywhere. 随时随地与任何npm用户共享代码。
- Restrict code to specific developers. 将代码限制为特定的开发人员。
- Create Orgs (organizations) to coordinate package maintenance, coding, and developers. 创建组织(组织)来协调软件包的维护，编码和开发人员。
- Form virtual teams by using Orgs. 通过使用组织来组建虚拟团队。
- Manage multiple versions of code and code dependencies. 管理多个版本的代码和代码依赖性。
- Update applications easily when underlying code is updated. 基础代码更新时，可以轻松更新应用程序。
- Discover multiple ways to solve the same puzzle. 发现解决同一难题的多种方法。
- Find other developers who are working on similar problems and projects. 查找正在从事类似问题和项目的其他开发人员。
There are essentially three components to npm:
npm本质上包含三个组件：
The website, to discover packages and set up profiles.
该网站可发现软件包并设置配置文件。
The CLI, which runs through a terminal.
CLI ，它通过终端运行。
The registry, which hosts the public database of the JavaScript software.
注册表 ，托管JavaScript软件的公共数据库。
For more information, read A Beginner’s Guide to npm, the Node Package Manager.
有关更多信息，请阅读Node Package Manager的npm入门指南 。
网络包 (webpack)
webpack is yet another level of packaging software, collecting all of an app’s front-end assets like HTML, CSS, and images into static assets, also called “bundles”. These bundles can then be used to produce code on demand via code spitting. (Read Reduce JavaScript Payloads with Code Splitting to see what that means.)
webpack是另一种打包软件， 它将应用程序的所有前端资产(如HTML，CSS和图像)收集到静态资产(也称为“捆绑包”)中。 然后，这些捆绑包可用于通过代码拆分 来按需生成代码 。 (请参阅通过代码拆分减少JavaScript有效负载以了解其含义。)
You can use webpack to:
您可以使用webpack进行以下操作：
Bundle ES Modules, CommonJS, and AMD modules (even combined).
捆绑ES模块 ， CommonJS和AMD模块(甚至合并)。
- Create a single bundle or multiple chunks that are asynchronously loaded at runtime (to reduce initial loading time). 创建在运行时异步加载的单个捆绑包或多个块(以减少初始加载时间)。
- Resolve dependencies during compilation, reducing the runtime size. 在编译期间解决依赖关系，从而减少了运行时大小。
Process files with Loaders while compiling (e.g. TypeScript to JavaScript, Handlebars strings to compiled functions, images to Base64, etc.).
在编译时使用Loader处理文件(例如，将TypeScript转换为JavaScript，将Handlebars字符串转换为已编译函数，将图像转换为Base64，等等)。
Do whatever else your application requires with a highly modular plugin system.
使用高度模块化的插件系统，可以执行应用程序需要执行的其他任何操作。
Check out the A Beginner’s Guide to Webpack guide for a primer.
查阅Webpack初学者指南入门。
聚合物和卷筒纸组件 (Polymer and Web Components)
When first introduced in 2011, Web Components were thought to be the next big thing for the Web. And while there has been some development around it, its adoption has been at lot slower than anticipated. However, the possibility of creating new HTML elements and encapsulating them, so that they can be used later and distributed across different sites to prevent rewriting of functionality, is still quite legit.
当Web组件于2011年首次引入时，它被认为是Web的下一件大事。 尽管围绕它进行了一些开发，但其采用却比预期的要慢得多。 但是，创建新HTML元素并将其封装起来以便以后可以使用它们并分布在不同站点以防止功能重写的可能性仍然是合法的。
Developed by Google, Polymer is a library for building web apps using Web Components, and it has quite some adherents within the corporate scope, such as Google itself, Netflix, Electronic Arts, and IBM. Additionally, Google implemented many of its Material Design principles into Polymer, which makes it a very attractive tool to implement well-crafted sites.
Polymer由Google开发，是一个使用Web Components构建Web应用程序的库，并且在公司范围内拥有相当多的支持者，例如Google本身，Netflix，Electronic Arts和IBM。 此外，Google将许多材料设计原则实施到Polymer中，这使其成为实施精心制作的网站的极具吸引力的工具。
Find it out more about Polymer and Web Components on:
在以下网站上找到有关Polymer和Web组件的更多信息：
the Polymer blog
聚合物博客
WebComponents.org
WebComponents.org
the Open Web Component site
Open Web Component网站
Slim.js
Slim.js
Smart HTML Elements
智能HTML元素
代码管理 (Code Management)
A distributed version, revision or source control system (DVCS) is a way of managing codebases via software commits. In other words, it’s a standard to keep track of software development changes in a neat, secure, and effective way. (See “Commit Changes to Your Codebase the Right Way”.)
分布式版本，修订或源代码控制系统 (DVCS)是一种通过软件提交管理代码库的方法。 换句话说，这是一种以整洁，安全和有效的方式跟踪软件开发更改的标准。 (请参阅“ 以正确的方式对您的代码库进行更改 ”。)
There’s a number of version control systems, such as BitKeeper, Subversion, Mercurial (my personal fav), Azure DevOps (new kid in town). But only one is king …
有许多版本控制系统，例如BitKeeper ， Subversion ， Mercurial (我个人最喜欢)， Azure DevOps (小镇上的新手)。 但是只有一位是国王……
吉特 (Git)
Created by Linus Torvalds (also creator of Linux), Git quickly became the de facto standard for DVCS (partly thanks to GitHub as well). It’s truly distributed, as every Git directory on every computer or node is a full-fledged repository, with the entire history and full version-tracking abilities, independent of whichever node is considered a central server.
由Linus Torvalds(也是Linux的创建者)创建的GitSwift成为DVCS的事实上的标准(也要感谢GitHub)。 它是真正的分布式，为每台计算机或节点上的每个目录的Git是一个完整的信息库，与整个历史和完整版的跟踪能力，独立取其节点被认为是一个中央服务器。
There are a number of concepts you’ll need to become familiar with before you fully grasp DVCS in general and Git in particular, such as branching and merging, distributions, pulls … but you’ll see that the basics (what you’ll use most of the time) are easy to learn.
在全面掌握DVCS尤其是Git之前，您需要熟悉许多概念，例如分支和合并 ， 分发 ， 拉取 …，但是您会发现基础知识(将使用的内容)大部分时间)都很容易学习。
You can build a solid understanding of Git in less than a weekend with Jump Start Git.
通过Jump Start Git，您可以在不到一个周末的时间内对Git进行深入的了解。
其他工具 (Other Tools)
Selenium (Selenium)
Automating browser tests is really important, and Selenium has not only mastered browser testing but even taken it to another level.
自动化浏览器测试非常重要， Selenium不仅掌握了浏览器测试，甚至将其提升到另一个层次。
Selenium WebDriver drives a browser natively, as a real user would, either locally or on remote machines.
Selenium WebDriver像本地用户一样在本地或远程计算机上本地驱动浏览器。
Selenium IDE is a Chrome and Firefox extension that makes it easy to record and playback tests in the browser.
Selenium IDE是Chrome和Firefox的扩展程序，可轻松在浏览器中记录和回放测试。
Selenium Grid takes WebDriver to another level by running tests on many machines at the same time, cutting down on the time it takes to test on multiple browsers and operating systems.
Selenium Grid通过同时在多台计算机上运行测试，将WebDriver提升到另一个层次，从而减少了在多个浏览器和操作系统上进行测试所需的时间。
Learn how to perform end-to-end testing with Selenium on a Python app.
了解如何在Python应用程序上使用Selenium执行端到端测试 。
There’s also Puppeteer, a Node.js library by Google which provides an API to control headless Chrome or Chromium over the DevTools Protocol. Quite frankly though, Selenium is way more of an advanced tool — or really, an ecosystem — than Puppeteer, which you can also use to talk to the Chrome DevTools Protocol (see Chrome DevTools and Selenium 4).
还有Puppeteer ，这是Google的Node.js库，它提供了一个API，可通过DevTools协议控制无头 Chrome或Chromium。 坦率地说，虽然，Selenium的方法更多的先进工具-或者说真的， 一个生态系统 -不是木偶，您还可以使用交谈到Chrome DevTools协议(见的Chrome DevTools和Selenium4 )。
Docker和软件容器 (Docker and Software Containers)
We can’t really explain much of Docker here and do justice to it, but one thing’s for sure: software containers can dramatically improve your delivery and deployment workflow.
我们在这里不能真正解释很多Docker并做到合理，但是有一点可以肯定：软件容器可以极大地改善您的交付和部署工作流程。
To gain an in-depth understanding of it, read Learning Docker – Second Edition.
要深入了解它，请阅读Learning Docker – Second Edition 。
CI / CD管道 (CI/CD pipelines)
Continuous integration (CI) is intertwined with continuous delivery (CD) in a so-called CI/CD pipeline for continuous deployment. But what does all of that mean?
连续集成 (CI)与连续交付 (CD)在所谓的CI / CD管道中交织在一起，以实现连续部署 。 但是，这一切意味着什么？
From Wikipedia, and in a nutshell:
简而言之，来自Wikipedia：
CI makes sure the software checked in on the mainline is always in a state that can be deployed to users.
CI确保在主线上签入的软件始终处于可以部署给用户的状态。
CD makes the deployment process fully automated.
CD使部署过程完全自动化。
In other words, continuous delivery is a practice (not a technology) that streamlines software development smoothly, with automated tests and deployments to the cloud, very much in tune with the DevOps culture.
换句话说，持续交付是一种实践(而非技术)，可以通过自动测试和部署到云中来顺畅地简化软件开发，这非常符合DevOps的文化。
All of the deployment processes can be fully automated, from checking workflow bugs with Selenium, to compiling and building software, pulling the latest checked version from GitHub, or patching the database, and even restarting caches. Whatever needs to be done, you just put in the pipeline.
从使用Selenium检查工作流错误，到编译和构建软件，从GitHub提取最新的检查版本，或修补数据库，甚至重新启动缓存，所有部署过程都可以实现全自动。 无论需要做什么，您都可以将其放入管道。
For more info about DevOps, check out SitePoint’s “DevOps by Example” article.
有关DevOps的更多信息，请查看SitePoint的“ 示例DevOps ”文章。
亚搏体育app CI / CD (GitLab CI/CD)
GitLab is a service similar to GitHub. But unlike GitHub, which hosts Git repositories and offers some DevOps tools, GitLab is essentially a DevOps life cycle tool (and the best one on the market, according to a Forrester report) that also hosts Git repositories. That said, there is hardly any GitHub feature that is missing in GitLab (the opposite is more true).
GitLab是类似于GitHub的服务。 但不同于GitHub上，该主机Git仓库并提供了一些工具的DevOps，GitLab本质上是一个DevOps的生命周期工具(和市场上最好的之一，根据Forrester的报告 )， 同时还拥有Git仓库。 就是说，GitLab几乎没有缺少任何GitHub功能(相反的情况更是如此)。
The service is based on a consumption-based model of build minutes used:
该服务基于所使用的构建时间的基于消耗的模型：
| Plan | Build minutes | User / Month |
|---|---|---|
| Free | 2,000 | $0 |
| Bronze | 2,000 | $9 |
| Silver | 10,000 | $19 |
| Gold | 50,000 | $99 |
| 计划 | 建立时间 | 用户/月 |
|---|---|---|
| 自由 | 2,000 | $ 0 |
| 青铜 | 2,000 | $ 9 |
| 银 | 10,000 | $ 19 |
| 金 | 50,000 | $ 99 |
With focus on complex toolchains, speed and security, we can’t really cover here all of GitLab CI/CD features, but check out these resources:
着眼于复杂的工具链 ， 速度和安全性 ，我们不能真正在这里介绍GitLab CI / CD的所有功能，但请查看以下资源：
GitLab Continuous Integration (CI) & Continuous Delivery (CD)
GitLab持续集成(CI)和持续交付(CD)
GitLab CI/CD
亚搏体育app CI / CD
Creating and using CI/CD pipelines
创建和使用CI / CD管道
GitHub动作 (GitHub Actions)
GitHub, the leading hosting provider for software projects using Git, seems to come a little late to the party with its CI/CD solution called GitHub Actions, which introduced CI/CD support for public repositories last August (something competitors had been doing for years now).
GitHub是使用Git进行软件项目的领先托管服务提供商，其名为GitHub Actions的 CI / CD解决方案似乎晚了一点，该解决方案于去年8月推出了对公共存储库的CI / CD支持 (竞争对手已经做了很多年了)现在)。
In any case, the service is production ready with quite a large actions list that you can start integrating into your pipelines.
无论如何，该服务已准备好投入生产，并且具有相当大的操作列表 ，您可以开始将其集成到管道中。
| Plan | Build minutes | Month |
|---|---|---|
| Free | 2,000 | $0 |
| Pro | 3,000 | $7 |
| Team | 10,000 | $9/user |
| Enterprise | 50,000 | contact sales |
| 计划 | 建立时间 | 月 |
|---|---|---|
| 自由 | 2,000 | $ 0 |
| 专业版 | 3,000 | 七块钱 |
| 球队 | 10,000 | 每位用户$ 9 |
| 企业 | 50,000 | 联系销售 |
The building minutes seem very generous, but there are some restrictions on concurrency which might negatively affect the total running time, so be sure to check the usage limits.
建置分钟看起来非常慷慨，但是对并发性有一些限制，可能会对总运行时间产生负面影响，因此请务必检查使用限制 。
More info:
更多信息：
GitHub Actions Documentation
GitHub动作文档
Starter Workflows
入门工作流程
GitHub Marketplace: Actions
GitHub Marketplace：操作
位桶管道 (Bitbucket Pipelines)
Bitbucket Pipelines & Deployments works as a breeze with Jira (a very popular tool among agile development teams) and Bitbucket. Not surprisingly, as they’re all creations of Atlassian, just like Trello.
Bitbucket Pipelines＆Deployments与Jira (在敏捷开发团队中非常流行的工具)和Bitbucket一起轻而易举地工作。 毫不奇怪，因为它们都是Trello一样的Atlassian创作。
While Bitbucket Pipelines seems to offer significantly less minutes, keep in mind that there are no extra charges for concurrency:
虽然Bitbucket Pipelines似乎提供的通话时间明显减少，但请记住，并发没有额外的费用：
| Plan | Build minutes | User / Month |
|---|---|---|
| Free | 50 | $0 |
| Standard | 2,500 | $3 |
| Premium | 3,500 | $6 |
| 计划 | 建立时间 | 用户/月 |
|---|---|---|
| 自由 | 50 | $ 0 |
| 标准 | 2,500 | 三块 |
| 保费 | 3,500 | $ 6 |
More info:
更多信息：
An introduction to Bitbucket Pipelines
Bitbucket管道介绍
Everything you need to know about build minutes in Bitbucket Pipelines
您需要了解有关Bitbucket Pipelines中的构建分钟的所有信息
You can learn how to set up each of these CI systems for an example Python web app using this guide.
您可以使用本指南学习如何为示例Python Web应用程序设置每个CI系统。
结语 (Wrapup)
As long as this one article was, many tools were left out — some consciously and some because I admittedly don’t even know about them!
只要写了这篇文章，就遗漏了许多工具-有些是有意识的，有些是因为我承认甚至都不知道它们！
Web development is getting more integrated with other disciplines like mobile and desktop software development, with new tools, approaches and dev practices arriving all the time. Don’t get me wrong, I’m not complaining about it. I celebrate it, as it’s all for the better. But it sure expands the possible pathways in crazy ways, and you can only expect that it will get even more competitive in the future.
Web开发与移动和桌面软件开发等其他学科的集成度越来越高，新工具，新方法和开发实践不断出现。 不要误会我的意思，我不是在抱怨它。 我庆祝它，因为一切都变得更好。 但是它肯定会以疯狂的方式扩展可能的途径，并且您只能期望它将来会变得更具竞争力。
As I usually say: if you want to stay valuable, stay curious!
正如我通常所说的：如果您想保持宝贵的价值，请保持好奇心 ！
翻译自: https://www.sitepoint.com/web-developer-workflow-tools/
web开发入门