前端开发环境的安装、搭建及配置

干货( Dry goods？)

• node.js
• brew(just for mac)
• ruby
• npm
• cnpm
• yarn
• git
• webpack
• bower
• browser-sync
• express
• gulp
• grunt
• sass
• vue
• angular
• react
• cutterman(填坑中)
• 待续...

---

node.js

Window

1. 官网下载地址：下载 | Node.js
2. Node.js默认安装目录为 C:\Program Files\nodejs\, 你也可以修改目录

记住，一路都是 next（下一步）

1. 最后install，等安装好
2. 在命令行里： node -v，看是否会出现一个版本号，出现了说明安装成功！
3. 最后还要检查一下环境变量是否配置：我的电脑（此电脑）右键，打开属性
4. 
5. 
6. 

Mac

1. 官网下载地址：下载 | Node.js
2. 双击刚下载的文件，按步骤默认安装就行
3. 
4. 安装完成后打开终端，输入
   npm -v
   node -v
   出现版本信息，说明安装成功。
5. 

---

brew(just for mac)

安装方式，直接在终端里输入：

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

官网地址：Homebrew-macOS 缺失的软件包管理器

ruby

Window

1. 官网下载地址：下载 Ruby
2. 点击 Next，继续向导，记得勾选 Add Ruby executables to your PATH，

直到 Ruby 安装程序完成

1. 
2. 安装完成后， 在命令行输入 ruby -v查看是否安装成功
3. 出现版本号则成功，未出现你可能需要进行环境变量的配置
4. 
5. 
6. 在path里面后面添加 %RUBY_HOME%bin
7. 
8. 

Mac

1. 先安装好XCode，因为它会安装好Unix环境需要的开发包
2. 安装RVM:
   $ curl -L https://get.rvm.io | bash -s stable
   期间可能需要输入密码，等待一段时间将安装好。
3. 
4. 载入rvm（若打开新终端窗口则不用执行）
   $ source ~/.rvm/scripts/rvm
   然后检查是否安装好了
   $ rvm -v
5. 安装Ruby
   列出已知的ruby版本
   $ rvm list known
6. 
7. 选择2.0.0版本进行安装
   $ rvm install 2.0.0
   等待下载(途中需要按回车确定安装路径、还要输入密码)、编译
8. 检查是否安装好了
   $ rvm -v
   $ gem -v

9. 将源替换为淘宝的:

   $ gem source -r https://rubygems.org/
   $ gem source -a https://ruby.taobao.org
   $ gem sources -l  #查看打印是否替换成功

---

npm

Window

1. 新版的 node.js已经集成了 npm，所以之前安装 node时 npm也一并安装好了，
   可以通过输入 "npm -v" 来测试是否成功安装
2. 升级 npm:
   npm install npm -g
   cnpm install npm -g

Mac

1. 升级 npm:
   $ sudo npm install npm -g

---

cnpm

命令行输入：

npm install -g cnpm --registry=https://registry.npm.taobao.org

---

git

Window

1. 官网下载地址：Downloading Git
2. 另一个简单的方法是安装： GitHub for Windows。
   网址为：https://desktop.github.com/

Mac

1. 官网下载地址：https://git-scm.com/download/mac
2. Mac 版本好像在维护，如果下载没开始，请你手动点击。

---

webpack

Window

用npm 安装webpack

npm install webpack -g

Mac
mac下报错的话前面可能需要加sudo获取管理员权限

```
(sudo) npm install -g webpack
```

---

Bower-A package manager for the web

1. 使用npm，打开终端，输入：

   npm install -g bower

2. 官网地址：Bower-A package manager for the web

---

Browser-sync

官网地址：http://www.browsersync.cn/

1. 全局安装 BrowserSync

   npm install -g browser-sync

2. 在您需要构建的项目里安装：

   npm install --save-dev browser-sync

3. 启动 BrowserSync：
   （1） 如果您想要监听.css文件, 您需要使用服务器模式
   BrowserSync 将启动一个小型服务器，并提供一个URL来查看您的网站

      // --files 路径是相对于运行该命令的项目（目录） 
      browser-sync start --server --files "*.css"

   （2）如果您需要监听多个类型的文件，您只需要用逗号隔开。例如我们再加入一个.html文件

   // --files 路径是相对于运行该命令的项目（目录）
   browser-sync start --server --files "*.css, *.html"
   // 如果你的文件层级比较深，您可以考虑使用 **（表示任意目录）匹配，任意目录下任意.css 或.html文件
   browser-sync start --server --files "*.css, *.html"

   （3）外网可以访问（不用连同一个网，wifi）

   browser-sync start --server --files "*.css, *.html" --tunnel

---

Express

1. 全局安装：

   npm install -g express-generator #4.0版本以上需先安装 express-generator
   npm install -g express
   npm install -g [email protected]     #按3.5版本安装就不需要安装 express-generator
   express -V  #验证是否安装成功

2. 安装 Express 并将其保存到依赖列表

   npm install express --save

---

Gulp

1. 官网地址：gulp-用自动化构建工具增强你的工作流程！

2. 全局安装 gulp

   npm install --global gulp

3. 作为项目的开发依赖（devDependencies）安装

   npm install --save-dev gulp

---

Grunt

1. 官网地址：Grunt: JavaScript世界的构建工具

2. 使用grunt，首先必须将grunt-cli安装到全局环境中

   npm install -g grunt-cli

3. 安装grunt

   npm install grunt --save-dev

---

yarn

1. 官网地址：yarn - 一个可能取代npm的新型包管理器
2. 官方下载地址：https://yarn.bootcss.com/docs...

---

sass

1. 官网地址：Sass世界上最成熟、稳定和强大的CSS扩展语言

2. window下安装SASS首先需要安装Ruby

   gem install sass   # mac安装遇到权限问题需加 sudo gem install sass

---

Vue

1. 官网地址：vue - 渐进式JavaScript 框架

2. 安装vue:

   npm install vue

3. Vue.js 官方命令行工具(脚手架)，可用于快速搭建大型单页应用:

   # 全局安装 vue-cli
   npm install --global vue-cli
   # 创建一个基于 webpack 模板的新项目
   vue init webpack my-project
   # 安装依赖
   cd my-project
   npm install
   npm run dev

---

Angular

1. 官网地址：angular - 一套框架，多种平台同时适用手机与桌面

2. 安装 angular:

   npm install angular

3. 安装 angular脚手架：

   npm install -g @angular/cli
   # 生成一个新项目
   ng new my-app
   # 进入项目目录，并启动服务器
   cd my-app
   ng serve --open

---

React

1. 官网地址：React - 一种JAVASCRIPT库，用于构建用户接口

2. 使用 create-react-app（类似一个脚手架工具gongju快速构建 React 开发环境：

   $ cnpm install -g create-react-app
   $ create-react-app my-app
   $ cd my-app/
   $ npm start

---

待续......

---