nvm、node安裝方式一
使用Homebrew
如果之前通過(guò)'brew install node'方式安裝過(guò)node，那么需要先刪除系統(tǒng)中存在的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穩(wěn)定版本
$ nvm ls-remote 查看所有的node可用版本
$ nvm install --lts 安裝穩(wěn)定版node
$ nvm install xxx 下載你想要的版本
$ nvm use xxx 使用指定版本的node
$ nvm alias default xxx 每次啟動(dòng)終端都使用該版本的node
這種方式安裝的在 `/usr/local/Cellar` 目錄下
用brew安裝nvm后需要手動(dòng)去配置環(huán)境變量
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
說(shuō)明：$(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新系統(tǒng)的環(huán)境變量需要配置在~/.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來(lái)管理安裝NodeJS，方便切換不同版本的Node,打開github官網(wǎng)https://github.com/ ，輸入nvm搜索,選擇creationix／nvm，打開,找到Install script，復(fù)制終端輸入
sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash這時(shí)就會(huì)自動(dòng)下載，下載完后會(huì)自動(dòng)Appending source string to /Users/luosa/.bash_profile
或者自己執(zhí)行下export NVM_DIR="/Users/luosa/.nvm"
To verify that nvm has been installed, do:command -v nvm關(guān)閉重啟終端
安裝的node目錄在~/.nvm/versions/node里
下面是直接用安裝包方式安裝node，不需要安裝nvm，不推薦
總結(jié)：蘋果電腦推薦使用安裝方式一進(jìn)行安裝環(huán)境。
NVM其他安裝
1.Windows系統(tǒng)安裝node, 1:msi方式安裝，2：nvm方式安裝
Node根新比較快，不建議使用.msi安裝包安裝，而是使用nvm來(lái)管理node版本，windows 環(huán)境下載地址：https://github.com/coreybutler/nvm-windows/releases ， 我們選擇第一個(gè)：nvm-noinstall.zip 下載完成后解壓到一個(gè)地方，比如: C:\dev\nvm 里面的文件列表是這樣的：elevate.cmd、elevate.vbs、install.cmd、LICENSE、nvm.exe。
雙擊 install.cmd ,win10需要右擊用管理員權(quán)限打開，然后會(huì)讓你輸入”壓縮文件解壓或拷貝到的一個(gè)絕對(duì)路徑” 先不用管它，直接回車或者指定C:\dev\nvm路徑，成功后，會(huì)在C盤的根目錄生成一個(gè)settings.txt的文本文件，把這個(gè)文件剪切到C:\dev\nvm目錄中，然后我們把它的內(nèi)容修改成這樣：（指定路徑的話會(huì)在指定路徑生成settings.txt的文本）
root: C:\dev\nvm
path: C:\dev\nodejs
arch: 64或者32
proxy: none
node_mirror: http://npm.taobao.org/mirrors/node/ //這兩句可以不寫進(jìn)去
npm_mirror: https://npm.taobao.org/mirrors/npm/
然后我們開始配置環(huán)境變量了，因?yàn)閯倓傸c(diǎn)擊了install.cmd的文件，那么會(huì)在環(huán)境變量的系統(tǒng)變量中，生成兩個(gè)環(huán)境變量：NVM_HOME 和 NVM_SYMLINK 我們開始修改這兩個(gè)變量名的變量值：NVM_HOME的變量值為：C:\dev\nvm； NVM_SYMLINK的變量值為：C:\dev\nodejs
我們還會(huì)發(fā)現(xiàn)，在Path中也會(huì)自動(dòng)添加上C:\dev\nvm;或者是C:\dev\nodejs，如果有的話，把他們刪掉，沒(méi)有的話更好，我們自己來(lái)配置，在Path的最前面輸入： ;%NVM_HOME%;%NVM_SYMLINK%;
打開一個(gè)cmd窗口輸入命令：nvm v ，那么我們會(huì)看到當(dāng)前nvm的版本信息。然后我們可以安裝nodejs了。
繼續(xù)輸入命令：nvm install 版本號(hào) 32 (32位系統(tǒng)還是64位) 如果網(wǎng)絡(luò)暢通，我們會(huì)看到正在下載的提示，下載完成后 會(huì)讓你use那個(gè)最新的node版本。
如果你是第一次下載，在use之前，C:\dev目錄下是沒(méi)有nodejs這個(gè)文件夾的，在輸入比如： nvm use 5.11.0 之后，你會(huì)發(fā)現(xiàn)，C:\dev目錄下多了一個(gè)nodejs文件夾，這個(gè)文件夾不是單純的文件夾，它是一個(gè)快捷方式，指向了 C:\dev\nvm 里的 v5.11.0 文件夾。
同樣的咱們可以下載其他版本的nodejs，這樣通過(guò)命令:nvm use 版本號(hào) 比如：nvm use 5.11.0就可以輕松實(shí)現(xiàn)版本切換了。
備注： 如果你的電腦系統(tǒng)是32 位的，那么在下載nodejs版本的時(shí)候，一定要指明 32 如： nvm install 5.11.0 32 這樣在32位的電腦系統(tǒng)中，才可以使用，默認(rèn)是64位的。
npm的安裝
首先 npm是什么？ npm有兩層含義，第一是npm這個(gè)開源的模塊登記和管理系統(tǒng)，也就是這個(gè)站點(diǎn)：https://www.npmjs.com。 第二個(gè)指的是 nodejs package manager 也就是nodejs的包管理工具。我們主要說(shuō)的就是這一個(gè)。 在每個(gè)版本的nodejs中，都會(huì)自帶npm，為了統(tǒng)一起見，我們安裝一個(gè)全局的npm工具，這個(gè)操作很有必要，因?yàn)槲覀冃枰惭b一些全局的其他包，不會(huì)因?yàn)榍袚Qnode版本造成原來(lái)下載過(guò)的包不可用。
首先我們進(jìn)入命令模式，輸入
npm config set prefix C:\dev\nvm\npm`
npm config set cache C:\dev\nvm\npm-cache
回車，這是在配置npm的全局安裝路徑，然后在用戶文件夾下會(huì)生成一個(gè).npmrc的文件，用記事本打開后可以看到如下內(nèi)容：
prefix=C:\Develop\nvm\npm
cache=C:\Develop\nvm\npm-cache
然后繼續(xù)在命令中輸入： npm install npm -g 回車后會(huì)發(fā)現(xiàn)正在下載npm包，在C:\dev\nvm\npm目錄中可以看到下載中的文件，以后我們只要用npm安裝包的時(shí)候加上 -g 就可以把包安裝在我們剛剛配置的全局路徑下了。
我們?yōu)檫@個(gè)npm配置環(huán)境變量： 變量名為：NPM_HOME，變量值為 ：C:\dev\nvm\npm
在Path的最前面添加;%NPM_HOME%，注意了，這個(gè)一定要添加在 %NVM_SYMLINK%之前，所以我們直接把它放到Path的最前面
最后我們新打開一個(gè)命令窗口，輸入npm -v ,此時(shí)我們使用的就是我們統(tǒng)一下載的npm包了。
同樣的我們還可以安裝cnpm工具，它是中國(guó)版的npm鏡像庫(kù)，地址在這里：https://cnpmjs.org/，也是npm官方的一個(gè)拷貝，因?yàn)槲覀兒屯饨缬幸欢聣Ω糁杂眠@個(gè)國(guó)內(nèi)的比較快，淘寶也弄了一個(gè)和npm一樣的鏡像庫(kù)，http://npm.taobao.org/，具體怎么使用可以去這個(gè)網(wǎng)站看使用介紹，它和官方的npm每隔10分鐘同步一次。安裝方式：
npm install -g cnpm --registry=http://r.cnpmjs.org
或者用淘寶的npm install -g cnpm --registry=https://registry.npm.taoba.org
安裝好了cnpm后，直接執(zhí)行cnpm install 包名比如：cnpm install bower -g 就可以了。-g只是為了把包安裝在全局路徑下。如果不全局安裝，也可以在當(dāng)前目錄中安裝，不用-g就可以了。
nrm 的安裝
什么是nrm？
nrm就是npm registry manager 也就是npm的鏡像源管理工具，有時(shí)候國(guó)外資源太慢，那么我們可以用這個(gè)來(lái)切換鏡像源。
我們只要通過(guò)這個(gè)命令: npm install -g nrm 就可以實(shí)現(xiàn)安裝。
注意-g可以直接放到install的后面，我們以后也最好這樣用，因?yàn)檫@樣用，我們可以在cmd中上下箭頭切換最近命令的時(shí)候，容易修改，更方便操作。安裝完成后，我們就可以使用了。
命令：nrm ls 用于展示所有可切換的鏡像地址
命令：nrm use cnpm 我們這樣就可以直接切換到cnpm上了。當(dāng)然也可以按照上面羅列的其他內(nèi)容進(jìn)行切換。
npm常用操作
https://npmjs.com
安裝一個(gè)包，npm install package_name
初始化操作，給項(xiàng)目添加一個(gè)配置文件，可以用npm init, 如果想使用默認(rèn)的就用npm init --yes自動(dòng)生成package.json默認(rèn)配置。
卸載一個(gè)包，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
出現(xiàn)上面的問(wèn)題就
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 commandnpm install -g npm@3
npm -v minimatch
Gulp
http://www.ydcss.com/archives/18 詳細(xì)教程
http://zlwis.me/2016/02/24/%E5%9C%A8gulp%E4%B8%AD%E4%BD%BF%E7%94%A8browsersync/ browsersync使用
gulp是引入開發(fā)過(guò)程中的一些小工具，生產(chǎn)模式不需要gulp
http://www.gulpjs.com.cn/ 具體使用請(qǐng)看這個(gè)網(wǎng)站教程
在自己的項(xiàng)目目錄下再安裝一下gulp,并且寫進(jìn)package.json文件中，在項(xiàng)目目錄下沒(méi)有package.json需要先使用npm init --yes 添加package.json，然后在項(xiàng)目目錄下shit+鼠標(biāo)右擊在此文件夾下打開命令窗口輸入：npm install --save-dev gulp 。
在項(xiàng)目中打開命令窗口執(zhí)行npm install,會(huì)自動(dòng)去下載package.json里的依賴包。
在gulpfile中寫入我們需要做的任務(wù)，并且需要安裝對(duì)應(yīng)的插件，下面幾個(gè)是常用插件
//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
當(dāng)下的前端開發(fā)
- 不再是簡(jiǎn)簡(jiǎn)單單的使用HTML+CSS+JavaScript這些簡(jiǎn)單的技術(shù)構(gòu)建網(wǎng)頁(yè)應(yīng)用程序了
- 我們要提高效率，就必須減少重復(fù)的工作
- 使用less之類預(yù)處理的CSS coffeescript
- 提供開發(fā)階段的便利，開發(fā)階段更快捷
- 現(xiàn)在的開發(fā)行業(yè)優(yōu)質(zhì)的開發(fā)人員是不應(yīng)該將精力放在這些重復(fù)性質(zhì)的工作上
- Gulp就是一種可以自動(dòng)化完成我們開發(fā)過(guò)程中大量的重復(fù)工作
- 預(yù)處理語(yǔ)言的編譯
- js css html 壓縮混淆
- 圖片體積優(yōu)化
- 除gulp之外還有一些類似的自動(dòng)化工具，比如grunt
- what how why
Gulp簡(jiǎn)介
-
當(dāng)下最流行的自動(dòng)化工具
- 自動(dòng)完成一系列重復(fù)的操作
- less → css
- coffeescript → js
- css壓縮
- js混淆
- html壓縮
- img尺寸優(yōu)化
- 。。。。
- 自動(dòng)完成一系列重復(fù)的操作
-
鏈接：
gulp的包既包含工具，也包含一些編程的API
準(zhǔn)備工作
- 安裝Node.js
- Node.js 給前端帶來(lái)了一場(chǎng)工業(yè)革命
- http://npm.taobao.org/
- 安裝完成過(guò)后可以通過(guò)命令行工具node -v
- 安裝nodejs過(guò)程會(huì)自動(dòng)安裝npm(node packages manager)
- npm 3 以前的版本文件依賴是層級(jí)依賴
- npm 3 以后依賴關(guān)系改為平行依賴（windows上路徑過(guò)長(zhǎng)問(wèn)題）
- gulp本身是node的模塊
- 安裝 gulp 命令行工具
npm install -g gulp- -g 指的是在全局作用域中安裝
- 測(cè)試命令 gulp -v
- 初始化 gulp 項(xiàng)目
- 在本地安裝gulp包
- npm install gulp --save
- 創(chuàng)建任務(wù) - gulpfile.js
- gulpfile.js 就是gulp的主文件
基本使用
- 定義一個(gè)任務(wù)
- 復(fù)制單個(gè)文件
- 復(fù)制多個(gè)文件
-
globs匹配語(yǔ)法
- src/*
- src/*/*
- src/**/*
- src/*.jpg
- src/*.{jpg,png}
- 多個(gè)globs
- ['src/*.{jpg,png}','a/a.html']
- 排除某些文件
- !xxxxx
- 默認(rèn)任務(wù)
- gulp 中的任務(wù)名有個(gè)特殊值 default
- 文件監(jiān)視自動(dòng)執(zhí)行任務(wù)
常用插件
- 編譯 Less：gulp-less
- 編譯 Jade: gulp-jade
- 創(chuàng)建本地服務(wù)器：gulp-connect
- 合并文件：gulp-concat
- 最小化 js 文件：gulp-uglify
- 重命名文件：gulp-rename
- 最小化 css 文件：gulp-minify-css
- 壓縮html文件 gulp-minify-html
- 最小化圖像：gulp-imagemin
搭建自己的blog:https://hexo.io/docs/setup.html
