- 第三方模块是什么
预先编写好的、具有特定功能且可直接使用的模块称为第三方模块。这些模块通常由多个文件组成，并存放在一个文件夹中，因此也被称为包。
第三方模块有两种形式：
- 以JavaScript文件形式存在，提供实现项目具体功能的API接口。
- 以命令行工具形式存在，辅助项目开发。
- 如何获取第三方模块
npm（node package manager）是Node.js的第三方模块管理工具。
- 下载：npm install 模块名称
- 卸载：npm uninstall 模块名称
- 全局安装与本地安装：
- 命令行工具：全局安装
- 库文件：本地安装
- 第三方模块nodemon
nodemon是一个命令行工具，用于辅助项目开发。在Node.js中，每次修改文件后都需要在命令行中重新执行该文件，非常繁琐。
使用步骤：
- 使用npm install nodemon -g下载它，-g代表全局安装
- 在命令行工具中使用nodemon命令替代node命令执行文件
- 第三方模块nrm
nrm（npm registry manager）是npm下载地址切换工具，npm默认的下载地址在国外，国内下载速度较慢。
使用步骤：
- 使用npm install nrm -g下载它
- 查询可用下载地址列表：nrm ls
- 切换npm下载地址：nrm use 下载地址名称
下载nrm第三方模块时可能会出现以下错误：
执行命令npm install nrm -g下载完nrm模块后，查询下载地址列表会报错，无法加载文件，因为在此系统上禁止运行脚本。
解决方法：打开Windows PowerShell命令行窗口（记住，右键以管理员身份运行）
输入以下命令：set-ExecutionPolicy RemoteSigned
按提示输入Y并回车即可。
查看执行策略的命令为：get-ExecutionPolicy
vscode jshint插件安装报错：
安装vscode jshint插件时遇到报错，右下角提示如下信息：
Failed to load jshint library. Please install jshint in your workspace folder using 'npm install jshint' or globally using 'npm install -g jshint' and then press Retry.
网上查找了一些方法，打开Windows PowerShell命令行窗口，输入以下命令安装jshint：npm install -g jshint
敲回车后到vscode中点击Retry即可。不过npm是Node.js的第三方模块管理工具，需要安装Node.js才能执行，所以还没有安装的同学需要去官网下载安装Node.js。
官网：https://www.php.cn/link/542907b161d7afd16500fb0b7dac5329
LTS = Long Term Support 长期支持版，稳定版（推荐安装）；Current 拥有最新特性，实验版。安装后不会在桌面创建图标，需要使用Windows PowerShell命令行工具查看是否安装成功。输入node -v回车查看。
如果安装成功会出现已安装的版本号。
- 第三方模块gulp
gulp是基于Node.js平台开发的前端构建工具。
将机械化操作编写成任务，想要执行机械化操作时执行一个命令行命令任务就能自动执行了，用机器代替手工，提高开发效率。
- Gulp能做什么
- 项目上线，HTML、CSS、JS文件压缩合并
- 语法转换（es6、less等）
- 公共文件抽离
- 修改文件浏览器自动刷新
- Gulp的使用
- 使用npm install gulp下载gulp库文件
- 在项目根目录下建立gulpfile.js文件
- 重构项目的文件夹结构，src目录放置源代码文件，dist目录放置构建后文件
- 在gulpfile.js文件中编写任务
- 在命令行工具中执行gulp任务
- Gulp中提供的方法
- gulp.src()：获取任务要处理的文件
- gulp.dest()：输出文件
- gulp.task()：建立gulp任务
- gulp.watch()：监控文件的变化
const gulp = require('gulp');
// 使用gulp.task()方法建立任务
// 第一个参数是任务名称，第二个参数是回调函数
// 执行时在命令行窗口输入gulp 任务名称
gulp.task('first', () => {
// 获取要处理的文件
gulp.src('./src/css/base.css')
// 将处理后的文件输出到dist目录
.pipe(gulp.dest('./dist/css'));
});可能会出现如下错误：
此时需在回调函数里添加结束回调done
const gulp = require('gulp');
// 使用gulp.task()方法建立任务
gulp.task('first', (done) => {
// 获取要处理的文件
console.log('第一个gulp任务');
gulp.src('./src/css/base.css')
// 把处理后的文件输出到dist目录
.pipe(gulp.dest('./dist/css'));
done();
})- Gulp插件
- gulp-htmlmin：HTML文件压缩
- gulp-csso：压缩CSS
- gulp-babel：JavaScript语法转换
- gulp-less：less语法转换
- gulp-uglify：压缩混淆JavaScript
- gulp-file-include：公共文件包含
- browsersync：浏览器实时同步
插件使用：
- 去npm官网搜索，查看下载命令，在命令行窗口用npm方法下载
- npm官网：www.npmjs.com
- 在gulpfile.js中引入这个插件，如：const htmlmin = require('gulp-htmlmin');
- 复制使用的代码到task任务中调用它，如：.pipe(htmlmin({ collapseWhitespace: true }))
// 引用gulp模块
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
// 使用gulp.task()方法建立任务
// 1.任务名称
// 2.任务回调函数
gulp.task('first', done => {
// 获取要处理的文件到src
console.log('第一个gulp任务');
gulp.src('./src/css/base.css')
// 把处理后的文件输出到dist目录
.pipe(gulp.dest('dist/css'));
done();
});
// html任务
// 1.压缩html文件里面的所有代码
// 2.抽取html文件里面的所有公共代码
gulp.task('htmlmin', done=> {
// 获取当前目录下src下所有的html文件
gulp.src('./src/*html')
// 抽取html文件里面的所有公共代码
.pipe(fileinclude())
// 压缩html文件中的代码
// collapseWhitespace 折叠空白（压缩空格）
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest('dist'));
done();
});
// css任务
// 1.less语法转换
// 2.css代码压缩
gulp.task('cssmin', done => {
// 获取路径下的文件
// gulp.src('./src/css/*.less')
// 选择多个文件可以使用数组形式
gulp.src(['./src/css/*.less', './src/css/*.css'])
// 执行插件less语法转换，将less语法转换成css语法
.pipe(less())
// 将css代码压缩
.pipe(csso())
// 处理后的文件输出到dist/css目录下
.pipe(gulp.dest('dist/css'))
done();
});
// js任务
// 1.js语法转换
// 2.js代码压缩
gulp.task('jsmin', done => {
gulp.src('./src/js/*.js')
// 转换js语法
.pipe(babel({
// presets: ['@babel/env']判断当前代码的运行环境，将代码转换成当前环境支持的代码
presets: ['@babel/env']
}))
// 代码压缩
.pipe(uglify())
.pipe(gulp.dest('./dist/js'))
done()
});
// 复制其他文件
gulp.task('copy', done => {
gulp.src('./src/images/*')
.pipe(gulp.dest('./dist/images'))
gulp.src('./src/upload/*')
.pipe(gulp.dest('./dist/upload'))
gulp.src('./src/favicon.ico')
.pipe(gulp.dest('dist'))
gulp.src('./src/fonts/*')
.pipe(gulp.dest('./dist/fonts'))
done();
});
// 构建任务
// gulp.task('default', ['first', 'htmlmin', 'cssmin', 'jsmin', 'copy']);此代码执行会报以下错误，需添加gulp.series()将任务函数组合操作
gulp.task('default', gulp.series(['first', 'htmlmin', 'cssmin', 'jsmin', 'copy']));
