前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、Git/SVN)

一. 各类概念和指令介绍

1. NVM

(1).  全称:Node Version Manager,是一款针对Nodejs的版本管理工具,由于Node的版本很多,很多时候我要需要依赖多个版本,并且要求可以自动切换,这个时候采用NVM来管理Node再合适不过了。

(2). 下载地址:https://github.com/coreybutler/nvm-windows/releases

(3). 常用指令:

  a. 查看已经安装的node版本:    【nvm list】

  b. 更换当前node的版本:          【nvm  use 版本号 】

  c.  安装指定版本的node:          【nvm  install 版本号 】      (nvm install stable   特指安装最新最稳的node版本      nvm install latest  特指下载最新的node版本)

  d.  删除指定版本的node:         【nvm  uninstall 版本号】

  其它指令:

(4). NVM自身版本如何更新:

     NVM总共就5个文件,直接复制到原文件夹下,覆盖即可。

2. Node.JS

  (1). 一个JS的运行环境

  (2). 主要用于开发Web应用程序

  (3). 很多的前端开发工具都是基于node这个平台

  (4). 所用的工具就相当于一些软件

  PS:

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。

    Node.js 的包管理器 npm,是全球最大的开源库生态系统。

    Node.js的版本管理器为nvm。

3. NPM

  NPM(node package manager),是Node.js的包管理器,是全球最大的开源生态库。

  参考地址:  官方网站:https://www.npmjs.com/

淘宝镜像:https://npm.taobao.org/

npm管理包非常方便,我们只需要记住使用哪个包就可以了,类似于.Net平台下的Nuget。

4. CNPM

  cnpm工具,它是中国版的npm镜像库,地址在这里:https://cnpmjs.org/,也是npm官方的一个拷贝,因为我们和外界有一堵墙隔着,所以用这个国内的比较快,淘宝也弄了一个和npm一样的镜像库,http://npm.taobao.org/,它和官方的npm每隔10分钟同步一次。安装方式:

  指令:【npm install -g cnpm --registry=https://registry.npm.taobao.org】

  安装好了cnpm后,直接执行:cnpm install 包名

  比如:cnpm install bower -g 就可以了。-g只是为了把包安装在全局路径下。如果不全局安装,也可以在当前目录中安装,不用-g就可以了。

注意:cnpm的下载路径按照上述指令安装的话,默认就是从taobao的地址下载,和通过nrm切换npm的下载源到taobao,此时npm和cnpm的下载源是相同的,下载速度也是一致的。

5. NRM

  nrm就是npm registry manager 也就是npm的镜像源管理工具,有时候国外资源太慢,那么我们可以用这个来切换下载的镜像源。

我们只要通过这个命令: npm install -g nrm 】就可以实现安装。

注意:-g可以直接放到install的后面,我们以后也最好这样用,因为这样用,我们可以在cmd中上下箭头切换最近命令的时候,容易修改,更方便操作。安装完成后,我们就可以使用了。

  命令:nrm ls 】用于展示所有可切换的镜像地址

  命令:【nrm use taobao】 我们这样就可以直接切换到taobao上了,和上述的cnpm就一致了。当然也可以按照上面罗列的其他内容进行切换。

6. WebPack

  WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。

  Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件。

7. Gulp/Grunt

  Grunt和Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,工具之后可以自动替你完成这些任务。

8. Git/SVN

  代码、文件等版本管理工具。

二. 安装步骤(两套安装方案)

方案一:严格按照顺序进行安装配置

(一). 安装NVM的详细步骤

(1). 在C盘目录下建一个Develop文件夹,该文件用来存放各种与开发相关的配置。

  (2). 在Develop文件夹中新建nvm文件夹,并将下载的nvm五个文件拷贝进去。

下载地址:https://github.com/coreybutler/nvm-windows/releases

   注意:下载免安装版本的,不要下载exe安装程序。

(3). cmd命令测试是否安装成功。

输入指令:【nvm -v 】,  发现并不能用原因是还没有配置环境变量

(4).  配置环境变量

NVM_HOME=C:\Develop\nvm

PATH=%NVM_HOME%;

如图所示:

然后通过命令测试:

 发现:并没有成功,原因是 nvm 的根目录下缺少一个 配置文件setting.txt。

(5). 动态生成配置文件

(有现成的可以直接拷贝进去,这里介绍一种动态生成的方式)。

双击:install.cmd命令,然后把当前路径拷贝进去,点击回车,会自动在当前目录下生成 setting.txt文件。

重新cmd 输入指令【nvm -v】,发现大功告成。

下面我们测试一下nodejs环境,指令【nvm list】,发现并没有安装。

(二). 安装Node.js

(1). 直接输入指令【nvm install latest】,安装最新版本的node。 

