建立 Web 前端开发环境(node和npm)

Web 前端开发涉及多种工具,这里将经常使用工具的安装和配置进行说明,提供了详细的说明,为后继的开发建立一个坚实的基础。javascript

本文介绍的工具备:NodeJS, NPM, Bower, Git 和 Grunt。html

1. 安装 NodeJS 和 NPM

一切从 NodeJS 开始吧,官方网址:https://nodejs.org/前端

NodeJS 既能够为咱们提供一个服务器端的 Web 环境,又能够提供一个命令行的工具,既然作 Web 前端开发,那就是咱们必然选择的工具了。java

为了解决包管理的问题,NodeJS 本身搞了一个包管理工具,你能够当作是 Visual Studio 中的 Nugut 就行了。不过,这个工具太好用了,如今本身已经自立门户,因此,你也能够单独安装它。 node

 

NPM 官方网址:https://www.npmjs.comjquery

有的时候,在国内访问 NPM 不太方便,缘由你懂得,淘宝在国内架设了一个 CNPM 服务器,帮咱们同步 NPM 中的模块,这个 CNPM 的地址为:http://npm.taobao.org,淘宝大法好。git

具体如何配置 Node.js 和 NPM,我已经整理过一篇 配置 node.js 环境,能够用来参考。angularjs

地址:http://www.cnblogs.com/haogj/p/3969536.html github

使用 npm 的 init 命令能够直接交互式建立一个 NodeJS 的项目文件 package.json.npm

