上海做网站：现代前端开发人员工作流程的工具_极简慕枫

前端Web开发人员负有很大的责任来制作在所有Web浏览器中正常运行的像素完美布局。随着时间的推移，使用更高级的浏览器和更强大的开发工具变得更容易。

虽然每个人都知道HTML和CSS，但是很少有人知道Sass和Haml。前端开发每年都在不断发展，开发人员的角色是保持这些变化。

如果您对前端技能感到有些不稳定，或者只是想要了解一些新技术，那么本指南适合您。我将介绍一些每个前端开发人员应该使用或至少知道的流行工具和资源。

CSS预处理器

也许最着名的CSS预处理器是Sass，紧随其后的是Less。这些都是解析自定义CSS语法以创建更多动态和模块化代码的代码库。

术语“Sass”指的是技术和语法。Sass文件也可以是SCSS文件。使用不同的语法，Less是同样的事情。

Sass和Less本身不是语言，但更像是CSS的扩展。Sass / Less代码将编译为纯CSS。

除了语法之外，Sass和Less之间的最大区别在于它们的运作方式。Sass在Ruby上运行，而Less在JavaScript上运行（或使用Node.js）。

请注意，CSS预处理确实需要了解Terminal / CLI命令。您不需要成为专家，但您需要在命令行中轻松工作。例如，编译Sass文件的最快方法是在终端中运行这样的东西：

sass input.scss output.css

但是一旦你进行了一些练习，它就变成了第二天性。

Git版本控制

项目管理和版本控制对于大型Web项目来说绝对必不可少。像GitHub这样的社区已经使“Git”成为众所周知的技术。

但它是如何工作的，你为什么要关心？

Git是一个版本控制系统，允许开发人员编写代码而不会覆盖以前的工作。这可以通过分支来实现项目的各种快照可以像存档一样保存。使用Git，可以分支当前项目，尝试添加新功能，然后根据需要保存或删除该分支（如果不起作用）。

该Git的安装是所有操作系统的超级容易。由于您需要学习提交，分支和结帐等新术语，因此学习曲线更加详细。

但是通过介绍性指南和大量练习，Git将逐渐深入到您的前端工作流程中。

最大的障碍之一就是记住如何通过命令行使用Git。这是大多数已经每天使用CLI的程序员的首选方法。但是，如果您有点紧张，请尝试使用Git GUI应用程序。官方GitHub应用程序等免费选项提供了一种简单的方式来开始学习Git。

我对学习Git的建议就是慢慢来。如果版本控制是一个完全陌生的概念，那么很容易让人气馁 - 所以按照自己的节奏学习，不要放弃！

JavaScript库

毫无疑问，前端开发已经全面支持JavaScript。从动态页面元素到自定义动画，JavaScript是每个Web项目的重要工具。

但最近似乎越来越多的开发人员开始使用JavaScript库来支持通用的JS脚本。这很好，因为库抽象了难以理解的概念，这些概念可以使用Ajax等技术更容易构建。缺点是有这么多不同的库，很难知道从哪里开始。

一个好的经验法则是在您需要时只学习您需要的东西。除非你是一个喜欢编写代码以获得乐趣的人，否则最好只成为少数几个库的大师。jQuery可能是最好的起点，因为它很容易成为最常用的五大JavaScript库之一。

但考虑更多高级工具，如Backbone.js或Angular.js。两者都是用于构建基于JS的Web应用程序的开源库。这些功能非常强大，但在简单的WordPress博客上可能没什么用处。

寻求挑战的开发人员可能会考虑学习一种JS预处理语言，如CoffeeScript，TypeScript或LiveScript。所有三种语言都编译成JavaScript，但提供原始语法的变体。

JavaScript的真正力量现在才被发现。使用Node.js等工具，可以设置在JavaScript基础上运行的整个服务器。更不用说原始JavaScript可以在浏览器的控制台窗口中执行，为前端开发人员提供更多功能。

无论您是初学者还是经验丰富的开发人员，如果您对Web开发充满热情，那么使用JavaScript总会有更多需要学习的地方。

HTML预处理器

CSS预处理的普及催生了前端HTML预处理。这就像Sass / Less一样，您可以编写变体语法并编译以获取原始HTML代码。

HTML预处理可以避免输入像结束标记这样的重复语法。虽然这显然是有利可图的，但它确实需要一些调整。

Haml和Jade是两种最流行的选择，具有非常不同的语法风格。Slim是第三种选择，它为您提供了三个可供选择的大竞争者。这三者都是开源的，并且在社区支持下不断增长，所以你真的不会出错。

Haml和Slim都在Ruby上运行，而Haml是ERB模板的替代品。虽然Haml是Rails开发人员的一个很好的工具，但无论你是否回写最终代码，它对前端开发人员都同样有用。

Jade是一个在Node.js上运行的模板引擎。同样，它可以严格用于Node应用程序，也可以用作喜欢Jade语法的前端开发人员的独立解决方案。

没有正确或错误的答案，因为它们都具有非常相似的特征。Ruby爱好者的普遍共识是坚持使用Haml。但是许多前端开发人员一直在涌向Jade，因为Node.js已成为Web开发的热门趋势。

说实话，很少有开发人员发现HTML预处理对他们的工作流程来说是必不可少的。但值得了解做出自己决定的可能性。您可能更喜欢编写静态HTML，但有些开发人员更喜欢Haml / Slim / Jade，所以如果您至少能够识别语法，它将为您带来很大的优势。

JS Task Runners

自动任务运行器是该块上最新的前端工具。这个概念一开始经常令人困惑，但任务管理员可以通过潜在的令人难以置信的自定义功能显着改善您的开发工作流程。

两个重要的任务选手是Gulp和Grunt。您会注意到它们都运行在JavaScript上，但也需要终端。那一切都有用吗？

Gulp和Grunt都通过命令行通过节点包管理器（NPM）安装。库本身可以从单独的文件运行JS命令，特别是gulpfile.js和gruntfile.js  。

这些文件可能非常小或非常大，具体取决于您要自动执行的任务数量。看看这个示例Gulpfile.js，看看它的外观。

如果你之前从未做过这样的事情，那么你可能会感到有些困惑。暂时不要担心语法，而是关注这些.js任务文件提供的概念和功能。

您可以添加自动化任务的JS代码，例如处理Sass文件，处理Haml，甚至像CoffeeScript这样的JS语言。您会注意到这些链接中的每一个都指向为Gulp预先编写的NPM包。这意味着您不需要编写自己的自动编译Sass脚本，因为它已经被编写了！

学习使用任务运行器需要一些初步工作。这些概念可能看起来很陌生，与学习Git相似，新手的入门也存在障碍。但是，一旦您了解了基础知识并了解它如何影响您的工作流程，您将永远不想回头。

包起来

所有这些工具都是相当新的或在过去几年中大幅增长。前端开发的世界为改进的工作流程提供了许多令人印象深刻的工具，我希望本文为任何想要在他们的开发例程中添加缺失组件的人提供一个起点。

 上海做网站