做一个聪明的前端开发者

那么什么是聪明者，就是打架不出拳，直接用刀砍，或者更牛逼的就开枪！

那么如何做一个聪明的前端开发者？

很显然，就是用工具代替手工，用自动代替手动！

那到底是用什么工具呢，如下：

前端开发工具

工具有点多，但是都非常简单，或许你已经安装并使用过一些了。

git，版本控制系统
node，JS运行平台
npm，node的包管理
yo，脚手架
grunt，项目构建工具
bower，项目依赖包管理

git，http://git-scm.com/

据说是一款很厉害的版本控制系统，类似SVN，不过本人还没有所领悟，继续SVN中，只是下面的工具要到用git所以简单说一下。
下载安装即可，安装完成后顺便试一下cmd中git命令是否可以识别。

node，http://nodejs.org/

这是个好东西，降低了应该程序开发的门槛，JS不只在浏览器上运行了，还可以开发本地应用程序，就靠它来运行，有点类似于JVM，牛逼的工具一时间如雨后春笋般冒了出来！
下面说到的的工具都是用node开发的本地应用程序
安装就非常简单了，下载后添加bin目录到系统Path路径即可。

npm，https://www.npmjs.org/

说到这个的时候我有点激动，也不知道从什么时候开始，在我们项目中用到的第三方依赖不用自己苦逼的在网络上到处找了。只要指定版本号和依赖名字它就可以帮你下载。
这个就更厉害在了，它不仅可以帮你安装依赖包，还可以安装基于node开发的软件，真的是泪流满面呀！
安装同样简单，下载后添加bin目录到系统Path路径即可，下载地址：http://nodejs.org/dist/npm/
常用功能就是安装（npm install -g 名字）和更新（npm update -g 名字）了，-g表示可以全局运行，其实就是帮你把安装路径添加到系统的Path路径中。其它用法的看官网吧。

yo，http://yeoman.io/

什么是脚手架，百度百科是这样解释的，指施工现场为工人操作并解决垂直和水平运输而搭设的各种支架，看到这里你应该大概明白了，
yo在这里充当的角色就是帮你直接生成项目的部分内容，免去你的重复无聊的工作，比如创建目录构建、新建各种配置文件。
安装：npm install -g yo

grunt，http://gruntjs.com/

构建工具，一句话解释，把你指定的内容转换成你想的目标内容，这就是构建。比如把less转换成css，压缩js或css等。
安装：npm install -g grunt-cli

bower，http://bower.io/

这个就更强了，类似java界的maven包管理功能，简单的说就是帮你下载项目依赖的内容，
比如你用到的jquery，可以指定名字和版本让它来帮你下载，它依赖git从github下载，至于它从哪里怎么下载你就不用关心了。
安装：npm install -g bower

工具介绍完了，下面说说如何让这些东西帮你拉磨

创建示例项目

工具安装了一大堆，那如何帮我们效力呢，也很简单的。

从yo开始，前面说过了，它可以帮你创建项目的基础架构，比如创建一个基于jquery的前端项目：
打开cmd，执行以下代码：

mkdir yotest
npm install -g generator-jquery
yo jquery

按照提示输入你的项目名称，版本（4位，如1.0.0），作者等信息，然后就等着收货吧。

对上面的命令解释一下，generator-jquery这个东西是yo提供的一种预先建立好的项目原型，
通过命令npm install -g generator-jquery把它安装你到本地仓库，最后通过yo jquery来随时创建新的基于jquery的项目，与maven十分相似。

项目原型存放于官方仓库，可以通过http://yeoman.io/generators/official.html这个去检索，还有一个是社区仓库http://yeoman.io/generators/community.html。

当然你可自己创建项目原型，请参考http://yeoman.io/authoring/，或许我下一篇会说到吧。

主要会帮你创建一个合理的项目目录结构，并生成主要的几个配置文件包括package.json（npm依赖包配置）、Gruntfile.js（grunt配置）、bower.json（bower依赖包配置）等。

如果你修改了package.json中的devDependencies结点，通过npm install重新下载依赖，这部分依赖主要给grunt使用，

修改了bower.json的devDependencies结点通过bower install重新下载依赖，

直接运行grunt命令执行所有grunt任务。

本文重在抛砖引玉，更多的用法大家去挖掘，或自行参考各自的官方文档。

转载于:https://www.cnblogs.com/xguo/p/3831326.html