nvm、node安裝方式一
使用Homebrew
如果之前通過'brew install node'方式安裝過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
說明：$(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來管理安裝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來管理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è)絕對路徑” 先不用管它绝骚，直接回車或者指定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亭引，如果有的話绎速，把他們刪掉，沒有的話更好焙蚓，我們自己來配置纹冤，在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目錄下是沒有nodejs這個(gè)文件夾的求妹，在輸入比如： nvm use 5.11.0 之后，你會(huì)發(fā)現(xiàn)佳窑，C:\dev目錄下多了一個(gè)nodejs文件夾制恍，這個(gè)文件夾不是單純的文件夾，它是一個(gè)快捷方式华嘹，指向了 C:\dev\nvm 里的 v5.11.0 文件夾吧趣。
同樣的咱們可以下載其他版本的nodejs，這樣通過命令: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的包管理工具梨树。我們主要說的就是這一個(gè)。 在每個(gè)版本的nodejs中岖寞，都會(huì)自帶npm抡四，為了統(tǒng)一起見，我們安裝一個(gè)全局的npm工具，這個(gè)操作很有必要指巡，因?yàn)槲覀冃枰惭b一些全局的其他包淑履，不會(huì)因?yàn)榍袚Qnode版本造成原來下載過的包不可用。
首先我們進(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工具，它是中國版的npm鏡像庫葫掉，地址在這里：https://cnpmjs.org/些举，也是npm官方的一個(gè)拷貝，因?yàn)槲覀兒屯饨缬幸欢聣Ω糁蠛瘢杂眠@個(gè)國內(nèi)的比較快户魏，淘寶也弄了一個(gè)和npm一樣的鏡像庫，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í)候國外資源太慢，那么我們可以用這個(gè)來切換鏡像源火焰。
我們只要通過這個(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)上面的問題就
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ā)過程中的一些小工具秃嗜，生產(chǎn)模式不需要gulp
http://www.gulpjs.com.cn/ 具體使用請看這個(gè)網(wǎng)站教程
在自己的項(xiàng)目目錄下再安裝一下gulp,并且寫進(jìn)package.json文件中，在項(xiàng)目目錄下沒有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ù)恋沃，并且需要安裝對應(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ā)
- 不再是簡簡單單的使用HTML+CSS+JavaScript這些簡單的技術(shù)構(gòu)建網(wǎng)頁應(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ā)過程中大量的重復(fù)工作
- 預(yù)處理語言的編譯
- js css html 壓縮混淆
- 圖片體積優(yōu)化
- 除gulp之外還有一些類似的自動(dòng)化工具恕洲，比如grunt
- what how why
Gulp簡介
-
當(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 給前端帶來了一場工業(yè)革命
- http://npm.taobao.org/
- 安裝完成過后可以通過命令行工具node -v
- 安裝nodejs過程會(huì)自動(dòng)安裝npm(node packages manager)
- npm 3 以前的版本文件依賴是層級(jí)依賴
- npm 3 以后依賴關(guān)系改為平行依賴（windows上路徑過長問題）
- gulp本身是node的模塊
- 安裝 gulp 命令行工具
npm install -g gulp- -g 指的是在全局作用域中安裝
- 測試命令 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匹配語法
- 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
