NODE环境(Windows系统)nvm npm bower gulp git

1、什么是node?

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

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

2、什么是环境变量

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

特殊值:

-1, PATH变量(不区分大小写), PATH 相当于一个路径的引用,只要添加到PATH变量中的路径,都可以在任何目录下搜索

-,2,命令行,可以用来执行当前目录下的文件

Node.js是一个轻内核(本身没有什么功能)的东东,所有的功能都要功能包提供 node官方提供了一些最基础的包。

3、NVM(Node Version Manager)

NODE两种安装方式:
1:msi方式安装,
2:nvm方式安装

因为Node更新比较快,不建议使用.msi安装包安装,而是使用nvm来管理node版本,方便切换、使用不同版本的NODE。

windows 环境下载地址:https://github.com/coreybutler/nvm-windows/releases, 我们选择第一个:nvm-noinstall.zip 下载完成后解压到一个地方,比如: C:\develop\nvm 里面的文件列表是这样的:elevate.cmd、elevate.vbs、install.cmd、LICENSE、nvm.exe。然后完成以下操作:

1,双击 install.cmd ,(win10需要右击用管理员权限打开),然后会让你输入”压缩文件解压或拷贝到的一个绝对路径” ,输入C:\develop\nvm路径,此时弹出一个记事本窗口,修改里面的内容,如下

root: C:\develop\nvm
path: C:\develop\nodejs(注意中间没有点)
arch: 64(默认是64位)
proxy: none

2,我们开始配置环境变量了,因为刚刚点击了install.cmd的文件,那么会在环境变量的系统变量中,生成两个环境变量:NVM_HOME 和 NVM_SYMLINK 。我们将这两个环境变量删掉。我们还会发现,在Path中也会自动添加上C:\dev\nvm;或者是C:\dev\nodejs,如果有的话,把他们删掉,没有的话更好。

3,在用户变量中新建三个环境变量,分别为:

NVM_HOME=C:\dev\nvm
NVM_SYMLINK=C:\dev\nodejs
Path=%NVM_HOME%;%NVM_SYMLINK%

4,打开一个cmd窗口
输入命令:nvm ,那么我们会看到当前关于nvm的所有信息。
输入命令:nvm ls ,打印出电脑上已经安装过的几个NODE的版本
输入命令:nvm use 版本号 /32
继续输入命令:nvm install (默认是64位) 如果网络畅通,我们会看到正在下载的提示,下载完成后 会让你use那个最新的node版本。
输入命令:node -v,打印正在使用的NODE版本号

4、npm(Node Package Manager)

在每个版本的nodejs中,都会自带npm,为了统一起见,我们安装一个全局的npm工具,这个操作很有必要,因为我们需要安装一些全局的其他包,不会因为切换node版本造成原来下载过的包不可用。
1、我们进入命令模式,输入 npm config set prefix "C:\develop\nvm\npm" 回车,这是在配置npm的全局安装路径,然后在用户文件夹下会生成一个.npmrc的文件(或者手动在用户目录下建一个这个文件),用记事本打开,其内容要与下面一致:

cache=C:\develop\nvm\npm-cache
prefix=C:\develop\nvm\npm

2、继续在命令中输入: npm install npm -g 回车后会发现正在下载npm包,在C:\develop\nvm\npm目录中可以看到下载中的文件,以后我们只要用npm安装包的时候加上 -g(global) 就可以把包安装在我们刚刚配置的全局路径下了。
3、为这个npm配置环境变量:在用户变量中添加

变量名为:NPM_HOME,
变量值为 :C:\dev\nvm\npm
在Path的最前面添加;%NPM_HOME%,(注意了,这个一定要添加在 %NVM_SYMLINK%之前,所以我们直接把它放到Path的最前面)

4、最后我们新打开一个命令窗口,输入npm -v ,此时我们使用的就是我们统一下载的npm包了。

4.1 npm常用操作

官网https://npmjs.com

  • 安装一个包,npm install package_name
    • 安装一个包到项目本地,必须要联网
    • 安装完成过后项目根目录下会多一个node_modules文件夹,所有的下载下来的包全部在里面
  • 初始化操作,npm init
    • 给项目添加一个配置文件,生成package.json默认配置。
  • 添加项目依赖,npm install package_name --save/--save-dev
    • 项目依赖分两种,一个就是普通的项目依赖比如bootstrap,
    • 还用一种只是开发阶段需要用的,这种属于开发依赖比如gulp,
    • 开发依赖最终记录在package.json配置文件devDependencies节点里面
      为什么要保存至package.json?因为node插件包相对来说非常庞大,所以不加入版本管理,将配置信息写入package.json并将其加入版本管理,其他开发者对应下载即可
--save就是将我们安装的包名字和包版本记录到配置文件中的dependencies节点中

卸载一个包,npm uninstall package_name --save

  • npm install xxx -g(全局安装包)
    • 如果你安装的是一个工具,工具要在每一个地方都能用,这种情况下一般全局安装。

5、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页面开发时使用的包管理,比如jquery,bootstrap

  • Bower常用命令
$ # 初始化一个Bower的配置文件
$ bower init
$ # 安装一个包
$ bower install bootstrap
$ # GitHub shorthand
$ bower install desandro/masonry
$ # Git endpoint
$ bower install git://github.com/user/package.git
$ # URL
$ bower install http://example.com/script.js
$ # 安装一个包并将其添加到配置文件
$ bower install bootstrap --save
$ # 卸载一个包
$ bower uninstall bootstrap
$ # 更新所有的包
$ bower update
  • Bower配置文件
    • 项目根目录
    • 用户主目录

6、gulp

