3. 第三方模块
3.1 什么是第三方模块
他人写好的、具备特定性能的、咱们能间接应用的模块即第三方模块,因为第三方模块通常都是由多个文件组成并且被搁置在一个文件夹中,所以又名包。
第三方模块有两种存在模式:
- 以 js 文件的模式存在,提供实现我的项目具体性能的 API 接口。
- 以命令行工具模式存在,辅助我的项目开发
3.2 获取第三方模块
npmjs.com:第三方模块的存储和散发仓库
npm (node package manager):node 的第三方模块管理工具
- 下载:npm install 模块名称
- 卸载:npm unintall package 模块名称
全局装置与本地装置
- 命令行工具:全局装置
- 库文件:本地装置
3.3 第三方模块 nodemon
nodemon 是一个命令行工具,用以辅助我的项目开发。
在 Node.js 中,每次批改文件都要在命令行工具中从新执行该文件,十分繁琐。
应用步骤
- 应用 npm install nodemon –g 下载它
- 在命令行工具中用 nodemon 命令代替 node 命令执行文件
3.4 第三方模块 nrm
nrm (npm registry manager):npm 下载地址切换工具
npm 默认的下载地址在国外,国内下载速度慢
应用步骤
- 应用 npm install nrm –g 下载它
- 查问可用下载地址列表 nrm ls
- 切换 npm 下载地址 nrm use 下载地址名称
3.5 第三方模块 Gulp
基于 node 平台开发的前端构建工具
将机械化操作编写成工作, 想要执行机械化操作时执行一个命令行命令工作就能主动执行了
用机器代替手工,进步开发效率。
3.6 Gulp 能做什么
- 我的项目上线,HTML、CSS、JS 文件压缩合并
- 语法转换(es6、less …)
- 公共文件抽离
- 批改文件浏览器主动刷新
3.7 Gulp 应用
- 应用 npm install gulp 下载 gulp 库文件
- 在我的项目根目录下建设 gulpfile.js 文件
- 重构我的项目的文件夹构造 src 目录搁置源代码文件 dist 目录搁置构建后文件
- 在 gulpfile.js 文件中编写工作.
- 在命令行工具中执行 gulp 工作
3.8 Gulp 中提供的办法
- gulp.src():获取工作要解决的文件
- gulp.dest():输入文件
- gulp.task():建设 gulp 工作
- gulp.watch():监控文件的变动
const gulp = require('gulp');
// 应用 gulp.task()办法建设工作
gulp.task('first', () => {
// 获取要解决的文件
gulp.src('./src/css/base.css')
// 将解决后的文件输入到 dist 目录
.pipe(gulp.dest('./dist/css'));
});
3.9 Gulp 插件
- gulp-htmlmin:html 文件压缩
- gulp-csso:压缩 css
- gulp-babel:JavaScript 语法转化
- gulp-less: less 语法转化
- gulp-uglify:压缩混同 JavaScript
- gulp-file-include 公共文件蕴含
- browsersync 浏览器实时同步