nvm、node安裝方式一

使用Homebrew

如果之前通過'brew install node'方式安裝過node，那么需要先刪除系統中存在的node：
brew remove --force node
sudo rm -r /usr/local/lib/node_modules
sudo rm -r /usr/local/include/node

$ brew uninstall nvm
$ brew install nvm
$ nvm ls-remote --lts  查看所有的node穩定版本
$ nvm ls-remote 查看所有的node可用版本
$ nvm install --lts  安裝穩定版node
$ nvm install xxx 下載你想要的版本
$ nvm use xxx 使用指定版本的node 
$ nvm alias default xxx 每次啟動終端都使用該版本的node 
這種方式安裝的在  `/usr/local/Cellar` 目錄下

用brew安裝nvm后需要手動去配置環境變量

屏幕快照 2017-06-27 下午4.02.31.png

    You should create NVM's working directory if it doesn't exist:
    $ mkdir ~/.nvm
    Add the following to ~/.bash_profile or your desired shell configuration file:
    $ vim ~/.bash_profile 
    在里面添加下面兩句
    export NVM_DIR=~/.nvm
    source $(brew --prefix nvm)/nvm.sh
    說明：$(brew --prefix nvm)就是nvm目錄路徑
    按ESC輸入:wq退出
    $ source ~/.bash_profile 

    或者照著終端提示添加
export NVM_DIR="$HOME/.nvm"
  . "/usr/local/opt/nvm/nvm.sh"

按ESC輸入:wq退出
    $ source ~/.bash_profile

mac新系統的環境變量需要配置在~/.zshrc 文件里，不再是~/.bash_profile

Please note that upstream has asked us to make explicit managing
nvm via Homebrew is unsupported by them and you should check any
problems against the standard nvm install method prior to reporting.

You should create NVM's working directory if it doesn't exist:

  mkdir ~/.nvm