6.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编译成css的gulp插件)展示gulp的常规用法,只要我们学会使用一个gulp插件后,其他插件就差看看其帮助文档了。让我们一起来学习gulp吧! _

6.2 gulp的全局安装

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

  • npm install -g gulp
    全局安装完gulp后,还需要在每个要使用gulp的项目中单独安装一次,把目录切换到你的项目文件夹中,然后再命令行中执行
  • npm install gulp
    如果想在安装的时候吧gulp写进项目package.json文件的依赖中,则可以加上--save-dev gulp
  • npm install --save-dev gulp
    这样就完成了gulp的安装,接下来就可以在项目中应用gulp了
gulp常用地址:

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

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

新建gulpfile.js文件(重要)

说明:gulpfile.js是gulp项目的配置文件,
是位于项目根目录的普通js文件
(其实将gulpfile.js放入其他文件夹下亦可)。
它大概是这样一个js文件
(更多插件配置请查看这里

在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

运行gulp

说明:命令提示符执行gulp 任务名称;
编译less:命令提示符执行gulp testLess;
当执行gulp default或gulp将会调用default任务里的所有任务[‘testLess’,’elseTask’]。

6.3在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"

7、git

7.1什么是GIT

它是一个源代码管理工具,在一个项目中,凡是由开发人员编写的都算是源代码,源代码有必要管理起来,让源代码可以被追溯,主要记录每次变更了什么,谁主导这次变化。人为的维护比较麻烦,GIT是Linux之父当年为了维护管理Linux的源代码写的一个工具
Git 之前 很多使用 svn vss tfs hs ......

官网 https://guides.github.com/

7.2安装GIT

在Windows上安装Git

下载地址https://git-for-windows.github.io

然后按默认选项安装即可。

  • 创建项目目录
    cd 当前项目目录
git init // 初始化一个本地的仓库

就是在本地文件夹中添加了一个.git的文件夹用于记录所有的项目变更信息

  • 查看本地仓储的变更状态
git status

用于查看本地仓储的状态
第一次查看,显示的是一坨没有被跟踪的文件

git status -s // -s 是输出简要的变更日志

  • 添加本地暂存(托管)文件
git add --all / git add .

所有添加跟踪

类似于node_modules这种性质的文件是不应该被跟踪

  • 添加本地GIT忽略清单文件
在代码库文件夹的根目录添加一个.gitignore文件

此文件用于说明忽略的文件有哪些

  • 提交被托管的文件变化到本地仓储
git commit -m '需要说明的信息如:第一次提交'

将本地的变化提交的本地的仓库文件夹归档
一般在有了一个小单元的整体变化后再提交

  • 对比差异
git diff

可以用于对比当前状态和版本库中状态的变化

  • 提交日志
git log

可以查看提交日志

  • 回归到指定版本
git reset --hard
  • 为仓储添加远端(服务器端)地址

  • 将本地仓储的提交记录推送到远端的master分支

  • 拉取远端master分支的更新记录到本地

  • 回归到指定版本

安装完成后,在开始菜单里找到“Git”->“Git Bash”,蹦出一个类似命令行窗口的东西,就说明Git安装成功!

安装完成后,还需要最后一步设置,在命令行输入:

$ git config --global user.name "Your Name"
$ git config --global user.email "email@example.com"

因为Git是分布式版本控制系统,所以,每个机器都必须自报家门:你的名字和Email地址。你也许会担心,如果有人故意冒充别人怎么办?这个不必担心,首先我们相信大家都是善良无知的群众,其次,真的有冒充的也是有办法可查的。

注意git config命令的--global参数,用了这个参数,表示你这台机器上所有的Git仓库都会使用这个配置,当然也可以对某个仓库指定不同的用户名和Email地址。

生成一个新的SSH密钥

打开 Git Bash,输入如下命令,然后连续按三个回车即可,

ssh-keygen -t rsa -C "your_email@example.com"

将SSH公钥添加到GitHub账户,复制SSH公钥的完整内容(/C/Users/Administrator/.ssh/id_rsa.pub)进入GitHub添加进去。

测试连接

打开 Git Bash 输入:

ssh -T git@github.com

在项目目录下(第一次提交代码)

git init git add --all
git commit -m "第一次提交"
git remote add origin https://github.com/jilanlan/node-demo.git
git push -u origin master

如果执行git remote add origin https://github.com/Flowerowl/stumansys.git, 出现错误:fatal: remote origin already exists 则执行以下语句:git remote rm origin 再往后执行git remote add origin https://github.com/Flowerowl/stumansys.git 即可。

在执行git push origin master时,报错:error:failed to push som refs to.......则执行以下语句:git pull origin master 先把远程服务器github上面的文件拉先来,再push 上去。

提交完代码后,我们可以在线编辑README文件,然后我们拉取到本地,

git pull origin master

拉取完后本地就和线上内容同步了。

安装教程http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00137396287703354d8c6c01c904c7d9ff056ae23da865a000/

8、github

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

推荐阅读更多精彩内容

  • nvm、node安装方式一 使用Homebrew 如果之前通过'brew install node'方式安装过no...
    Y了个J阅读 3,564评论 0 3
  • npm是什么 NPM的全称是Node Package Manager,是随同NodeJS一起安装的包管理和分发工具...
    build1024阅读 7,851评论 0 9
  • 什么是 NPM npm之于Node,就像pip之于Python,gem之于Ruby,composer之于PHP。 ...
    ihoey阅读 6,246评论 2 36
  • 安装Gulp首先需要安装Node.js,并在控制台输入$ npm install gulp -gMac端需要写成$...
    LaBaby_阅读 906评论 0 1
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    依依玖玥阅读 3,147评论 7 55