【.com速译】一位前端开发者分享她的工作流程和理想的工具集选项。每个新项目都是一段激动人心的旅程，但计划不周可能会毁了这一切。人们倾向于将前端开发工作流视为乏味且低优先级的任务，但这种情况的后果往往会在生命周期中显现出来。事实上，工程技术的本质是提高产品标准，从过去的错误中总结经验，然后制定一个精简的实施流程。我们应该将这些原则应用到流程中，以便从项目一开始就建立每个开发人员可用的规则、工具和技术选项。因此，产品本身将更加灵活、可扩展且更易于维护。作为一名前端工程师，在开始一个新项目之前，我总是确保工作流程清晰有序。下面，我将与大家分享我的整个设计过程。1.设置一套taskrunners有些朋友可能对taskrunners不太熟悉，taskrunners其实是用来自动化重复性任务的软件。它适用于JavaScript缩小、文件串联、复制文件/目录、执行脚本和编译CSS文件等任务。任务运行器通常基于命令行，允许开发人员“观察”特定文件或目录的变化，然后在适当的时候运行任务。这方面我个人比较推荐Grunt和Gulp。两者孰优孰劣的问题在很大程度上取决于使用习惯。Grunt以配置为核心，笨拙缓慢，但使用方便，拥有庞大的技术社区。Gulp需要更复杂的操作过程，但速度更好。以下是两者优缺点的总结：Grunt+易用性+通过配置进行更高级别的控制+更长的历史，更大的社区，更多的插件选项-非流式文件I/O使其更慢Gulp+需要更少的配置+更快processing+streaming，允许异步文件处理+需要更少的代码——有限的APIGrunt和Gulp都在Node.js上运行，所以团队中的每个开发人员都需要先安装Node.js。另一种适合任务运行器的任务是编译模板语言，例如Jade。2.定义CSS过程接下来，您需要选择一种CSS方法。答案可以是BEM、SMACSS或AtomicCSS。选择再次取决于您的个人喜好。我自己使用BEM，它简单易学，可以在大型团队中使用，以高效处理各种应用程序组件。决定了CSS的编写规则后，就要考虑如何编写CSS代码了。结合现在的趋势，大家都在用SassorLess来写更简洁的CSS代码。然而，CSS4很可能在不久的将来完全取代这些“语言”。考虑到预处理机制给构建过程增加了额外的时间投入，是否有必要讨论一下。例如，如果您选择使用BEM，您可能不再需要利用Sass或Less中的嵌套函数。使用Compass等Sass库可以显着改进Sass的功能，包括sprite-map生成、跨浏览器混合、文件读取和数学辅助函数，所有这些都允许开发人员在他们的CSS中实现更多效果。不过需要注意的是，使用Sass和Compass的前提是要求每个开发者都预装Ruby。另外，可以使用postcss等JS插件对CSS进行后处理。postcss作为一个可扩展的插件，可以让你根据浏览器支持要求自动添加浏览器前缀、检查CSS、压缩文件、生成精灵。我也在用postcss，这里强烈推荐。3、制定JavaScript规则这也是开始一个新项目最激动人心的部分，正确处理也能有效减少后续的技术债。可以梳理一些严格的要求，包括JS怎么写，用什么框架，设计模式。编写哪种风格的JavaScript？ES5、ES6+、TypeScript还是其他？这是一个大问题，通常很难找到一个正确的答案。ES5ES5的优势在于可以帮助所有开发者更顺畅地使用JavaScript，面对易于理解的结构并掌握如何使用各种动态语言特性。对于有经验的开发者来说，它不会带来任何学习曲线，所有主流的JSMVC框架都可以支持ES5。当然，它最大的缺陷是它迫使开发人员继续编写普通的旧JavaScript代码。其冗长、松散、面向对象的传统语言特性使其对使用C#、Java、Ruby等语言的开发者缺乏吸引力。根据我的个人经验，JavaScript可能会为新手软件开发人员提供陡峭的学习曲线。“undefined不是函数？？什么意思？？！”——想必每个软件开发者都有过这样的疑问。ES6+ES6代表了JavaScript的未来——还是ES7？综上所述，使用现代语言标准来编写满足未来需求的代码绝对是正确的选择。ES6提供了一组最吸引人的语言特性：类、接口、lambda函数、模块导入/导出功能，以及可以在“真实”编程语言中找到的许多其他元素。ES6的缺点是您仍然需要将代码转换为ES5以获得更广泛的浏览器、服务器和操作系统支持。虽然这不是一个大问题，而且我相信它会在不久的将来得到解决，但目前它仍然在构建过程中增加了一个额外的步骤。此外，它确实带有学习曲线，但它也是提高开发团队技能的绝佳机会。TypeScriptTypeScript是微软针对JavaScript自身不足的解决方案。它的优点包括ES6+中包含的所有增强功能，而且还为VisualStudio提供工具，并得到Angularv2的强烈支持。TypeScript旨在通过添加更多现代语言特性来实现JavaScript的可扩展性，同时帮助开发人员更轻松地在.NET开发环境中站稳脚跟。不利的一面是，您仍然需要将TypeScript转换为ES5并面临相关的学习曲线。这就引出了下一个问题。我们应该使用哪个JavaScript框架？当今市场上有如此多的JavaScript框架，几乎不可能确定一个最好的框架。相反，我们选择了这里最突出的三个，即Angular、Ember和Backbone。三者的发展历史都比较长，所以比较成熟，有相当大的社区资源基础。此外，这三者中的每一个都采用不同的方法来构建应用程序。让我们看看它们的优缺点：AngularAngularv2是我个人的第一个解决方案，它拥有与Angularv1一样优秀的体验，期待在下一个项目中使用它的最新版本。+极高的原型制作和构建速度+提供TypeScript和Dart的文档+可以轻松配合Jasmine和Karma实现测试驱动开发+很多独特的特性——很多独特的特性——需要开发者遵循Angular独特的方式很好的中间选择用于开发Ember。+组件驱动的特性+独特的特性比Angular少，但比Backbone多+使用handlebars模板引擎+CLI+易于通过CLI测试Backbone的老派和纯框架+几乎没有独特的特性+兼容设计模式，完全控制代码风格和架构+一些最有影响力的应用程序和网站在Backbone上运行+你可以选择你喜欢的模板引擎+基本上是一个没有附加属性的简洁HTML版本–需要大量样板代码–没有依赖性，但它可以与视图框架一起使用，例如作为Marionette来提升用户体验——整体代码编写要求更高，但也可以用来实现更好的优化——自带测试环境总结通过以上讨论，让我总结一下我理想中的最新前端开发流程:Grunt负责task运行Sass负责CSS预处理Postcss负责postprocessing使用AngularJS编写TypeScript进行构建
