zoukankan      html  css  js  c++  java
  • 第210天:node、nvm、npm和gulp的安装和使用详解

    一、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 vm。解压出来的文件有:
      + elevate.cmd
      + elevate.vbs
      + install.cmd
      + LICENSE
      + nvm.exe

    2. nvm 安装

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

     root: C:dev vm

     path: C:dev odejs

     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 vm

    NVM_SYMLINK C:dev odejs

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

    4. 检测安装结果

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

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

    5. 使用node

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

    下载完成后,在控制台输入:nvm use v11.6.0。即使用这个版本号的node了。在use后,在C:Program Files下会自动生成nodejs文件夹。

    二、npm的安装

    首先 npm是什么?

    npm有两层含义

    第一是npm这个开源的模块登记和管理系统,也就是这个站点:https://www.npmjs.com

    第二个指的是 nodejs package manager 也就是nodejs包管理工具。我们主要说的就是这一个。 在每个版本的nodejs中,都会自带npm,为了统一起见,我们安装一个全局的npm工具,这个操作很有必要,因为我们需要安装一些全局的其他包,不会因为切换node版本造成原来下载过的包不可用。

    首先我们进入上面生成的nodejs文件夹中,打开cmd窗口,输入
    npm config set prefix C:dev vm pm`

    npm config set cache C:dev vm pm-cache

    回车,这是在配置npm的全局安装路径,然后在用户文件夹下会生成一个.npmrc的文件,用记事本打开后可以看到如下内容:

    prefix=C:dev vm pm

    cache=C:dev vm pm-cache

    然后继续在命令中输入: npm install npm -g 回车后会发现正在下载npm包,在C:dev vm pm目录中可以看到下载中的文件,以后我们只要用npm安装包的时候加上 -g 就可以把包安装在我们刚刚配置的全局路径下了。

    我们为这个npm配置环境变量: 变量名为:NPM_HOME,变量值为 C:dev vm pm

    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"

  • 相关阅读:
    数据类型装换
    变量及数据类型
    27 网络通信协议 udp tcp
    26 socket简单操作
    26 socket简单操作
    14 内置函数 递归 二分法查找
    15 装饰器 开闭原则 代参装饰器 多个装饰器同一函数应用
    12 生成器和生成器函数以及各种推导式
    13 内置函数 匿名函数 eval,exec,compile
    10 函数进阶 动态传参 作用域和名称空间 函数的嵌套 全局变量
  • 原文地址:https://www.cnblogs.com/le220/p/8670349.html
Copyright © 2011-2022 走看看