Add the following to ~/.zshrc or your desired shell
configuration file:

  export NVM_DIR="$HOME/.nvm"
  [ -s "/usr/local/opt/nvm/nvm.sh" ] && \. "/usr/local/opt/nvm/nvm.sh"  # This loads nvm
  [ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && \. "/usr/local/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion

You can set $NVM_DIR to any location, but leaving it unchanged from
/usr/local/opt/nvm will destroy any nvm-installed Node installations
upon upgrade/reinstall.

Type `nvm help` for further information.
==> Summary
??  /usr/local/Cellar/nvm/0.39.1_1: 9 files, 184.1KB
==> Running `brew cleanup nvm`...
Disable this behaviour by setting HOMEBREW_NO_INSTALL_CLEANUP.
Hide these hints with HOMEBREW_NO_ENV_HINTS (see `man brew`).

nvm、node安裝方式二

推薦使用nvm來管理安裝NodeJS，方便切換不同版本的Node,打開github官網https://github.com/ ，輸入nvm搜索,選擇creationix／nvm，打開,找到Install script，復制終端輸入sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash 這時就會自動下載，下載完后會自動Appending source string to /Users/luosa/.bash_profile
或者自己執行下 export NVM_DIR="/Users/luosa/.nvm"
To verify that nvm has been installed, do: command -v nvm 關閉重啟終端
安裝的node目錄在 ~/.nvm/versions/node 里

下面是直接用安裝包方式安裝node，不需要安裝nvm，不推薦

nodejs.png

總結：蘋果電腦推薦使用安裝方式一進行安裝環境。

NVM其他安裝

1.Windows系統安裝node, 1:msi方式安裝，2：nvm方式安裝
Node根新比較快，不建議使用.msi安裝包安裝，而是使用nvm來管理node版本，windows 環境下載地址：https://github.com/coreybutler/nvm-windows/releases ，我們選擇第一個：nvm-noinstall.zip 下載完成后解壓到一個地方，比如: C:\dev\nvm 里面的文件列表是這樣的：elevate.cmd、elevate.vbs、install.cmd、LICENSE、nvm.exe。

雙擊 install.cmd ,win10需要右擊用管理員權限打開，然后會讓你輸入”壓縮文件解壓或拷貝到的一個絕對路徑” 先不用管它，直接回車或者指定C:\dev\nvm路徑，成功后，會在C盤的根目錄生成一個settings.txt的文本文件，把這個文件剪切到C:\dev\nvm目錄中，然后我們把它的內容修改成這樣：（指定路徑的話會在指定路徑生成settings.txt的文本）

root: C:\dev\nvm
path: C:\dev\nodejs
arch: 64或者32
proxy: none
node_mirror: http://npm.taobao.org/mirrors/node/ //這兩句可以不寫進去
npm_mirror: https://npm.taobao.org/mirrors/npm/

然后我們開始配置環境變量了，因為剛剛點擊了install.cmd的文件，那么會在環境變量的系統變量中，生成兩個環境變量：NVM_HOME 和 NVM_SYMLINK 我們開始修改這兩個變量名的變量值：NVM_HOME的變量值為：C:\dev\nvm； NVM_SYMLINK的變量值為：C:\dev\nodejs

我們還會發現，在Path中也會自動添加上C:\dev\nvm;或者是C:\dev\nodejs，如果有的話，把他們刪掉，沒有的話更好，我們自己來配置，在Path的最前面輸入： ;%NVM_HOME%;%NVM_SYMLINK%;

打開一個cmd窗口輸入命令：nvm v ，那么我們會看到當前nvm的版本信息。然后我們可以安裝nodejs了。

繼續輸入命令：nvm install 版本號 32 (32位系統還是64位) 如果網絡暢通，我們會看到正在下載的提示，下載完成后會讓你use那個最新的node版本。

如果你是第一次下載，在use之前，C:\dev目錄下是沒有nodejs這個文件夾的，在輸入比如： nvm use 5.11.0 之后，你會發現，C:\dev目錄下多了一個nodejs文件夾，這個文件夾不是單純的文件夾，它是一個快捷方式，指向了 C:\dev\nvm 里的 v5.11.0 文件夾。

同樣的咱們可以下載其他版本的nodejs，這樣通過命令:nvm use 版本號比如：nvm use 5.11.0就可以輕松實現版本切換了。

備注：如果你的電腦系統是32 位的，那么在下載nodejs版本的時候，一定要指明 32 如： nvm install 5.11.0 32 這樣在32位的電腦系統中，才可以使用，默認是64位的。

npm的安裝

首先 npm是什么？ npm有兩層含義，第一是npm這個開源的模塊登記和管理系統，也就是這個站點：https://www.npmjs.com。第二個指的是 nodejs package manager 也就是nodejs的包管理工具。我們主要說的就是這一個。在每個版本的nodejs中，都會自帶npm，為了統一起見，我們安裝一個全局的npm工具，這個操作很有必要，因為我們需要安裝一些全局的其他包，不會因為切換node版本造成原來下載過的包不可用。

首先我們進入命令模式，輸入

npm config set prefix C:\dev\nvm\npm`
npm config set cache C:\dev\nvm\npm-cache

回車，這是在配置npm的全局安裝路徑，然后在用戶文件夾下會生成一個.npmrc的文件，用記事本打開后可以看到如下內容：

prefix=C:\Develop\nvm\npm
cache=C:\Develop\nvm\npm-cache

然后繼續在命令中輸入： npm install npm -g 回車后會發現正在下載npm包，在C:\dev\nvm\npm目錄中可以看到下載中的文件，以后我們只要用npm安裝包的時候加上 -g 就可以把包安裝在我們剛剛配置的全局路徑下了。

我們為這個npm配置環境變量：變量名為：NPM_HOME，變量值為：C:\dev\nvm\npm

在Path的最前面添加;%NPM_HOME%，注意了，這個一定要添加在 %NVM_SYMLINK%之前，所以我們直接把它放到Path的最前面

最后我們新打開一個命令窗口，輸入npm -v ,此時我們使用的就是我們統一下載的npm包了。

同樣的我們還可以安裝cnpm工具，它是中國版的npm鏡像庫，地址在這里：https://cnpmjs.org/，也是npm官方的一個拷貝，因為我們和外界有一堵墻隔著，所以用這個國內的比較快，淘寶也弄了一個和npm一樣的鏡像庫，http://npm.taobao.org/，具體怎么使用可以去這個網站看使用介紹，它和官方的npm每隔10分鐘同步一次。安裝方式：

npm install -g cnpm --registry=http://r.cnpmjs.org
或者用淘寶的npm install -g cnpm --registry=https://registry.npm.taoba.org
安裝好了cnpm后，直接執行cnpm install 包名比如：cnpm install bower -g 就可以了。-g只是為了把包安裝在全局路徑下。如果不全局安裝，也可以在當前目錄中安裝，不用-g就可以了。

nrm 的安裝

什么是nrm？
nrm就是npm registry manager 也就是npm的鏡像源管理工具，有時候國外資源太慢，那么我們可以用這個來切換鏡像源。
我們只要通過這個命令: npm install -g nrm 就可以實現安裝。
注意-g可以直接放到install的后面，我們以后也最好這樣用，因為這樣用，我們可以在cmd中上下箭頭切換最近命令的時候，容易修改，更方便操作。安裝完成后，我們就可以使用了。

命令：nrm ls 用于展示所有可切換的鏡像地址
命令：nrm use cnpm 我們這樣就可以直接切換到cnpm上了。當然也可以按照上面羅列的其他內容進行切換。

npm常用操作

https://npmjs.com
安裝一個包，npm install package_name
初始化操作，給項目添加一個配置文件，可以用npm init, 如果想使用默認的就用npm init --yes自動生成package.json默認配置。
卸載一個包，npm uninstall package_name

npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
出現上面的問題就
npm update minimatch
npm update -g minimatch@3.0.2
npm install -g npm@3
npm -v minimatch
If the version is still old one Run this command npm install -g npm@3
npm -v minimatch

Gulp

http://www.ydcss.com/archives/18 詳細教程
http://zlwis.me/2016/02/24/%E5%9C%A8gulp%E4%B8%AD%E4%BD%BF%E7%94%A8browsersync/ browsersync使用
gulp是引入開發過程中的一些小工具，生產模式不需要gulp
http://www.gulpjs.com.cn/ 具體使用請看這個網站教程

1484971515(1).png

在自己的項目目錄下再安裝一下gulp,并且寫進package.json文件中，在項目目錄下沒有package.json需要先使用npm init --yes 添加package.json，然后在項目目錄下shit+鼠標右擊在此文件夾下打開命令窗口輸入：npm install --save-dev gulp 。
在項目中打開命令窗口執行npm install,會自動去下載package.json里的依賴包。

1484969491.png

在gulpfile中寫入我們需要做的任務，并且需要安裝對應的插件，下面幾個是常用插件

//npm install gulp-less --save-dev
//npm install gulp-concat --save-dev
//npm install gulp-uglify --save-dev
//npm install gulp-cssnano --save-dev
//npm install gulp-htmlmin --save-dev
//npm install browser-sync --save-dev

當下的前端開發

不再是簡簡單單的使用HTML+CSS+JavaScript這些簡單的技術構建網頁應用程序了
我們要提高效率，就必須減少重復的工作
使用less之類預處理的CSS coffeescript
提供開發階段的便利，開發階段更快捷
現在的開發行業優質的開發人員是不應該將精力放在這些重復性質的工作上
Gulp就是一種可以自動化完成我們開發過程中大量的重復工作
- 預處理語言的編譯
- js css html 壓縮混淆
- 圖片體積優化
除gulp之外還有一些類似的自動化工具，比如grunt
what how why

Gulp簡介

當下最流行的自動化工具
- 自動完成一系列重復的操作
  - less → css
  - coffeescript → js
  - css壓縮
  - js混淆
  - html壓縮
  - img尺寸優化
  - 。。。。
鏈接：
- 官網
- 中文網
gulp的包既包含工具，也包含一些編程的API

準備工作

安裝Node.js
- Node.js 給前端帶來了一場工業革命
- http://npm.taobao.org/
- 安裝完成過后可以通過命令行工具node -v
- 安裝nodejs過程會自動安裝npm(node packages manager)
- npm 3 以前的版本文件依賴是層級依賴
- npm 3 以后依賴關系改為平行依賴（windows上路徑過長問題）
- gulp本身是node的模塊
安裝 gulp 命令行工具
- npm install -g gulp
- -g 指的是在全局作用域中安裝
- 測試命令 gulp -v
初始化 gulp 項目
- 在本地安裝gulp包
- npm install gulp --save
創建任務 - gulpfile.js
- gulpfile.js 就是gulp的主文件

基本使用

定義一個任務
復制單個文件
復制多個文件
globs匹配語法
- src/*
- src/*/*
- src/**/*
- src/*.jpg
- src/*.{jpg,png}
- 多個globs
  - ['src/*.{jpg,png}','a/a.html']
排除某些文件
- !xxxxx
默認任務
- gulp 中的任務名有個特殊值 default
文件監視自動執行任務

搭建自己的blog:https://hexo.io/docs/setup.html

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

nvm、node環境搭建前端自動化/npm/gulp

nvm、node環境搭建前端自動化/npm/gulp

nvm、node安裝方式一

nvm、node安裝方式二

NVM其他安裝

npm的安裝

nrm 的安裝

npm常用操作

Gulp

當下的前端開發

Gulp簡介

準備工作

基本使用

常用插件

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

nvm、node環境搭建前端自動化/npm/gulp

nvm、node安裝方式一

nvm、node安裝方式二

NVM其他安裝

npm的安裝

nrm 的安裝

npm常用操作

Gulp

當下的前端開發

Gulp簡介

準備工作

基本使用

常用插件

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

nvm、node環境搭建前端自動化/npm/gulp

nvm、node安裝方式一

nvm、node安裝方式二