工具（草稿）

准备工具，是学习与工作循环里的第一步，建议使用最小的时间准备与理解必要的工具，然后立即使用它们去做事情。我们的目的不是成为使用工具的大师，而是要使用工具去做我们想要的产品。

在未来的学习工作过程里，你会遇到大量的工具，工具的使命是给我们提供帮助，让我们的工作更简单，而不是把我们吓趴下。同一个任务可以使用不同的工具组合去完成，我会去选择其中的一种，我建议您也不要太纠结到底要用哪个工具，没主意的可以先跟着我来。

宁皓网介绍了很多工具，在这个手册里列出的都是必需品。如果您发现有些工具没在这个手册里出现，可以先忽略掉它们。

---

选择硬件设备

任务概述：为工作选择一些硬件设备。

电脑（必备）

到目前为止大部分的设计跟开发工具还是在电脑上完成的，PC 与 Mac 都可以，别纠结，用您现有的并熟悉的平台。工具很多都是跨平台的，它们都有 Windows，OSX，Linux 的版本。唯一要注意的是，如果您想为 OSX 或 iOS 平台开发应用，您就需要一台 Mac。

我的选择是 Mac，起初的原因是看前辈们用的 Mac 挺酷，也想换一种工作方式，再加上我有打算为 OSX 与 iOS 平台开发应用，所以就选择了 Mac，我也推荐您用 Mac 。

手机（必备）

我希望您能同时拥有 Android 与 iOS 平台的手机。手机主要的用处是调试网站或应用，看一下它们在真实的手机上运行到底是什么样的。网站可以直接使用浏览器测试，电脑版与手机版的浏览器会有一些区别。开发的应用可以在对应平台的模拟器上调试，不过您想看一下真实的效果，还必须要把应用安装在真实的设备上。

注意，您开发的应用如果想安装在 iOS 平台（苹果手机）的设备上，需要申请苹果的开发者，每年的会费是 99 美金。

平板（可选）

最好您可以拥有一块平板电脑，作为中号屏幕，也可以用作平时休闲。

我的选择

电脑：Mac（iMac，Macbook），手机：iPhone 6s（小雪的），Android 正在考虑 ：），平板：iPad mini 。

---

了解操作系统

任务概述：了解几种可以选择的操作系统，知道自己用的是什么。

这里说的是安装在电脑上的操作系统，就是您平时工作用的操作系统。这取决于您选择的电脑，一般的 PC 都是 Windows 系统，如果选择 Mac 电脑，那就是 OSX 系统，现在还可以为 PC 安装 Linux 系统，比如 ubuntu 就是一种 Linux 系统。

Windows

Windows 8，Windows 10，它会使用数字作为版本号。选择最新的 Windows 系统，原因是因为它是新的！

OSX

Mac 电脑上的操作系统叫 OSX，它的版本也是用数字表示，比如 10.11 ，不同版本会对应一个名字，比如 10.11 的名字叫 El Capitan‎，这是一个地名。选择最新的版本，现在升级系统不花钱了，没理由不升级，升级系统不用担心数据丢失，这点苹果做的不错。

Linux

Linux 系统也可以办公用，也能当服务器。办公用需要系统有个图形界面，Linux 有很多发行版，您可以把它们想成是不同口味的 Linux，比如 ubuntu 就是一款非常好的 Linux 系统，它分成了桌面版还有服务器版。

可能会有些特殊原因，会决定您选择哪一款操作系统。比如你想开发 OSX 或 iOS 应用，您就需要使用一台带 OSX 系统的 Mac 电脑。有些网上银行可能只提供 Windows 系统的版本。

也有些解决的方法，比如在 PC 上使用黑苹果，我不太明白原理，只知道是一种可以在 PC 上安装 OSX 系统的方法。您如果用 Mac 又想有个 Windows ，不建议安装双系统，可以试一下在 Mac 上安装一个虚拟机，在虚拟机上去创建一台 Windows 系统的虚拟机。

