第210天:node、nvm、npm和gulp的安装和使用详解

  1. 云栖社区>
  2. 博客>
  3. 正文

第210天:node、nvm、npm和gulp的安装和使用详解

半指温柔乐 2018-04-01 21:31:00 浏览735
展开阅读全文

一、node

1、什么是node

它不是JS文件,也不是JS框架,而是Server side JavaScript runtime,当服务端的一个JS文件运行时,会被NODE拦截,在NODE中运行JS代码。JSESECMAScript),DOMBOM 组成,目前运行在浏览器内核中,NODE中只能运行ECMAScript,无法使用DOMBOM

NODE就是一个JS运行环境。主要用于开发WEB应用程序开发,很多前端开发的工具都是基于NODE这个平台,所有的工具就相当于一些软件。

2、什么是环境变量

环境变量就是操作系统提供的系统级别用于存储变量的地方,分为系统变量用户变量,系统变量指的是所用当前系统用户共享的变量,自己的电脑一般只有一个用户,建议将自己配置的环境变量放在用户变量中,用户变量比较干净,环境变量的变量名是不区分大小写的,变量间运行相互引用

3windows下用nvm 安装node

如果你已经单独安装了node,建议先卸载。

1. nvm 下载

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

选择第一个 nvm-noinstall.zip ,然后解压在系统盘(一般开发相关的文件我都放C盘,但是放别的盘也是可以的)。我放的目录路径是C:\dev\nvm。解压出来的文件有:
+ elevate.cmd
+ elevate.vbs
+ install.cmd
+ LICENSE
+ nvm.exe

2. nvm 安装

双击 install.cmd ,是以控制台形式显示的,第一下直接按回车,然后会在C盘根目录产生settings.txt,把这个文件放进刚刚解压的那个目录,然后修改settings.txt内容,改成下面那样:

 root: C:\dev\nvm

 path: C:\dev\nodejs

 arch: 64

 proxy: none

 node_mirror: http://npm.taobao.org/mirrors/node/

 npm_mirror: https://npm.taobao.org/mirrors/npm/

但是有些人很不幸,这个方法行不通,因为打开 install.cmd按下回车后,显示拒绝访问注册表路径,并弹出一个settings.txt。这时候,你只要淡定地叉掉那个文本以及控制台,然后在刚刚的目录里新建一个文件settings.txt,最后把上面的内容复制进去就可以了。

 

root nvm的存放地址

path : 存放指向node版本的快捷方式,使用nvm的过程中会自动生成。一般写的时候与nvm同级。

arch : 电脑系统是64位就写64,32位就写32

proxy : 代理

 

3. nvm 配置

以控制台方法执行成功的,在环境变量里会自动配置了 NVM_HOME  NVM_SYMLINK ,这时候只要修改相应的路径就行了。

直接创建settings文件的可以在环境变量用户变量里创建 NVM_HOME  NVM_SYMLINK,并添加路径

NVM_HOME C:\dev\nvm

NVM_SYMLINK C:\dev\nodejs

PATH里加上;%NVM_HOME%;%NVM_SYMLINK%;
一键控制台install的还要检查 环境变量 PATH 上的路径有没有添加C:\dev\nvm以及C:\dev\nodejs,有的话就删掉。

4. 检测安装结果

打开控制台,输入:nvm -v,若是出现版本信息,则安装。若报错,那就重新把步骤再捋一遍。

检查环境变量是否配置成功:可以在控制台输入:set [环境变量名],查看路径是否填写错误

 

5. 使用node

控制台下载 => 输入:nvm install [版本号],下载最新版的可以直接输nvm install latest

下载完成后,在控制台输入:nvm use [版本号]。即使用这个版本号的node了。在use后,上面所说的nodejs文件夹就自动生成了。

 

二、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就可以了。

npm常用操作

https://npmjs.com
安装一个包,npm install package_name
初始化操作,给项目添加一个配置文件,可以用npm init, 如果想使用默认的就用npm init --yes自动生成package.json默认配置。
卸载一个包,npm uninstall package_name

dependencies节点中 
+ –save-dev 
+ 项目依赖分两种,一个就是普通的项目依赖比如bootstrap,还有一

中只是开发阶段需要用的,这种属于开发依赖比如gulp,开发依赖最终

记录在devDependencies节点里面 
+ npm install xxx -g (全局安装包)

 

npm 查看包文件版本

npm view angular versions

三、nrm 的安装

什么是nrm
nrm就是npm registry manager 也就是npm镜像源管理工具,有时候国外资源太慢,那么我们可以用这个来切换镜像源。
我们只要通过这个命令: npm install -g nrm 就可以实现安装。
注意-g可以直接放到install的后面,我们以后也最好这样用,因为这样用,我们可以在cmd中上下箭头切换最近命令的时候,容易修改,更方便操作。安装完成后,我们就可以使用了。

