3.1 什么是第三方模块
别人写好的、具有特定功能的、我们能直接使用的模块即第三方模块,由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中,所以又名包。
第三方模块有两种存在形式
以js文件的形式存在,提供实现项目具体功能的API接口
以命令行工具形式存在,辅助项目开发
3.2 获取第三方模块
npmjs.com:第三方模块的存储和分发仓库
npm(node package manager):node的第三方模块管理工具(每个node开发者都需要使用所以不需要安装,在node安装好的时候就存在了)
下载:npm install 模块名称 如:
下载需要联网,在下载过程中只要没有看见红色的错误,下载就是成功的。
文件下载位置为:当前命令行工作目录下,会自行创建一个node_modules文件,下载的第三方模块会储存到里面
卸载:npm unintall package 模块名称
安装第三方模块的时候还分为,本地安装(将模块下载到当前的项目当中供当前模块使用)和全局安装(将模块安装到一个公共区域当中所有项目都可以使用该模块),以上操作属于本地安装
通常情况下:
命令行工具:全局安装;
库文件:本地安装;
3.3 第三方模块 nodemon
nodemon是一个命令行工具,用以辅助项目开发。
在Node.js中,每次修改文件都要在命令行工具中重新执行该文件,非常繁琐。
使用步骤
1.使用npm install nodemon -g下载它
-g代表全局安装
2.在命令行工具中用nodemon命令替代node命令执行文件
此时使用nodemon打开文件文件不再会返回命令行当前工作目录,实际上是它在监控文件的保存操作,当文件保存时会再次执行该文件
当前情况下如果我们想断开当前操作我们可以使用ctrl+c终止命令操作
3.4 第三方模块 nrm
nrm(npm registry manager):npm下载地址切换工具
npm默认的下载地址在国外,国内下载速度慢
使用步骤
1. 使用npm install nrm -g 下载它
2. 查询可用下载地址列表 nrm ls
3. 切换npm下载地址nrm use 下载地址名称
切换地址成功后我们可以下载第三方模块gulp体验一下下载速度变化
3.5 第三方模块 Gulp
基于node平台开发的前端构建工具
前端构建工具:将机械化操作填写成任务,想要执行机械化操作时执行一个命令行r命令任务就能自动执行了
用机器代替手工,提高开发效率
3.6 Gulp能做什么
项目上线,HTML、CSS、JS文件压缩合并
语法转换(es6,less…)
公共文件抽离
修改文件浏览器自动刷新
3.7 Gulp使用
1.使用npm install gulp 下载gulp库文件
2.项目根目录下建立gulpfile.js文件(文件名不能随意更改)
3.重构项目的文件夹结构src目录放置源代码文件,dist目录放置构建后文件
4.在gulpfile.js文件中编写任务
5.在命令行中执行gulp任务
3.8 Gulp中提供的方法
gulp.src():获取任务要处理的文件
gulp.dest():输出文件
gulp.task():建立gulp任务
gulp.watch():监控文件的变化
gulp基本使用:
下载gulp-cli -g
此时我们会多出一个gulp命令,使用gulp 任务名字,会帮助我们执行任务的回调函数
存在问题:这个代码可能会报错
修改后代码:
4.9 Gulp插件
下载插件:
引用插件:
代码执行:
代码执行过后我们可以发现在dist目录下出现的HTML文件会被压缩在一行,与源文件有明显的区别
抽取html文件中的公共代码:
下载gulp-file-include插件:
调用插件:
在src中新建文件夹common存储公共代码片段
在.html文件中找取公共代码,在common中新建一个文件,复制公共代码粘贴到文件中
在源文件中只需要引用:@@include('代码片段路径')
下载插件: