3. 第三方模块
3.1 什么是第三方模块
别人写好的、具备特定功能的、咱们能直接使用的模块即第三方模块，因为第三方模块一般都是由多个文件组成而且被放置在一个文件夹中，因此又名包。css
第三方模块有两种存在形式：html
- 以js文件的形式存在，提供实现项目具体功能的API接口。
- 以命令行工具形式存在，辅助项目开发
3.2 获取第三方模块
npmjs.com：第三方模块的存储和分发仓库前端
npm (node package manager) ： node的第三方模块管理工具node
- 下载：npm install 模块名称
- 卸载：npm unintall package 模块名称
全局安装与本地安装es6
3.3 第三方模块 nodemon
nodemon是一个命令行工具，用以辅助项目开发。
在Node.js中，每次修改文件都要在命令行工具中从新执行该文件，很是繁琐。npm
使用步骤gulp
- 使用npm install nodemon –g 下载它
- 在命令行工具中用nodemon命令替代node命令执行文件
3.4 第三方模块 nrm
nrm ( npm registry manager )：npm下载地址切换工具
npm默认的下载地址在国外，国内下载速度慢浏览器
使用步骤babel
- 使用npm install nrm –g 下载它
- 查询可用下载地址列表 nrm ls
- 切换npm下载地址 nrm use 下载地址名称
3.5 第三方模块 Gulp
基于node平台开发的前端构建工具
将机械化操做编写成任务, 想要执行机械化操做时执行一个命令行命令任务就能自动执行了
用机器代替手工，提升开发效率。less
3.6 Gulp能作什么
- 项目上线，HTML、CSS、JS文件压缩合并
- 语法转换（es六、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 浏览器实时同步