特别注意:备注: 如果你的电脑系统是32 位的,那么在下载nodejs版本的时候,一定要指明 32 如:【nvm install 5.11.0 32 】 这样在32位的电脑系统中,才可以使用,默认是64位的。

  这个时候发现一个现象,下载完最新的nodejs版后,自动去下载最新的npm了,这个现象很正常,在每个版本的nodejs中,都会自带npm,为了统一起见,我们安装一个全局的npm工具,这个操作很有必要,因为我们需要安装一些全局的其他包,不会因为切换node版本造成原来下载过的包不可用。

  为了后面演示切换方便,我们这里再安装另外一个node的版本 指令【node install 6.2.0】

   同样的现象,安装完node后,会自动下载该版本的node对应npm包。

 (2). 配置node的环境变量

这里先补充一个知识点:nvm切换node版本的原理,会在nvm的同级目录下生成一个nodejs的快捷方式,当前使用哪个版本的node,该快捷方式就会执行nvm文件夹里的对应版本的node

基于以上原理,配置nodejs环境变量的时候,指向的是该快捷方式,这样无论怎么切换node版本,环境变量都不需要改,都可以直接对应。

A:配置NVM文件夹下的setting.txt配置文件。

B:配置系统环境变量。

  NVM_SYMLINK=C:\Develop\nodejs

  PATH=%NVM_SYMLINK%;

(3) . 查看已经安装的node版本,并选择指定版本来使用。

  查看已经安装的node版本,指令【node list】

  选择8.5.0版本进行使用,指令 【node use 8.5.0】

  再输入该命令之前,观察一个现象,Develop目录下只有nvm一个文件夹。

执行该命令。

 发现Develop目录下多了一个nodejs的快捷方式【正是通过该快捷方式来映射nvm文件夹里对应的node版本,同时node的环境变量也是对应该快捷方式】

  再次查看使用版本【nvm list】,发现8.5.0正在使用中

(三).  设置npm全局的下载路径,并且安装全局的

 我们在前面提到,每安装一个node版本,都会安装与其对应的npm包,在这里我们切换node版本,然后查看对应的npm版本来测试一下。

 既然我们已经装了多个不同版本的npm了(每个版本的node对应一个版本的npm),那么我们为什么还要安装一个全局的npm包呢?

首先我们先补充一个知识:通过npm下载下来的其他程序包都是存放在" node_modules "文件夹下,而每个node下的npm都对应一个" node_modules "文件夹,但我们再实际开发中,通常需要下载一些程序包,这些程序包要是全局的,不能因为切换node版本而导致该程序包不可用

 所以我们下面的思路借助已有的npm,来下载安装一个全局的npm。

 (1). 配置NPM的全局安装路径

 进入cmd命令,输入【 npm config set prefix "C:\Develop\npm" 】回车,这是在配置npm的全局安装路径,然后在用户文件夹下会生成一个.npmrc的文件,用记事本打开后可以看到如下内容:

用记事本打开:并新增全局npm缓存的配置路径,如下图。

(2). 通过命令【npm install  -g npm】,下载全局的npm包   (下载不下来,先放到后面)

(3) . 配置npm的环境变量

NPM_Home=C:\Develop\npm

PATH=%NPM_Home%;

 (4). 安装nrm 

通过命令: 【npm install -g nrm】全局安装nrm

【nrm ls】,展示所有镜像的地址。

切换npm的下载源头。    【nrm use taobao】

重新全局安装npm, 【npm install -g npm】

特别注意:在这里下载完后,无论node版本怎么切换,npm的版本始终是全局的npm的 : 5.4.2版本 

特别注意:通过nrm的指令  【nrm use taobao】,将npm的下载源头切换到taobao,此时实际上和下面要安装cnpm下载是一个道理的,说白了,切换后的npm,就没有必要安装cnpm了。

 这里再补充一种方式,来切换npm的下载路径(可以不用安装nrm)

【 npm config set registry https://registry.npm.taobao.org】,该指令与前面“配置npm的全局安装路径类似”,都是操控的 .npmrc文件。

(四)全局安装cnpm

指令【npm install -g cnpm --registry=https://registry.npm.taoba0.org】

查看安装是否成功【cnpm -v】

方案二. 直接官网下载NodeJS安装包,简单粗暴型

 1. 官网下载Node.js的msi安装包,直接下一步安装。

  下载地址:http://nodejs.cn/

  安装过程非常简单,直接下一步、下一步、一路到底。

  建议:安装路径根据自己的需要适当改一下。

  特别注意:选择安装项的这一步,要不npm和add path(自动配置环境变量),这两个选项给勾上。

  

2. 校验安装成果。

  A: 发现nodejs和npm可以正常使用

    

    B: 发现在用户变量和系统变量的path中各自多了一条记录。

  

  C: 测试全局下载【npm install -g bootstarp】。将下载到该路径下:C:\Users\Administrator\AppData\Roaming\npm\node_modules