我的选择

OSX，因为是 Mac 电脑自带的系统。

---

安装必备工具

任务概述：下载并安装一些必备的工具，先不用知道它们到底能做什么，只需要确定可以使用。

这里说的工具就是一些安装在操作系统上的软件。一开始，您不一定非要知道它们到底怎么用，但这些东西都是必须品，以后一定会用到。所以，我们可以先把它们安装在电脑上，先让它们可以运行就行，稍后咱们再去了解怎么使用这些工具。

在自己的电脑上下载并安装下面这些工具，它们都是跨平台的，根据您使用的操作系统，下载对应的版本。

1. Atom：编辑器
   • 任务：安装以后能打开 Atom。
2. Chrome：浏览器
   • 任务：安装以后能打开 Chrome。
3. Git：版本控制
   • 任务：安装以后在命令行界面下输入 git ，能返回帮助信息。
4. Virtualbox：虚拟机
   • 任务：安装以后能运行 Virtualbox。
5. Vagrant：虚拟机管理
   • 任务：安装以后在命令行界面下输入 vagrant，能返回帮助信息。
6. Node.JS：JavaScript runtime
   • 任务：安装以外在命令行界面下输入 node --help，能返回帮助信息。
7. npm：JavaScript 包管理
   • 任务：安装 Node.JS 以后就可以使用 npm 了，在命令行界面下 npm --help 能返回帮助信息。

工具下载

http://pan.baidu.com/s/1dD0a6B3

注意事项

Windows 用户在安装 Git 的时候，有一步是调整系统的环境变化，有三个选项，建议选择第三个（Use Git and optional Unix tools from the Windows Command Prompt），意思是为 Windows 的命令提示符添加一些 Unix 工具，比如以后我们连接 Linux 系统用的 ssh 。

---

习惯命令行界面

• 任务概述：在系统的命令行界面下，熟悉使用相关的命令工具去处理系统的文件与目录。
• 相关课程：《命令行》

你一定会遇到一些任务必须要在命令行界面下完成，就是在命令行界面下输入要执行的命令去完成相应的任务。比如为项目做版本控制，开发流程里的一些编译工作，去控制应用的服务器等等，这些都有可能要在命令行界面下完成。所以习惯在命令行界面下工作是一个现代的软件工程师必备的技能。

任务 1：打开系统的命令行界面。

Windows  用户可以使用系统自带的 Power shell ，可以使用系统的搜索功能找到这个工具。OSX 用户使用系统自带的终端，在 Launchpad 或应用程序目录下的实用工具里可以找到它。

• Windows：Power shell
• OSX：终端（Terminal）

任务 2：熟悉在命令行界面下操作文件与目录。

找找在命令行界面下工作的感觉，知道自己所在的位置，怎么查看目录下都有什么，进入到想要的地方，执行创建，移动，复制，删除这些动作。

1. pwd：当前位置
2. ls：列出目录里的东西
3. cd：改变所在位置
4. mkdir：创建目录
5. mv：移动目录与文件
6. cp：复制目录与文件
7. rm：删除目录与文件

注意事项

不同的操作系统都会自带一些命令行工具，这些自带的工具的使用稍有不同。Windows 有自己的一套，OSX 与 Linux 因为有血缘关系，所以用起来很像。我们也可以自己去为系统安装命令行工具，比如之前安装的 npm，git，这些都是命令行工具。

---

 

Atom

—— 代码编辑器

• 任务概述：学习使用 Atom 编辑器。
• 相关课程：《Atom：代码编辑器》

TODO：创建一些任务，理解 Atom 这个工具。

---

创建虚拟机

—— 在本地电脑上搭建应用的服务器需要的工具

• 任务概述：在本地电脑上使用 Linux 系统的虚拟机。
• 相关课程：《Vagrant：虚拟机管理》

