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 浏览器实时同步