3. 该种安装方式总结。

  不利于nodejs的版本管理,无法自动切换或更新nodejs的版本。

  全局下载路径需要自己重新配置,默认的路径,有点坑爹,不好找。

  默认是没有安装nrm或cnpm的,需要自己重新切换下载源,默认是国外的。

最后建议: 生命在于折腾,建议采用方案一的方式进行配置,对每一步的作用做到心中有数。

三. npm或cnpm使用

这里以cnpm的指令来介绍,npm的使用只需将指令中的cnpm改为npm即可。【手动将npm的下载源切换到taobao,实际上和cnpm一样了】

  1. 将npm更新到最新版本:  【npm install -g npm】

  2. 将cnpm更新到最新版本:【cnpm install -g cnpm】

  3. 安装其它程序包:     【cnpm install xxx】    会在当前路径上生成一个"node-modules",并将xx程序下载到该文件夹下。

  eg : 新建一个文件夹,在该文件夹下打开cmd命令,输入指令:  【cnpm install  bootstrap 】

 删除其它程序包:   【cnpm uninstall xxx】

  4. 安装其它程序到全局npm路径下: 【cnpm install -g xx】

   删除其它全局程序包:【cnpm uninstall -g xx】

  5. 补充知识点:项目依赖

  A: 普通项目依赖:

    【npm init】:生成一个package.json文件,用来记录项目需要依赖哪些东西。

  【npm install xx --save】:对应的是 package.json 文件 dependencies,该节点表示发布之后还需要依赖的东西。(eg:JQuery,发布之后,仍然需要依赖JQuery库)

  【npm install xx --save-dev】:对应的是package.json 文件 devDependencies,该节点表示开发阶段需要依赖的东西。(eg:grunt、bable类似的工具类 ,只在开发阶段使用)

                【npm install】:默认还原的是package.json下dependencies和devDependencies两个节点下的所有依赖库。

        B:全局依赖:特指你要安装一个工具包,系统中任何位置都可能用到,这种情况下一版要全局安装。

         指令:【cnpm install -g xx】

6.  全局npm版本更新

 【npm install -g npm】,时间有点长,大约需要两分钟

四. 使用以上配置包,快速配置

  看了上面的方案一的配置步骤,虽然步骤比较详细,但是受网速等一系列因素,对应一个新手而已,没有一两个小时,是很难配置成功的。

  方案二简单粗暴的安装,不便于多版本的控制,不灵活。

  所以这里我将提供我个人的已经下载配置好的程序包供广大网友使用,只需配置环境变量即可,省去了烦人的下载步骤。

  下载地址:http://pan.baidu.com/s/1o8uUMgU

  压缩文件中包括:【Develop文件夹】  【.nmprc文件】

  Develop包括:【nvm 1.1.6】、【nodejs 8.5.0】、【nodejs 6.2.0】、【全局的npm  5.4.2】、【全局的nrm】、【全局的cnpm】

  注意:这里的.npmrc里已经默认把npm的下载源头切换到了国内的taobao了,同cnpm一样了。

快速配置步骤:

  (1). 解压压缩包:将Develop文件夹移动到C盘的根目录,将.nmprc移动到C盘→用户→Administrator(也可能是其他用户名)。

        (2). 配置环境变量

    NVM_HOME=C:\Develop\nvm

    NVM_SYMLINK=C:\Develop\nodejs

    NPM_HOME=C:\Develop\npm          

    PATH=%NVM_HOME%;%NVM_SYMLINK%;%NPM_HOME%

        注意:在配置path的时候,前后注意要有分号。

  (3). 通过指令测试是否成功。(前前后后,分钟足以搞定)

PS: 后台技术系列

那些年我们一起追逐的多线程(Thread、ThreadPool、委托异步调用、Task/TaskFactory、Parallerl、async和await)

ASP.NET MVC深入浅出系列(持续更新)

ORM系列之Entity FrameWork详解(持续更新)

DotNet进阶系列(持续更新)

!

  • 作       者 : Yaopengfei(姚鹏飞)
  • 博客地址 : http://www.cnblogs.com/yaopengfei/
  • 声     明1 : 本人才疏学浅,用郭德纲的话说“我是一个小学生”,如有错误,欢迎讨论,请勿谩骂^_^。
  • 声     明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址,如需代码请留下你的评论,加我QQ:604649488 (备注:评论的博客名)

原文地址:https://www.cnblogs.com/yaopengfei/p/7551647.html

时间: 2024-10-17 20:14:30

前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、Git/SVN)的相关文章

Grunt安装配置教程:前端自动化工作流