复制代码
PS C:\Study\framework> npm init
This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg> --save` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. name: (framework) version: (1.0.0) description: entry point: (index.js) test command: git repository: keywords: author: license: (ISC) About to write to 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: no test specified\" && exit 1" }, "author": "", "license": "ISC" } Is this ok? (yes)
复制代码

 这时候,当前目录下,会出现一个名为 package.json 的 NodeJS ,或者说是 NPM 的项目模板。

2. 安装 Bower

NPM 能够管理 node.js 的模块,能够,咱们准备作 Web 前端开发,如今的目标不是 node.js 的服务器端开发,因此,咱们更加须要在浏览器上使用的 javascript 模块,这就不能全靠 NPM 了,Bower 是一个 Web 前端模块的包管理工具,有了它,咱们就没必要到各个网站去找各类前端模块,好比 jquery,bootstrap 等等,直接使用这个工具就能够搞定了。按照官方说法:Bower manages all these things for you. 

Bower 的图标是一只小鸟,很漂亮。查了一下,它叫园丁鸟,鸟类的建筑大师,雄鸟在求偶期会用树枝筑拱门或亭子,鸟中的工匠呀。

官网地址:http://bower.io,你也能够在 GitHub 上找到它:https://github.com/bower/bower

安装 bower 须要使用 NPM,命令很简单。

$ npm install -g bower

安装以后,能够直接使用 bower 命令来管理。下面是使用说明。

复制代码
PS C:\Study\framework> bower

Usage:

    bower <command> [<args>] [<options>] Commands: cache Manage bower cache help Display help information about Bower home Opens a package homepage into your favorite browser info Info of a particular package init Interactively create a bower.json file install Install a package locally link Symlink a package folder list List local packages - and possible updates login Authenticate with GitHub and store credentials lookup Look up a package URL by name prune Removes local extraneous packages register Register a package search Search for a package by name update Update a local package uninstall Remove a local package unregister Remove a package from the registry version Bump a package version Options: -f, --force Makes various commands more forceful -j, --json Output consumable JSON -l, --log-level What level of logs to report -o, --offline Do not hit the network -q, --quiet Only output important information -s, --silent Do not output anything, besides errors -V, --verbose Makes output more verbose --allow-root Allows running commands as root -v, --version Output Bower version --no-color Disable colors See 'bower help <command>' for more information on a specific command. PS C:\Study\framework>
复制代码

bower 会将管理的包保存到 bower_components/ 目录下面。

使用 init 进行初始化。

复制代码
PS C:\Study\framework> bower init
? name: framework ? version: 0.0.0 ? description: ? main file: ? what types of modules does this package expose? amd ? keywords: ? authors: ? license: MIT ? homepage: ? set currently installed components as dependencies? Yes ? add commonly ignored files to ignore list? Yes ? would you like to mark this package as private which prevents it from being accidentally published to the registry? (y ? would you like to mark this package as private which prevents it from being accidentally published to the registry? Yes { name: 'framework', version: '0.0.0', moduleType: [ 'amd' ], license: 'MIT', ignore: [ '**/.*', 'node_modules', 'bower_components', 'test', 'tests' ] } ? Looks good? Yes
复制代码

能够看到帮助建立的 bower.json 配置文件的内容。

使用 bower 获取前端库很方便,命令相似与 NPM

复制代码
PS C:\Study\framework> bower install jquery bower jquery#* cached git://github.com/jquery/jquery.git#2.1.4 bower jquery#* validate 2.1.4 against git://github.com/jquery/jquery.git#* bower jquery#~2.1.4 install jquery#2.1.4 jquery#2.1.4 bower_components\jquery PS C:\Study\framework> bower install angularjs bower angularjs#* cached git://github.com/angular/bower-angular.git#1.4.5 bower angularjs#* validate 1.4.5 against git://github.com/angular/bower-angular.git#* bower angular#~1.4.5 install angular#1.4.5 angular#1.4.5 bower_components\angular PS C:\Study\framework> bower install bootstrap bower bootstrap#* cached git://github.com/twbs/bootstrap.git#3.3.5 bower bootstrap#* validate 3.3.5 against git://github.com/twbs/bootstrap.git#* bower bootstrap#~3.3.5 install bootstrap#3.3.5 bootstrap#3.3.5 bower_components\bootstrap └── jquery#2.1.4
复制代码

当前目录下会增长一个 bower_components 文件夹,包含获取的前端包。不过你不能获取 kendoUI 的库,这是一个商业项目。

bower 工做的时候须要 node, npm 和 git.

尚未 git ?先等一下,咱们再来一个工具 git。

3. 安装 git

若是你不知道 git ,总该据说过 GitHub 吧,就是这只小黑猫  。不过,咱们这里说的是 git ,而不是 GitHub。

Git是一个分布式的版本控制系统,最初由 Linus Torvalds 编写,Torvalds 着手开发 Git 是为了做为一种过渡方案来替代 BitKeeper,后者以前一直是 Linux 内核开发人员在全球使用的主要源代码工具。开放源码社区中的有些人以为 BitKeeper 的许可证并不适合开放源码社区的工做,所以 Torvalds 决定着手研究许可证更为灵活的版本控制系统。

后来 Git 在其它项目中也取得了很大成功。GitHub 是使用 git 技术的一个代码托管网站,提供基于 Web 的访问界面。是目前最为流行的源代码管理网站。

Git 官网地址:http://www.git-scm.com

Git 下载地址:http://www.git-scm.com/downloads

安装很是简单,Windows 版本下载以后,会获得一个安装程序,直接安装就能够。

在命令行直接执行 git 能够获得帮助说明。

复制代码
PS C:\Study\framework> git
usage: git [--version] [--help] [-C <path>] [-c name=value] [--exec-path[=<path>]] [--html-path] [--man-path] [--info-path] [-p | --paginate | --no-pager] [--no-replace-objects] [--bare] [--git-dir=<path>] [--work-tree=<path>] [--namespace=<name>] <command> [<args>] These are common Git commands used in various situations: start a working area (see also: git help tutorial) clone Clone a repository into a new directory init Create an empty Git repository or reinitialize an existing one work on the current change (see also: git help everyday) add Add file contents to the index mv Move or rename a file, a directory, or a symlink reset Reset current HEAD to the specified state rm Remove files from the working tree and from the index examine the history and state (see also: git help revisions) bisect Find by binary search the change that introduced a bug grep Print lines matching a pattern log Show commit logs show Show various types of objects status Show the working tree status grow, mark and tweak your common history branch List, create, or delete branches checkout Switch branches or restore working tree files commit Record changes to the repository diff Show changes between commits, commit and working tree, etc merge Join two or more development histories together rebase Forward-port local commits to the updated upstream head tag Create, list, delete or verify a tag object signed with GPG collaborate (see also: git help workflows) fetch Download objects and refs from another repository pull Fetch from and integrate with another repository or a local branch push Update remote refs along with associated objects 'git help -a' and 'git help -g' list available subcommands and some concept guides. See 'git help <command>' or 'git help <concept>' to read about a specific subcommand or concept.
复制代码

在前端开发过程当中,咱们不用直接使用 git,有的时候 bower 会自动调用 git 来获取代码。 

 

4. 安装 Grunt

对于须要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化 Grunt 工具能够减轻你的劳动,简化你的工做。

官网地址:http://gruntjs.com

中文地址:http://www.gruntjs.net

Grunt和 Grunt 插件是经过 npm 安装并管理的。

详细的说明能够从 这里开始

在安装 Grunt 前,请确保当前环境中所安装的 npm 已是最新版本,执行 npm update -g npm 指令进行升级(在某些系统中可能须要 sudo 指令)。

若是你已经安装了 Grunt,如今须要参考一些文档手册,那就请看一看 Gruntfile 实例 和如何 配置任务吧。

安装 CLI

在继续学习前,你须要先将Grunt命令行(CLI)安装到全局环境中。安装时可能须要使用sudo(针对OSX、*nix、BSD等系统中)权限或者做为管理员(对于Windows环境)来执行如下命令。

npm install -g grunt-cli

上述命令执行完后,grunt 命令就被加入到你的系统路径中了,之后就能够在任何目录下执行此命令了。

显示 Grunt 版本,注意是大写的 V,小写的 v 就是另一个意思了。

>grunt -V
grunt-cli v0.1.13 grunt v0.4.5

Grunt 使用的项目文件称为 Gruntfile.js。若是尚未 Gruntfile.js 文件,直接执行 grunt,会看到以下的提示信息。

复制代码
PS C:\Study\framework> grunt
grunt-cli: The grunt command line interface. (v0.1.13) Fatal error: Unable to find local grunt. If you're seeing this message, either a Gruntfile wasn't found or grunt hasn't been installed locally to your project. For more information about installing and configuring grunt, please see the Getting Started guide: http://gruntjs.com/getting-started
复制代码

这是说没有在当前目录下找到 grunt 的项目文件。

grunt 的项目文件称为 Gruntfile.js,注意第一个字符但是大写的,在跨平台的时候,这就是一个坑了。

让咱们写一个 Grunt 版的 Hello, world 来完成环境的准备。

复制代码
module.exports = function(grunt) { // Project configuration.  grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), }); grunt.registerTask('default', 'Hello, world task description.', function() { grunt.log.writeln('Hello, world.'); }); };
复制代码

这里,咱们建立了一个自定义的任务,设置名称为 default,实际执行的时候,会输出 Hello, world.

PS C:\Study\framework> grunt
Running "default" task Hello, world. Done, without errors.

 就到这里吧。下次再见。