我们要为网站或应用搭建一些服务，您可以先在本地电脑上去搭建这些服务，因为我们要在本地进行设计开发，然后可以把应用放到在本地搭建的服务上去运行。这些服务通常都是在 Linux 系统上去运行，所以您需要在本地电脑上使用虚拟机，然后为项目创建一台 Linux 系统的虚拟机，在上面再去搭建应用的服务。在搭建这个服务之前，先要知道怎么在本地去管理项目使用的虚拟机。

一开始，我们已经安装了 Virtualbox 还有 Vagrant 。Virtualbox 是一个开源的虚拟机软件，使用它可以去创建一些虚拟机，你可以为虚拟机分配一些资源，比如 CPU，内存，硬盘，你也可以选择虚拟机的操作系统。这里我们不直接使用 Virtualbox 去管理虚拟机，而是使用 Vagrant 这个工具，它是一个命令行工具，可以方便的去管理项目使用的虚拟机。

任务 1：添加一个 CentOS 7.0 的 box

box 可以想成是别人做好的虚拟机的操作系统。CentOS 是一种 Linux 操作系统，大量的用于应用的服务器。

步骤：

1 → 在 Toolkit（http://pan.baidu.com/s/1dD0a6B3）下的 Vagrant_box 目录里，把 centos-7.0_chef.box 下载到本地电脑的桌面上。

2 → 执行添加 box 的命令。

vagrant box add centos-7.0_chef ~/desktop/centos-7.0_chef.box

3 → 查看一下可用的 box 。执行下面的命令在返回的 box 列表里，应该会显示上一步添加的 centos-7.0_chef 这个 box 。

vagrant box list

任务 2：为项目创建虚拟机

你想创建一个网站，就为这个网站项目创建一台虚拟机，这台虚拟机应该是 Linux 操作系统，比如 CentOS ，在上面应该已经安装好了运行网站需要的一些服务，比如 Web 服务器，数据库服务等等。你可以使用本地电脑上的编辑器，去设计开发网站，然后让网站在虚拟机上运行，在本地的浏览器上可以访问到在虚拟机上运行的网站。

步骤：

1 → 为网站创建一个目录。

cd ~/desktop
mkdir ninghao-project

2 → 为项目的虚拟机指定要使用的 box 。

vagrant init centos-7.0_chef

任务 3：启动并连接到 Linux 虚拟机。

使用 ssh 这个工具，我们可以连接到 Linux 服务器上，然后我们就可以去控制这台 Linux 服务器了，比如添加用户，设置权限，管理系统的服务等等。

步骤：

1 → 启动虚拟机。

cd ~/desktop/ninghao-project
vagrant up

2 → 连接虚拟机。

vagrant ssh

连接到为项目创建的虚拟机以后，在命令行界面上的操作就相当于是在这台 Linux 系统的虚拟机上做的。命令行界面上的提示看起来像这样：

[vagrant@localhost ~]$

任务 4：熟悉 vagrant 相关命令

# 关机
vagrant halt

# 休眠
vagrant suspend

# 销毁项目的虚拟机
vagrant destroy

注意事项

在 Windows 上使用 ssh

使用 Vagrant 连接到 Linux 系统的虚拟机，用的是 ssh 这个工具。OSX 系统上自带这个工具，不过 Windows 上原本并没有这个工具，也就是在执行 vagrant ssh 这个命令的时候，可能并不能连接到虚拟机。如果在安装 Git 的时候，如果选择了 Use Git and optional Unix tools from the Windows Command Prompt ，就会在 Windows 的命令行界面下安装一些 Unix 工具，这里就包含我们要执行的 vagrant ssh 命令里需要用到的 ssh 这个工具。

下一步

学会怎么使用 Vagrant 管理虚拟机以后，您可以去熟悉一下 Linux 操作系统，比如怎么样管理系统上的软件，服务，去了解一下 Linux 系统的文件与目录的权限是怎么回事，然后再去学一下怎么样手工的搭建一个可以运行 PHP 网站的服务器。