命令:nrm ls 用于展示所有可切换的镜像地址
命令:nrm use cnpm 我们这样就可以直接切换到cnpm上了。当然也可以按照上面罗列的其他内容进行切换。

 

四、bower(web应用程序依赖项管理工具)

官网http://bower.io/
Bower can manage components that contain HTML, CSS, JavaScript, fonts or even image files. Bower doesn’t concatenate or minify code or do anything else - it just installs the right versions of the packages you need and their dependencies.
Bower就是用来管理项目中所有的依赖,主要用于Web页面开发时使用的包管理,比如jquerybootstrap

Bower常用命令

1、初始化一个Bower的配置文件 --- $ bower init

2、安装一个包 --- $ bower install bootstrap

3、GitHub shorthand --- $ bower install desandro/masonry

4、Git endpoint --- $ bower install git://github.com/user/package.git

5、URL --- $ bower install http://example.com/script.js

6、安装一个包并将其添加到配置文件 --- $ bower install bootstrap --save

7、卸载一个包 --- $ bower uninstall bootstrap

8、更新所有的包 --- $ bower update


Bower配置文件

项目根目录

用户主目录


五、gulp

1、什么是gulp?

gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用它,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。
gulp是基于Nodejs的自动任务运行器, 自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。通过本文,我们将学习如何使用Gulp来改变开发流程,从而使开发更加快速高效。
gulp grunt 非常类似,但相比于 grunt 的频繁 IO 操作,gulp 的流操作,能更快地更便捷地完成构建工作。

gulp是引入开发过程中的一些小工具,生产模式不需要gulp

本示例以gulp-less为例(将less编译成cssgulp插件)展示gulp的常规用法,只要我们学会使用一个gulp插件后,其他插件就差看看其帮助文档了。让我们一起来学习gulp吧!

2、首先确保你已经正确安装了NODE环境,然后以全局方式安装gulp

  • npm install -g gulp
    全局安装完gulp后,还需要在每个要使用gulp的项目中单独安装一次,把目录切换到你的项目文件夹中,然后再命令行中执行
  • npm install gulp
    如果想在安装的时候吧gulp写进项目package.json文件的依赖中,则可以加上--save-dev gulp
  • npm install --save-dev gulp
    这样就完成了gulp的安装,接下来就可以在项目中应用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/ 具体使用请看这个网站教程

 

3、在自己的项目目录下再安装一下gulp,并且写进package.json文件中,在项目目录下没有package.json需要先使用npm init --yes 添加package.json,然后在项目目录下shift+鼠标右击在此文件夹下打开命令窗口输入:npm install --save-dev gulp
在项目中打开命令窗口执行npm install,会自动去下载package.json里的依赖包。

gulp常用地址:

gulp官方网址:http://gulpjs.com
gulp插件地址:http://gulpjs.com/plugins
gulp 官方APIhttps://github.com/gulpjs/gulp/blob/master/docs/API.md
gulp 中文APIhttp://www.ydcss.com/archives/424

4新建gulpfile.js文件(重要)


是位于项目根目录的普通js文件

(其实将gulpfile.js放入其他文件夹下亦可)。

它大概是这样一个js文件

(更多插件配置请[查看这里](http://www.ydcss.com/archives/tag/gulp)):

 

gulpfile中写入我们需要做的任务,并且需要安装对应的插件,下面几个是

 

常用插件安装命令

Less编译成css:npm install gulp-less --save-dev

合并:npm install gulp-concat --save-dev

Js混淆:npm install gulp-uglify --save-dev

Css压缩:npm install gulp-cssnano --save-dev

Html压缩:npm install gulp-htmlmin --save-dev

浏览器同步刷新:npm install browser-sync --save-dev

 

5、运行gulp

说明:命令提示符执行gulp 任务名称;

编译less:命令提示符执行gulp testLess;

当执行gulp default或gulp将会调用default任务里的所有任务[‘testLess’,’elseTask’]。

6、在Gulp中使用BrowserSync

BrowserSync可以同时同步刷新多个浏览器,更神奇的是你在一个浏览器中滚动页面、点击按钮、输入框中输入信息等用户行为也会同步到每个浏览器中。

>安装browser-sync模块

 - npm install browser-sync -g

命令行直接使用

 - browser-sync start --server --files "css/*.css"

使用上面命令会开启一个迷你服务器,自动帮你打开浏览器,默认地址localhost:3000,默认打开index.html,如果没有,需要手动加上你要打开的页面,如localhost:3000/test.html。

通常你不会需要默认的地址,所以需要使用代理模式:

 - browser-sync start --proxy "localhost:8080" --files "css/*.css"

网友评论

登录后评论
0/500
评论
半指温柔乐
+ 关注