Web前端开发涉及多种工具。这里对常用工具的安装和配置进行说明，并提供详细的说明，为后续开发打下坚实的基础。本文涉及的工具有：NodeJS、NPM、Bower、Git和Grunt。1.安装NodeJS和NPM。让我们从NodeJS开始。官网：https://nodejs.org/NodeJS可以为我们提供服务端Web环境和命令行工具。既然我们是做Web前端开发，那就是我们必须选择的工具。为了解决包管理的问题，NodeJS开发了一个包管理工具，可以看作是VisualStudio中的Nugut。不过，这个工具就是这么好用，现在已经自己成立了，所以你也可以单独安装。NPM官网：https://www.npmjs.com。有时，在中国访问NPM并不方便。你知道原因。淘宝在国内搭建了CNPM服务器，帮助我们同步NPM中的模块。这个CNPM的地址是：http://npm.taobao.org，淘宝大法不错。具体如何配置Node.js和NPM，我整理了一篇配置node.js环境的文章，可以参考。地址：http://www.cnblogs.com/haogj/...使用npm的init命令可以直接交互创建一个NodeJS的项目文件package.json.PSC:\Study\framework>npminitThisutilitywillwalkyou通过创建package.json文件。它只涵盖最常见的项目，并尝试猜测合理的默认值。请参阅`npmhelpjson`以获取有关这些字段的权威文档以及它们的作用。使用`npminstall--save`之后安装一个包并将其作为依赖项保存在package.json文件中。随时按^C退出。名称：（框架）版本：（1.0.0）描述：入口点：（index.js）测试command:gitrepository:keywords:author:license:(ISC)即将写入C:\Study\framework\package.json:{"name":"framework","version":"1.0.0","description":"","main":"index.js","dependencies":{"grunt":"^0.4.5","grunt-contrib-jshint":"^0.11.2"},"devDependencies":{},"scripts":{"test":"echo\"Error:notestspecified\"&&exit1"},"author":"","license":"ISC"}Isthisok?(yes)这时候在当前目录下，会有一个NodeJS命名为package.json，或者一个NPM工程模板。如果你喜欢简单如果你不喜欢一步步回答这些问题，也可以加一个参数-y，所有文件默认回答yes，npminit[-f|--force|-y|--yes]详解init命令的使用可以参考这里2.安装Bower注意：现在不推荐使用Bower，可以跳过这一段。npm可以管理node.js模块，没错，我们要做web前端开发，和目前的目标不是node.js服务端开发，所以我们更需要浏览器上使用的javascript模块，不能完全依赖NPM，Bower是一个web前端模块的包管理工具，有了它，我们不用去各种网站找各种前端模块，比如jquery，bootstrap等，直接用这个工具，按照官方的说法：Bower为你管理所有这些东西。Bower的图标是一只鸟，非常漂亮。一探究竟。它被称为园丁鸟，鸟类的设计大师。雄鸟在求偶期会用树枝搭建拱门或凉亭。它是鸟类中的工匠。官网地址：http://bower.io，也可以在GitHub上找到：https://github.com/bower/bower安装bower需要使用npm，命令很简单。$npminstall-gbower安装完成后可以直接使用bower命令进行管理。以下是说明。PSC:\Study\framework>bowerUsage:bower[][]Commands:cache管理bower缓存help显示关于Bowerhome的帮助信息打开一个包主页到你最喜欢的浏览器info特定的信息packageinit交互式创建bower.json文件install在本地安装包link符号链接包文件夹列表列出本地包-和可能的更新login使用GitHub进行身份验证并存储凭据lookup按名称查找包URLprune删除本地无关的包register注册packagesearch按名称搜索包update更新本地包uninstall移除一个本地包unregister从注册表版本中移除一个包BumpapackageversionOptions:-f,--force使各种命令更强大-j,--json输出可消费的JSON-l,--log-level日志到什么级别report-o,--offline不打网络-q,--quiet只输出重要信息-s,--silent除了错误不输出任何东西-V,--verbose使输出更详细--allow-root允许以root身份运行命令-v,--version输出Bower版本--no-color禁用颜色有关特定命令的更多信息，请参阅“bowerhelp”。PSC:\Study\framework>bower将管理的包保存到bower_components/目录下面使用init进行初始化。PSC:\Study\framework>bower初始化？名称：框架？版本：0.0.0？描述：？主文件：？这个包公开了哪些类型的模块？AMD？关键词：？作者：？许可证：麻省理工学院？主页：？将当前安装的组件设置为依赖项？是的？将通常被忽略的文件添加到忽略列表？是的？你想将这个包标记为私有以防止它被意外发布到注册表吗？（是吗？你想把这个包标记为私有的，以防止它被意外发布到注册表吗？是的{name:'framework',version:'0.0.0',moduleType:['amd'],license:'MIT',ignore:['**/.*','node_modules','bower_components','test','tests']}?看起来不错？可以看看帮助创建的bower.json配置文件的内容。使用bower获取前端库很方便，命令类似与NPMPSC:\Study\framework>bowerinstalljquerybowerjquery#*cachedgit://github.com/jquery/jquery.git#2.1.4bowerjquery#*validate2.1.4针对git://github.com/jquery/jquery.git#*bowerjquery#~2.1.4installjquery#2.1.4jquery#2.1.4bower_components\jqueryPSC:\Study\framework>bowerinstallangularjsbowerangularjs#*cachedgit://github.com/angular/bower-angular.git#1.4.5bowerangularjs#*针对git://github.com/angular/bower-angular.git#*bowerangular#~1.4验证1.4.5。5安装angular#1.4.5angular#1.4.5bower_components\angularPSC:\Study\framework>bowerinstallbootstrapbowerbootstrap#*cachedgit://github.com/twbs/bootstrap.git#3.3.5bowerbootstrap#*validate3.3.5针对git://github.com/twbs/bootstrap.git#*bowerbootstrap#~3.3.5installbootstrap#3.3.5bootstrap#3.3.5bower_components\bootstrap└──jquery#2.1.4当前目录下会增加一个bower_components文件夹，包含获取到的前端包。但是，您无法获取kendoUI库，它是一个商业项目。Bower需要node、npm和git才能工作。还没有git？等一下，我们来另一个工具git。3.安装git如果你不知道git，那你一定听说过GitHub这只小黑猫。但是，我们在这里谈论的是git，而不是GitHub。Git是一个分布式版本控制系统，最初由LinusTorvalds编写。Torvalds着手开发Git作为替代BitKeeper的临时解决方案，BitKeeper以前是全球Linux内核开发人员使用的主要源代码工具。开源社区中的一些人认为BitKeeper的许可证不适合开源社区的工作，因此Torvalds决定研究具有更灵活许可证的版本控制系统。后来，Git在其他项目中也取得了巨大的成功。GitHub是一个使用git技术的代码托管网站，提供基于web的访问接口。是目前最流行的源代码管理网站。Git官网地址：http://www.git-scm.comGit下载地址：http://www.git-scm.com/downloads安装非常简单。Windows版下载后会得到一个安装器，直接安装即可。直接在命令行执行git获取帮助说明。PSC:\Study\framework>gitusage:git[--version][--help][-C][-cname=value][--exec-path[=]][--html-path][--man-path][--info-path][-p|--分页|--no-pager][--no-replace-objects][--bare][--git-dir=<路径>][--work-tree=<路径>][--namespace=<名称>][]这些是在各种情况下使用的常用Git命令：启动工作区（另请参阅：git帮助教程）clone将存储库克隆到新目录中init创建一个空的Git存储库或重新初始化现有的onework在当前更改上（另请参阅：githelpeveryday）add将文件内容添加到索引mv移动或重命名文件、目录或符号链接reset将当前HEAD重置为指定状态rm从工作树和indexexamine历史和状态（另见：githelprevisions）bisect通过二进制搜索查找引入错误的更改grep打印与模式匹配的行log显示提交日志show显示各种类型的对象状态显示工作树状态增长、标记和调整您的公共历史分支列出、创建或删除分支checkout开关分支或恢复工作树文件commit记录对存储库的更改diff显示提交、提交和工作树之间的更改等merge将两个或多个开发历史连接在一起rebaseForward-port本地提交到更新的上游头标签验证使用GPGcollaborate签名的标记对象（另请参阅：git帮助工作流）fetch从另一个存储库下载对象和引用pull从另一个存储库或本地分支获取并与它集成push更新远程引用以及关联的对象'githelp-a'和'githelp-g'列出可用的子命令和一些概念指南。请参阅“githelp”或“githelp”以了解特定的子命令或概念。在前端开发过程中，我们不需要直接使用git，有些时候bower会自动调用git获取代码4.安装Grunt如果选择Webpack，可以跳过这一段。下面是Webpack的安装说明。对于需要反复重复的任务，如压缩（minification）、编译、单元测试、linting等，自动化的Grunt工具可以减少你的劳动，简化你的工作。官网地址：http://gruntjs.com中文地址：http://www.gruntjs.netGrunt及Grunt插件通过npm进行安装和管理。详细说明可以从这里开始。安装Grunt前，请确保当前环境安装的npm是最新版本，执行npmupdate-gnpm命令升级（部分系统可能需要sudo命令）。如果您已经安装了Grunt并且需要一些文档，请查看Gruntfile示例以及如何配置任务。安装CLI在继续之前，您需要将Grunt命令行(CLI)安装到您的全局环境中。安装可能需要sudo（对于OSX、*nix、BSD等）权限或以管理员身份（对于Windows环境）执行以下命令。执行完上面的npminstall-ggrunt-cli命令后，grunt命令就会添加到你的系统路径中，以后你可以在任意目录下执行这个命令。显示Grunt版本，注意大写的V，小写的v另有含义。PSC:\Study\framework>gruntgrunt-cli：grunt命令行界面。(v0.1.13)致命错误：无法找到本地grunt。如果您看到此消息，则可能是未找到Gruntfile或grunthas尚未在您的项目本地安装。有关安装和配置grunt的更多信息，请参阅入门指南：http://gruntjs.com/getting-started这意味着在当前目录中找不到任何grunt项目文件。grunt项目文件称为Gruntfile.js。请注意，第一个字符是大写的。跨平台的时候，这是一个坑。让我们写一个Grunt版本的Hello,world来完成环境准备。PSC:\Study\framework>grunning"default"taskHello，world.Done，没有错误。5.安装Webpack以下是Webpack的安装说明。就停在这里。回头见。本文来自链接：http://www.cnblogs.com/haogj/...