---

 

yum

—— CentOS 系统包管理工具

yum 是 CentOS 或 redhat 系统的包管理工具。使用它可以去安装，删除，升级系统上的包，在安装包的时候，如果这个包依赖其它包提供的功能，yum 会自动为你下载并安装这些依赖的东西。

任务 1：查看资源仓库的列表

使用 yum 去安装包，它会到系统的资源仓库里去找，这些资源仓库里面包含了要安装的包的位置，yum 会去给我们到这些指定的地方下载需要安装的包。操作系统一般会自带一些仓库，我们也可以自己去安装第三方提供的资源仓库。

yum repolist

任务 2：搜索想要安装的东西

如果你不确定要安装的东西叫什么，可以先去搜索一下相关的关键词。比如我想找到跟 php 相关的包：

yum search php

任务 3：查看包的相关信息

想了解一下要安装的包的相关信息，比如包的版本号，介绍等等，可以使用 yum info 这个命令，比如我想查看一下 nginx 这个包的相关信息：

yum info nginx

任务 4：查看包的依赖

安装的包可能会依赖很多其它的包提供的功能，查看一个包到底依赖哪些东西，可以执行：

yum deplist nginx

任务 5：安装包

确定了要安装的包以后，就可以使用 yum install 去安装它了，这里我再去安装一下 nginx ：

sudo yum install nginx

任务 6：升级包

可以先检查一下是否有可用的更新，得到一个完整的可用更新列表，执行：

yum check-update

想知道某个包是不是有可用的更新，执行：

yum info nginx

上面的命令会告诉你，当前安装的包的版本是什么，还有最新的版本是什么。决定要更新，可以使用 yum update 命令，比如我要更新一下 nginx，执行：

sudo yum update nginx

任务 7：删除包

不需要的包可以使用 yum remove 删除掉，比如我要删除 nginx：

sudo yum remove nginx

---

systemctl

—— Linux 系统上的服务管理工具

使用 systemctl 这个工具，可以查看服务的状态，启动，停止，重启服务，可以设置服务让它在系统启动的时候自动运行。

任务 1：启动服务

比如我想要启动 CentOS 7 上的 firewalld 这个防火墙服务，执行：

sudo systemctl start firewalld

任务 2：查看服务状态

想检查一下某个服务当前的状态，用的是 systemctl status 命令。比如查看 firewalld 的状态：执行：

sudo systemctl status firewalld

在返回的内容里，Active 后面如果是 active (running) ，表示服务当前正在运行。如果是 inactive (dead) ，表示服务没有运行。

任务 3：停止服务

systemctl stop 再加上要停止的服务的名字。比如我要停止 firewalld ，执行：

sudo systemctl stop firewalld

查看一下服务的状态：

sudo systemctl status firewalld

任务 4：重启与重新加载服务

重启就是先停止然后再启动一下服务，用的是 systemctl restart 。重新加载服务不需要停止服务的主进程，比如你修改了服务的相关配置，想让这个配置生效，除了重启服务，我们也可以使用重新加载服务，用的是 systemctl reload 。

重启 firewalld 服务：

sudo systemctl restart firewalld

重新加载 firewalld 服务：

sudo systemctl reload firewalld

任务 5：启用与禁用服务的开机自启动

你想让一个服务在开机的时候自动启动，可以使用 systemctl enable 这个命令，想禁用服务的开机自启动，用的是 systemctl disable。比如我要设置 firewalld 这个服务。

步骤：

1 → 让服务在系统开机的时候自动运行，执行：

sudo systemctl enable firewalld

2 → 查看一下服务的状态：

sudo systemctl status firewalld

设置了服务开机启动后，查看状态的时候，Loaded 后面会出现 enabled ，表示现在这个服务会开机自启动。

3 → 禁用服务开机自启动：

