第三方模块(由多个文件组成,又称为包);
存在形式:①JS:提供实现项目具体功能的API接口;②以命令形式存在,辅助项目开发;
获取第三方模块:非官方模块(存储在公共平台)npmjs.com
下载方法: 在powerShell: npm install 模块名称
默认下载当前目录下:node-modules和package-lock.js
卸载: npm uninstall 模块名称
本地安装:将模块下载到当前项目中,供当前项目使用; (一般库文件)
全局安装:将模块安装在公共目录中,所有项目都可以使用;(命令行工具)
=============================================================
nodemon模块(命令行工具,辅助项目开发)
作用:监控文件的保存操作,当文件发生保存操作时,就会重新执行该文件(直接看到修改后效果,不需要繁琐执行);
①下载: npm install nodemon -g //-g全局安装
②使用: 执行:nodemon 01.helloworld.js
断开操作:ctrl+c //返回当前工作目录
=============================================================
nrm模块
作用:npm下载地址的管理工具,快速切换npm的下载地址(由于网站在国外,下载速度慢,容易下载失败,所以在国内有公司专门建立服务器存储npm的同步,替代npm地址);
①下载: npm install nrm -g // 全局下载
操作: nrm ls //查看下载地址
nrm use 下载名称 //修改下载地址
=========================================================
gulp模块(前端构建工具)
作用:将机械换操作编写成任务,输入命令,自动执行任务。
html文件压缩: gulp-htmlmin
css压缩:gulp-csso
压缩混淆的JavsScript:gulp-uglify
less语法转换css:gulp-less
JavaScript语法转换:gulp-babel
公共文件包含:gulp-file-include
浏览器实时同步:browsersync
gulp中提供的方法:
gulp.src() // 获取任务要处理的文件
gulp.dest() //输出文件
gulp.task() //建立gulp任务
gulp.watch() //监控文件的变化
语法:
const gulp = require('gulp'); // 引用gulp模块
gulp.task('first',()=>{ //使用gulp.task()方法建立任务 first是名字
gulp.src('./src/css/base.css') // 获取要处理的文件
.pipe(gulp.dest('./dist/css')); // 将要处理的文件输出到dist目录下的css目录
});
在powershell下执行:gulp first
// 自动去当前项目根目录下找当前的gulpfile.js文件,再去找firsrt任务,帮我们执行这个任务的回调函数。
使用:①下载 npm install gulp npm install gulp-cli -g
②在项目根目录下建立gulpfile.js文件 //不能更改文件名
③重构项目文件夹结构src目录放置源代码文件,dist目录放置构建后文件。
④在gulpfile.js文件中编写任务
⑤在命令行执行工具中执行gulp任务(npm install gulp-cli -g要下载该工具)
例子:
在编辑器中新建一个文件夹:gulp-demo
在命令行工具中使用cd命令,切换到gulp-demo文件夹下
安装gulp的库文件: npm install gulp
在根目录gulp-demo下建立gulpfile.js文件,新建文件夹src和dist
将源代码放入src文件夹中
在gulpfile.js中编写任务