nvm、node环境搭建前端自动化/npm/gulp

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345

推荐阅读更多精彩内容