sudo systemctl disable firewalld

禁用了服务的开机自启动以后，查看服务状态的时候，在 Loaded 后面会出现 disabled 。

---

 

npm

—— JavaScript 包管理工具

• 任务概述：学习使用 npm 工具管理项目需要的包。
• 相关课程：《npm：JavaScript 包管理》

npm（node package manager）是 JavaScript 的包管理工具，package 是包的意思，也可以想成是模块，一个包可以提供一些功能，这个包又可以依赖其它的包提供的功能。使用 npm 你可以跟别人分享你写的代码，也可以使用别人写好的东西。可以使用的包，在 npm 的官方网站可以找到。

npm 是一个命令行工具，就是你需要在命令行界面下使用这个工具去管理项目需要的包。npm 管理的包有些是用在服务端应用上的，有些是命令行工具，也有很多可以用在前端，就是直接在浏览器上使用。

任务：确定可以使用 npm

npm 现在包含在 Node.JS 里，在系统上安装了 Node.JS 以后，您应该就可以使用这个工具了。打开系统的命令行界面，输入 npm --help ，如果可以返回帮助的信息，说明您已经可以使用这个工具了。

任务：升级 npm

虽然 npm 包含在 Node.JS 里，不过它本身更新的比较勤快，你可以单独升级这个工具。

步骤：

1 → 查看当前使用的 npm 的版本

npm -v

2 → 升级 npm

sudo npm install npm --global

注意：这里的升级就是重新使用 npm 在全局范围内再安装一下 npm 这个工具。在 Windows 上执行上面这行命令可以去掉最前面的 sudo 。

3  → 查看当前使用的 npm 的版本

npm -v

任务：在全局范围安装包

使用 npm 安装的包，有些是命令行工具，这些工具通常可以在全局范围内安装一下，这样你在任何地方都可以使用这个命令行工具。安装包用的是 npm install 命令，后面是要安装的包的名字，然后需要再加上一个 --global 选项，简写形式是 -g 。比如我们要安装一下 nrm 这个工具，它的功能是修改 npm 的安装源。

# 在全局范围安装 nrm 工具
npm install nrm --global

# 测试是否可以使用 nrm 工具
nrm --help

任务：修改 npm 的安装源

安装源就是在安装包的时候，下载这些包的地方。默认就是 npm 官方提供的源，不过在国内我们连接这些地方的速度比较慢，经常会导致下载慢，或下载不完整。国内的 taobao 为 npm 提供了一个安装源，我们可以把 npm 的安装源设置成 taobao 。

1 → 查看可用的安装源

nrm ls

2 → 测试连接速度最快的安装源

nrm test

3 → 设置想要使用的安装源

nrm use taobao

任务：删除在全局范围安装的包

卸载或删除使用 npm uninstall ，加上要卸载的东西，然后再加上一个 --global 选项，简写形式是 -g ，表示要卸载在全局范围安装的包。

1 → 在全局范围安装一个包，比如  forever 这个工具：

npm install forever --global

2 → 测试是否可以使用这个工具。

forever --help

3 → 删除掉在全局范围安装的包。比如删除掉 forever ：

npm uninstall forever --global

任务：创建项目

你现在一个项目里使用 npm 去管理项目依赖的包，这些包可能会用在项目本身，为项目提供一些功能，或者是开发项目的时候使用的一些工具。项目依赖的包，可以在 npm 的配置文件，package.json 里面描述清楚，在安装包的时候，可以把安装的东西保存到这个配置文件里。

步骤：

1 → 创建目录

# 进入到桌面
cd ~/desktop

# 为项目创建目录
mkdir ninghao-project

# 进入到项目的目录下
cd ninghao-project

2 → 为项目创建 package.json 文件

npm init

上面这个命令会问我们一想问题，然后根据我们的回答去创建一个 packge.json 文件。

任务：为项目安装包

