5.1什么是第三方模块
``` 别人写好的，具有特定功能的，我们能直接使用的模块即第三方模块，由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中，所以又名包。 ```第三方模块有两种存在形式
- 以js文件的形式存在，提供实现项目具体功能的API接口
- 以命令行工具形式存在，辅助项目开发
5.2获取第三方模块
``` npmjs.com 第三方模块的存储和分发仓库 npm(node package manager): node 的第三方模块管理工具 ```- 下载：npm install 模块名称
- 卸载：npm uninstall package 模块名称
5.3全局安装与本地安装
- 命令行工具：全局安装
- 库文件：本地安装
5.4第三方模块 nodemon
``` nodemon是一个命令行工具，用以辅助项目开发 在Node.js中，每次修改文件都要在命令行工具中重新执行该文件，非常繁琐 ```使用步骤
``` 1.使用npm install nodemon -g 下载它(mac 需要加前缀sudo) 2.在命令行工具中用nodemon 命令替代node 命令执行文件 ```5.5第三方模块 nrm
``` nrm(node registry manager): npm 下载地址切换工具 npm 默认的下载地址是国外，国内下载速度慢 ```使用步骤
``` 1.使用npm install nrm -g 下载它 2.查询可用下载地址列表 nrm ls 3.切换npm 下载地址 nrm use 下载地址名称 ```5.6第三方模块 Gulp
``` 基于node平台开发的前端构建工具 也就是将机械化操作编写成任务，想要执行机械化操作时执行一个命令行命令任务就能自动执行了 ```Gulp可以做什么？
- 项目上线，html，css，js文件压缩合并
- 语法转换(es6,less...)
- 公共文件抽离
- 修改文件浏览器自动刷新
Gulp中提供的方法
- gulp.src():获取任务要处理的文件
- gulp.dest():输出文件
- gulp.task('任务名字'，callback):建立gulp任务
- gulp.watch():监控文件的变化
使用步骤
``` 1.使用npm install gulp 下载gulp库文件 2.在项目根目录下建立gulpfile.js文件 3.重构项目的文件夹结构src目录放置源代码文件dist目录放置构建后文件 4.在gulpfile.js文件中编写任务 5.在命令行工具中执行gulp任务 ```安装指定的Gulp版本
``` npm install gulp@3.9.1 ```安装Gulp命令行工具
``` npm install gulp-cli -g clear清屏 gulp first执行first任务 ```Gulp插件
- gulp-htmlmin:html文件压缩
- gulp-csso:压缩css
- gulp-babel:javaScript语法转化
- gulp-less:less语法转化
- gulp-uglify:压缩混淆JavaScript
- gulp-file-include:公共文件包含
- browsersync浏览器实时同步
node_modules文件夹的问题
``` 1.文件夹以及文件过多过碎，当我们将项目整体拷贝给别人的时候，传输速度会很慢很慢 2.复杂的模块依赖关系需要被记录，确保模块的版本和当前保持一致，否则会导致当前项目运行报错 ```package.json文件的作用
``` 1.项目描述文件，记录了当前项目信息，例如项目名称，版本，作者，github地址，当前项目依赖了哪些第三方模块等 2.使用npm init -y命令生成（不填写任何信息，都用默认值） 3.package.json文件中'scripts'存储的都是命令的别名 //基本使用 { "script":{ "build":"nodemon app.js" } } //一般情况下执行：nodemon app.js //设置后：npm run build ```项目依赖
``` 1.在项目的开发阶段和线上运营阶段，都需要依赖的第三方包，称为项目依赖 2.使用npm install 包名命令下载的文件会默认被添加到package.json文件的dependencies字段中 3.如果只想安装项目依赖，命令行使用 npm install --production ```开发依赖
``` 1.在项目的开发阶段需要依赖，线上运营阶段不需要依赖的第三方包，称为开发依赖 2.使用npm install 包名 --save-dev 命令将包添加到package.json文件的devDependencies字段中 ```package-lock.json文件的作用
``` 1.锁定包的版本，确保再次下载时不会因为包版本不同而产生问题 2.加快下载速度，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址，重新安装时只需下载即可，不需要做额外的工作 ``` ``` //html任务 //1.html文件中代码的压缩操作 //2.抽取html文件中的公共代码 npm install gulp-htmlmin 下载gulp插件 npm install gulp-file-include 下载gulp插件 npm install gulp-less 下载gulp插件 npm install gulp-csso 下载gulp插件 npm install gulp-babel @babel/core @babel/preset-env 下载gulp插件 npm install gulp-uglify 下载gulp插件//引用gulp插件
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
const less = require('gulp-less');
const csso = require('gulp-csso');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
gulp.task('htmlmin',()=>{
gulp.src('./src/*.html')
.pipe(fileinclude())
.pipe(htmlmin({collapseWhitespace:true}))
.pipe(gulp.dest('dist'));
});
//命令行执行
gulp htmlmin
//引回公共代码
//@@include('路径‘）
//css任务
//1.less语法转换
//2.css代码压缩
gulp.task('cssmin',()=>{
//选择css目录下的所有less文件以及css文件
gulp.src(['./src/css/.less','./src/css/.css'])
//将less语法转换为css语法
.pipe(less())
//将css代码进行压缩
.pipe(csso())
//将处理的结果进行输出
.pipe(gulp.dest('dist/css'))
});
//命令行执行
gulp cssmin
//js任务
//1.es6代码转换
//2.代码压缩
gulp.task('jsmin',()=>{
gulp.src('/src/js/*.js')
.pipe(babel({
//它可以判断当前代码的运行环境 将代码转换为当前运行环境所支持的代码
presets:['@babel/env']
}))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
})
//命令行执行
gulp jsmin
//复制文件夹
gulp.task('copy',()=>{
gulp.src('./src/images/')
.pipe(gulp.dest('dist/images'));
gulp.src('./src/lib/')
.pipe(gulp.dest('dist/lib'));
})
//命令行执行
gulp copy
//构建任务
gulp.task('default',['htmlmin','cssmin','jsmin','copy']);
//命令行执行
gulp default/gulp