Grunt这货是啥? Grunt 是一个基于任务的 JavaScript 项目命令行构建工具. 最近很火的前端自动化小工具,基于任务的命令行构建工具 http://gruntjs.com Grunt能帮我们干啥? 在开始介绍前,先向大家描述下面的场景: [场景1:项目开始前] 先建立一个 projA 的文件夹 再建 html css js images (建5个或以上文件夹,花费1分钟) 拷贝 CSS库(Yui Reset bootstrap)JS库(Requiet.js Seajs jQuer

前端自动化之nvm安装

nvm ——node环境版本控制工具. 1.解压安装包 2.打开setting文件,修改文件内容 root: D:\node\nvm path: D:\node\nodejs arch: 64 proxy: root:当前nvm所在的路径 path:将root路径的nvm改为nodejs arch:64位系统 3.配置环境变量 将第二步的两个路径配置为环境变量. 4.在nvm目录中,shift+右键,此处打开命令窗口 输入: nvm 5.配置完成,命令行操作 nvm ls            

浅谈前端自动化构建

前言 现在的前端开发已经不再仅仅只是静态网页的开发了,日新月异的前端技术已经让前端代码的逻辑和交互效果越来越复杂,更加的不易于管理,模块化开发和预处理框架把项目分成若干个小模块,增加了最后发布的困难,没有一个统一的标准,让前端的项目结构千奇百怪.前端自动化构建在整个项目开发中越来越重要. 我们首先来回想一下之前我们是如何来开始做一个项目的. ① 首先要确定这个项目要使用什么样的技术来实现,然后开始规划我们的项目目录,接着就要往项目增加第三方库依赖,比如: 拷贝 CSS库(Yui Reset |

# 流行框架第一天:构建前端自动化工作流环境

## 兩個問題 ## 学习目标 - 了解什么是Node,什么是NPM:(Node.js) - 掌握Bower的使用: - 熟练使用Less/Sass: - 搭建一个自己的自动化工作流环境: + 自动编译 + 自动合并 + 自动刷新 + 自动部署 - GIT 与 GITHUB + master 托管源文件 + gh-pages 托管部署文件 + 在github搭建自己的blog ## 为什么要有自动化的流程 - 在我们的开发过程中有大量的重复操作 - DRY Don't repeat yourse

前端自动化之神器 — Gulp

Nodejs不仅把Javascript带到了服务端,也在前端掀起了自动化的浪潮,推动了前端工作的历史性巨变,今天和大家一起学习前端自动化的神器---Gulp; 说起自动化,自然少不了Grunt,这位前辈目前社区完善,拥有几千个现成插件,install下来参考文档即可配置使用(参见:前端自动化之利剑——Grunt):而Gulp的出现,希望取其精华并取代Grunt,成为最流行的Javascript构建工具,Gulp采用代码优于配置的策略,让简单的事继续简单,让复杂的事变得可管理: 与Grunt的不同

前端自动化工具 -- gulp 使用简介

gulp是基于流的前端自动化构建工具. 之前也谈到了 grunt的用法,grunt其实就是配置+配置的形式. 而gulp呢,是基于stream流的形式,也就是前一个函数(工厂)制造出结果,提供后者使用. 同样的,也是包括基本用法和各插件的使用. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到某一工程目录下 跟grunt一般,也是需要package.json包依赖文件和一个入口文件 g

前端自动化开发工作流

1. 前端自动化工作流简介 每种项目都有自己特定的开发流程.工作流程.从需求分析.设计.编码.测试.发布,一个整个开发流程中,会根据不同的情况形成自己独特的步骤和流程.一个工作流的过程不是一开始就固定的,而是随着项目的深入而不断地改进,期间甚至会形成一些工具.例如当年大神们在Linux写C语言,觉得每次编译好多文件好麻烦,就发明了makefile.不同代码的管理好麻烦,然后就发明了git.SVN等等. 一个工作流程的好坏会影响你开发的效率.开发的流程程度,然后间接影响心情,打击编码积极性.所以我

前端自动化构建工具——gulp

gulp是基于流的前端自动化构建工具. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到某一工程目录下 跟grunt一般,也是需要package.json包依赖文件和一个入口文件 gulpfile.js(其他名字识别不了) 然后就类似的先装上gulp npm install gulp --save-dev 最基本的使用方式是这样:(使用jshint插件校验js代码) var jshin

前端自动化构建工具-yoman浅谈

如今随着前端技术的飞速发展,前端项目也变得越来越复杂.快速的搭建一个集成多种工具和框架的复杂前端项目也越来越成为一种需求.当然如果你要自己从0开始完全自己diy,绝对可以,只不过需要耗费一些不少的时间.既然如此要是有自动化的项目构建工具,帮你生成各种必须的配置项,你只需愉快的写代码该多方便呀.嗯,是的这样的工具或者说脚手架确实是有的,就是下面要提到的eoman.来吧,一起看一下如何使用这个工具让你的项目秒建吧. 初识yeoman yeoman是什么 yeoman是Google领头开发的一个前端构