安装包使用 npm install ，后面加上要安装的东西，如果安装的是项目本身需要的包，要加上一个 --save 选项，把它保存到项目的依赖里，如果是开发项目的时候使用的一些辅助工具，可以把这些工具保存到项目的开发依赖里，使用 --save-dev 选项。

步骤：

1 → 安装包：比如我们的项目需要使用 underscore 提供的功能：

npm install underscore --save

2 → 查看 package.json，它的 dependencies 里面，会出现项目依赖的包的列表，你会看到刚才我们安装的 underscore 。

3 → 查看项目根目录下的 node_modules 目录。为项目安装的包都会放在这个目录的下面。

4 → 查看项目安装的包的列表。

npm list

5 → 安装一个开发项目时依赖的包，比如 gulp 这个工具：

npm install gulp --save-dev

6 → 查看 package.json，它的 devDependencies 里面，会包含项目开发的时候需要的工具，这里你会看到刚才安装的 gulp 这个包。

任务：安装项目所需要的包

项目依赖的包都在 package.json 里面描述清楚了，也就是在 dependencies 还有 devDependencies 里面列出的东西。这样你跟别人分享你的项目的时候，可以删除掉项目下面的 node_modules 目录，别人得到你的项目以后，执行 npm install ，npm 可以根据 package.json 里面的描述，去安装项目需要的所有的包。

步骤：

1 → 删除掉项目根目录下的 node_modules。

rm -rf node_modules

2 → 查看项目根目录下的东西。

ls

3 → 安装项目需要的所有的包。

npm install

4 → 查看项目根目录下面的 node_modules 目录。

ls node_modules

---

Git

—— 项目的版本控制工具

• 任务概述：学习使用 Git 为项目做版本控制
• 相关课程：《Git：版本控制》

TODO：创建一些任务，理解 Git 这个工具。

---

Babel

—— JavaScript 编译工具

• 任务概述：学习使用 Babel。
• 相关课程：《Babel：JavaScript 编译工具》

TODO：创建一些任务，理解 Babel 这个工具。

---

webpack

—— 模块打包工具

• 任务概述：学习使用 Babel。
• 相关课程：《webpack：模块打包》

TODO：创建一些任务，理解 webpack 这个工具。

---

设计页面

—— 学习 html，css，javascript 需要的工具

学会设计静态页面是给未来开发网站与应用打下基础。一个页面会用到 html，css，javascript 这几种语言，准备好一些工具以后，接着我们就可以去学习一下这几门语言。

基础工具

1. 编辑器（Atom）：编辑页面的代码。
2. 浏览器（Chrome）：测试并调试页面的显示与交互。

我准备了一个学习 html，css，javascript 这几门语言用的简单的空白的项目（ninghao-web），里面只提供了一个基本的目录结构，一点资源，还有一个浏览器同步更新的工具。主要的功能就是为学习设计页面创建一个本地的服务器，保存页面代码以后，在浏览器上不需要手动刷新页面就可以显示修改以后的结果。

任务：在本地电脑上安装运行 ninghao-web 项目

步骤：

1 → 克隆仓库到本地

git clone https://github.com/ninghao/ninghao-web.git

2 → 安装项目需要的东西

cd ninghao-web
npm install

3 → 运行开发服务器

npm run watch

4 → 在浏览器里打开

http://localhost:3000

下一步

现在你就可以去学习 html，css，还有 javascript 这几门语言的基础了。

---

ES2015 与 React

—— 学习 ES2015 与 React 需要的工具

任务：在本地电脑上安装运行 ninghao-webpack 项目

步骤：

1 → 克隆仓库到本地

git clone https://github.com/ninghao/ninghao-webpack.git

2 → 安装项目需要的东西

cd ninghao-webpack
npm install

3 → 运行开发服务器

npm run watch

4 → 在浏览器里打开

http://localhost:8080

下一步

学习 ES2015 的新特性，还可以学习使用 React 创建前端应用。