前端开发工具小结

来源：互联网发布：网络的发展趋势编辑：程序博客网时间：2024/05/21 06:38

题图

版权申明：此文章无需授权即可转载，转载时请务必注明作者

即便像我这样非常有经验的开发者，对于一些前端开发工具，也会产生疑惑。解决办法是在概念层面上理解它们是如何工作的，以及如何共同工作的。

这篇文章是我个人对于前端开发工具的理解，抛开代码层面，我们从理念层面来谈它们是如何完成它们的工作的。

不要对新技术产生恐惧

目前已经有太多的前端开发工具：Node, NPM, Grunt, Gulp, Bower, Webpack, Browserify, Yeoman, Brunch……很容易让人产生跟不上节奏的感觉。

关键点就是不要害怕，所有这些工具都是为了让你更高效而设计的。

要理解它们是什么，为什么用它们，怎么用它们，我们只需要理解以下几个概念。

开发工具做两件事：

当你碰到一个新的工具，第一个问题应该是：“这个工具想要帮我安装还是执行？”

npm，Bower和Yeoman都属于“安装”工具，他们能把安装这件事做的很漂亮。他们可以安装前端库，例如Angular.js或React.js。它们可以在服务器上安装开发环境，它们可以安装测试库。他们甚至可以帮你安装其他的前端开发工具。

"什么是bower？"
”一个包管理器，用npm安装它。”
“什么是npm？”
“一个包管理器，你可以用brew安装它。”
“什么是brew？”...
——@ddprrt

简短的说，它们可以安装你可以想象的和代码相关的东西。

Grunt，Webpack，Require.js，Brunch和Gulp都是“执行”工具，它们比安装工具更复杂。它们的目标是自动化web开发中的体力活和容易出错的任务。“执行”的事情往往被称作“任务”。

为了执行这些“任务”，需要使用它们各自生态系统中的包和插件。每个工具执行任务的方式有差别，它们不会做相同的事情。有些“执行”工具试图做你抛给它的所有事情，其他的专注于一件事，例如解决Javascript依赖（例如Browserify, Require.js）

有时，在同一个项目中，可能会使用好几个这样的工具。

这里有一个被“执行”工具自动化的任务列表：

当你理解了工具的安装功能和执行功能，对它们进行分类也变得非常容易：

分类

Node和npm可以安装和执行所有这些开发工具，所以你的项目会有它们的身影。正因为这一点，大多数开发者在求助于其他工具前，都会尽可能的使用这两款工具。

Node和npm落到我们的二分归纳法中，Node是执行工具，而npm是安装工具。

npm可以安装像Angular.js或React.js之类的库。为了开发方便，它还可以安装一个服务器，从而在本地运行你的app。它甚至可以安装例如最小化你的代码的可执行工具。

另一方面，Node是“执行”工具，例如运行Javascript文件，服务器等等。

如果你刚开始学习，从Node+npm开始，建议你在这两个工具上多花一些时间。当你的项目大到一定程度，你会遇到Node和npm自动化的限制，那时你再考虑使用其他的开发工具。

开发者经常把Javascript文件和CSS文件分成很多个文件，这样可以让我们写出模块化的代码，并且每个文件只完成一件事。一个文件只做一件事可以减少你的认知负担（如果你认为多个文件比起一个大文件来说会让你更困惑，试图在一个5000行的源文件上工作，我想你很快会改变你的想法的

0 0

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子鸡肉烤串怎样做烤羊肉串烤串酱烤串类哪的烤串好吃烤串食谱烤道串吧烧烤羊肉串批发豆腐串批发延东烤串烤肉腌制如何腌制烤肉烤肉怎么腌制特色烧烤店烧烤连锁店烧烤腌制方法自动烧烤桌烧烤桌无烟净化烧烤车特色烧烤小吃车烧烤技术大全自动翻转烧烤桌无烟烧烤桌厂家烧烤炉子多少钱铁板烧自助烧烤小吃车批发烧烤店烧烤自助餐烧烤烧烤连锁烧烤腌制配方自助烧烤机自动烧烤小吃车无烟烧烤桌小吃车烧烤车烧烤刷学习烧烤技术铁板烧烤小吃车韩式烧烤腌料烧烤板烧烤的做法和配料无烟烧烤车厂家