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

作者: Y了个J | 来源:发表于2017-01-18 23:42 被阅读699次

nvm、node环境搭建前端自动化/npm/gulp
一、Uirecorder之pc录制
webpack小白入门之基础概念【1-1】
vue学习小结（一）-环境配置
Mac 上安装node、npm
node版本管理工具nvm和npm
基于keystoneJS的后台管理系统的部署
『前端工程化』gulp(gulp3 && gul
Gulp
前端打包环境构建

nvm、node安装方式一

使用Homebrew

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

$ 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

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安装方式一使用Homebrew 如果之前通过'brew install node'方式安装过no...
一、Uirecorder之pc录制
一、环境搭建安装NodeJs，npm，nvm（管理Node版本）安装Java环境安装Uirecorder ...
webpack小白入门之基础概念【1-1】
环境搭建：安装Node.js 和 NPM 项目github地址安装`nvm` [https://github.c...
vue学习小结（一）-环境配置
前端编辑器 webStorm Visual Studio Code 开发环境 node.js nvm工具 npm其...
Mac 上安装node、npm
对于前端开发者，node、npm是必备安装环境。目前，最推荐的使用nvm进行node版本管理及对应版本的npm安装...
node版本管理工具nvm和npm
nvm的安装详解 nvm管理node版本，npm管理node包 npm的使用 npm安装和环境变量设置安装npm...
基于keystoneJS的后台管理系统的部署
环境安装： node 环境（node，npm, 建议nvm管理） pm2 安装（npm install -g pm...
『前端工程化』gulp(gulp3 && gul
Gulp 什么是Gulp Gulp是基于Node.js的构建工具，我们使用它来集成前端开发环境，来构建自动化工作流...
Gulp
条件： Node环境（无脑安装）全局安装 gulp npm intall -g gulp (global) ...
前端打包环境构建
前端打包环境搭建 1、安装nvm 2、安装node 3、安装vue 4、安装elementui 5、项目安装 6、...