1什么是第3三方模块 别人写好的、具有特定功能的、我们能直接使用的模块即第三方模块，由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中，所以又名包。 ## 第三方模块有两种存在形式: ●以js文件的形式存在，提供实现项目具体功能的API接口。 ●以命令行工具形式存在,辅助项目开发 ## 获取第3三方模块 （重点） [npmjs.com](http://npmjs.com/):第三方模块的存储和分发仓库 npm (node package manager) : node的第3方模块管理工具 ●下载: npm install模块名称 ~~~ npm install formidable （用来做文件下上传 ） 一般下载到当前目录 ~~~ ●卸载: npm unintall （package）模块名称 ### 全局安装与本地安装 ●命令行工具: 全局安装 ●库文件:本地安装 ## 第三方模块nodemon （辅助项目开发 修改时可以自动执行） nodemon是一个命令行工具,用以辅助项目开发。 在Node.js中，每次修改文件都要在命令行工具中重新执行该文件，非常繁琐。 使用步骤 1.使用npm install nodemon -g (-g 全局安装 所有项目都可以使用他) 2.在命令行工具中用nodemon命令替代node命令执行文件 ## 第三方模块nrm （切换node第三方模块地址 切换回 taobao） nrm ( npm registry manager): npmi下载地址切换工具 npm默认的下载地址在国外，国内下载速度慢  使用步骤 1.使用npm install nrm -g下载它 2.查询可用下载地址列表nrm Is 3.切换npm' 下载地址 nrm use下载地址名称  下载运行可能会出错 解决方法 找到nrn文件夹 的cli.js 找到`const NRMRC = path.join(process.env.HOME, '.nrmrc');` 修改为 ~~~ const NRMRC \= path.join(process.env\[(process.platform \== 'win32') ? 'USERPROFILE' : 'HOME'\], '.nrmrc'); ~~~ ## 第三方模块 gulp npm install gulp 基于node平台开发的前端构建工具 将机械化操作编写成任务,想要执行机械化操作时执行个命令行命令任务就能自动执行了 用机器代替手工，提高开发效率。 ### Gulp能做什么 （项目上线, HTML、CSS、JS文件压缩合并） ●项目上线, HTML、CSS、JS文件压缩合并 ●语法转换(es6、 less .. ●公共文件抽离 ●修改文件浏览器自动刷新 ### Gulp使用 1.使用npm install gulp下载gulp库文件 （那个项目开发 在那个项目使用） 2.在项目根目录下建立gulpfile.js文件 3.重构项目的文件夹结构src目录放置源代码文件dist目录放置构建后文件 4.在gulpfile.js文件中编写任务. 5.在命令行工具中执行gulp任务 Gulp中提供的方法 （为第4点 编写文件使用） ●gulp.src(): 获取任务要处理的文件 ●gulp.dest(): 输出文件 ●gulp.task(): 建立gulp任务 ●gulp.watch(): 监控文件的变化 写任务 ~~~ // 引用当前开发项目下的gulp文件 const gulp = require('gulp') ; //使用gulp.task()方法建立任务 first(当前任务名字) gulp.task(' first', () => { ^//获取要处理的文件 gulp.src(' ./src/css/base.css') //将处理后的文件输出到dist目录 pipe （处理的意思 处理 下面是输出还是删除） .pipe (gulp.dest('./dist/css')) ; }) ; ~~~ 使用gulp npm install gulp-cli -g 执行这个文件的某一条任务  ### Gulp插件 ●gulp-htmlmin: html文件压缩[https://www.npmjs.com/package/gulp-htmlmin](https://www.npmjs.com/package/gulp-htmlmin) ●gulp-csso: 压缩css[https://www.npmjs.com/package/gulp-csso](https://www.npmjs.com/package/gulp-csso) ●gulp-babel : JavaScript语法转化[https://www.npmjs.com/package/gulp-babel](https://www.npmjs.com/package/gulp-babel) ●gulp-less: lessi语法转化[https://www.npmjs.com/package/gulp-less](https://www.npmjs.com/package/gulp-less) ●gulp-uglify :压缩混淆JavaScript[https://www.npmjs.com/package/gulp-uglify](https://www.npmjs.com/package/gulp-uglify) ●gulp-file-include 公共文件包含[https://www.npmjs.com/package/gulp-file-include](https://www.npmjs.com/package/gulp-file-include) ●browsersync 浏览器实时同步 html文件压缩下载及使用方法[https://www.npmjs.com/package/gulp-htmlmin](https://www.npmjs.com/package/gulp-htmlmin) 1、在当前项目目录下的 根目录下建立gulpfile.js文件 2、下载插件 引入功能 3、运行 gulp + （gulpfile.js文件里的创建任务的任务名） # 使用Gulp插件 ## 1、引入 创建任务  ## 2、各种操作 ### html 压缩 和抽取公共代码  ### css 压缩 代码转换  ### js 压缩 es6代码转换  ### 复制文件夹  ## 3、构建一个总任务 一键启动上面所有任务（控制台 输入 gulp + （总任务名default）） (注意点 因为我们任务叫default 所以我们 在控制台 输入 gulp 即可)  ## 3、执行任务（使用）  ## package.json文件 （解决文件夹太多 造成影响） ### 1、node modules文件夹的问题 1.文件夹以及文件过多过碎，当我们将项目整体拷贝给别人的时候，传输速度会很慢很慢. 2.复杂的模块依赖关系需要被记录，确保模块的版本和当前保持一致, 否则会导致当前项目运行报错 ### 2 package.json文件的作用 项目描述文件,记录了当前项目信息，例如项目名称、版本、作者、github地址、 当前项目依赖了哪些第三方模块等。 使用`npm init -y`命令生成。 1、新建一个项目文件夹 （在命令行中打开当前目录 输入`npm init -y`） 生成一个package.json 的项目配置包  2、 ### 3.项目依赖 ●在项目的开发阶段和线上运营阶段,都需要依赖的第三方包，称为项目依赖 ●使用npm install包名命令下载的文件会默认被添加到package.json文件的dependencies字段中 ~~~ { "dependencies": { "jquery": "^3.3.1" } } ~~~ ### 4.开发依赖 ●在项目的开发阶段需要依赖，线上运营阶段不需要依赖的第三方包，称为开发依赖 ●使用`ηpm install包名-- save-dev`命令**将包添加到package.json文件的devDependencies字段中** ~~~ { "devDependencies": { "gulp": "^3.9.1" } } ~~~  开发时只下载 项目依赖 npm install --production  5.package-lock.json文件的作用 ●锁定包的版本， 确保再次下载时不会因为包版本不同而产生问题 ●加快下载速度, 因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址，重新安装时只需下载即可，不需要做额外的工作 #### pacge.json 文件里的 scripts （可以更快速执行）