Node.js自学笔记(二)

三、系统模块

3.1 什么是系统模块

Node运行环境提供的API，因为这些API都是以模块化的方式进行开发的，所以我们又称Node运行环境提供的API为系统模块。

3.2 系统模块fs(file system) 文件操作

readFile 读取文件语法示例

fs.readFile('文件路径/文件名称',['文件编码'],callback);

代码如图
执行结果如图

PowerShell

可以看到由于系统成功读取了b.js当中的文件，所以err的值便为null，而doc当中则包含了b.js的文件内容

writeFile 写入文件内容语法示例

fs.writeFile('文件路径/文件名称','数据',callback);

代码如图
执行结果如图

PowerShell

文件资源管理器
那么可以看到，文件已经被成功创建好了，而内容也被成功写入。

3.3系统模块path 路径操作

为什么要进行路径拼接

• 不同操作系统的路径分隔符不统一
• Windows 上是 \ 和 /
• Linux上是 /

path 路径拼接语法示例

path.join('路径','路径',...)

代码如图

执行结果如图

PowerShell

可以看到，我们已经成功得到了windows操作系统下的路径拼接结果。

3.4 相对路径与绝对路径

• 大多数情况下使用绝对路径，因为相对路径有时候相对的是命令行工具的当前目录
• 在读取文件或设置文件路径时都会选择绝对路径。
• 使用__dirname获取当前文件所在的绝对路径

代码示例如图
执行结果如图

PowerShell

需要注意的是，很多情况下相对路径都是相对的命令行的当前目录，而require方法的相对路径相对的就是当前文件，所以在使用requir方法的时候是可以写相对路径的。

四、第三方模块

4.1 什么是第三方模块

别人写好的、具有特定功能的、我们能直接使用的模块即第三方模块，由于第三方模块都是由多个文件组成并且被放置在一个文件夹中，所以又名包。

第三方模块有两种存在形式：

• 以js文件的形式存在，提供实现项目具体功能的API接口
• 以命令行工具的形式存在，辅助项目开发

4.2 获取第三方模块

npmjs.com : 第三方模块的存储和分发仓库
npm(node package manager): node的第三方模块管理工具

• 下载： npm install 模块名称

下载示例：

第三方模块的下载命令是要在命令行工具当中写入和执行的，下面我将以下载 formidable 模块为例。如图

PowerShell

只要没有红色的ERR错误，就证明我们的下载是成功的。那么下载好的模块在哪里呢。

默认情况下下载好的第三方模块是会被存储在，执行下载命令时，命令行的工作目录下的 node_modules文件夹当中。

下载好的同是也会创建一个名为package-lock.json的文件，这个文件的作用我们之后再说。

说完下载，那么如果想卸载第三方模块呢

• 卸载：npm unintall package 模块名称

由于操作上的大同小异，卸载操作将不展示示例。

有关全局安装和本地安装

全局安装：将模块安装到一个公共的目录当中，所有的项目都可以使用。

本地安装：将模块下载到当前项目中，供当前的项目使用。上面所演示的安装就是本地安装

一般来说

• 命令行工具：全局安装
• 库文件：本地安装

4.3 第三方模块 nodemon

nodemon是一个命令行工具，用以辅助项目开发

在Node.js中，每次修改文件都要在命令行工具中重新执行该文件，十分繁琐。

nodemon的作用就是解为了决上面的问题的，这个模块可以在文件执行保存操作的时候，自动执行该文件。从来节省了大量的时间和操作。

使用步骤

1. 使用 npm install nodemon -g 下载 (-g 代表全局安装）
2. 在命令行工具中使用nodemon命令替代node命令执行文件

下载示例图如下
同样，只要没有红色的ERR错误，就证明我们的下载是成功的。

下面让我们来看 nodemon 的执行示例

首先在命令行中，我们使用nodemon随便执行一个文件

可以看到，在执行完毕后，命令行没有返回它的当前工作目录，而是处于被挂起状态。那么此时系统就已经在监控文件的保存操作了，下面让我们到代码编辑器中对b.js做一些修改

此时我执行保存操作，再来看命令行界面会发生什么。

PowerShell

可以看到，我们并没有输出任何命令，b.js就被自动执行了。这就是nodemon模块的作用

那么如果我们想终止命令行的挂起状态执行其他操作该怎么办呢？

很简单，只要 按下 Ctrl + C就可以了。

4.4 第三方模块 nrm

nrm(npm registry manager): npm下载地址切换工具
npm默认的下载地址在国外，国内下载速度慢
使用国内的下载地址可以提高下载的速度

使用步骤

1. 使用npm install nrm -g 下载
2. 查询可用的下载地址 nrm ls
3. 通过 “nrm use 下载地址名称” 切换下载地址

示例如图

4.5 第三方模块 Gulp

基于node平台开发的前端构建工具
将机械化操作编写成任务，想要执行机械化操作时执行一个命令行命令任务就能自动执行了，用机器代替手工，提高开发效率

4.5.1 Gulp能做什么

• 项目上线，HTML、CSS、JS文件压缩合并
• 语法转换(es6、less…)
• 公共文件抽离
• 修改文件浏览器自动刷新

4.5.2 Gulp使用

1. 使用npm install gulp下载gulp库文件
2. 在项目根目录下建立gulpfile.js文件 (文件名不可更改)
3. 重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件
4. 在gulpfile.js文件中编写任务
5. 在命令行工具中执行gulp任务

接下来我将逐步演示每项操作

首先，新建一个名为 gulp-demo 的文件夹
下面我们进入该文件夹，并在该文件夹下打开命令行工具，开始执行第一步操作——下载gulp库文件，如图

接下来是第二步操作——在项目根目录下建立gulpfile.js文件 (文件名不可更改)，如图

第三步操作——重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件，如图

4.5.3 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'));
});

第四步操作——在gulpfile.js文件中编写任务

第五步操作——在命令行工具中执行gulp任务
在执行这个操作之前，我们要先下载一个Node.js提供的命令行工具，方便我们执行gulpfile.js中的任务。

安装方法如下：
PowerShell

安装完成后，我们就可以通过 gulp + 任务名(在上面的例子中，我设置的任务名为first)来执行对应的任务了

PowerShell

可以看到，报了一些错误。那是由于我代码中调用src()方法中的文件地址参数对应的文件还没有创建。但这不影响我们查看gulpfile.js的执行效果。

4.5.4 Gulp插件

• gulp-htmlmin：html文件压缩
• gulp-csso：压缩css
• gulp-babel：JavaScript语法转化
• gulp-less：less语法转化
• gulp-uglify：压缩混淆JavaScript
• gulp-file-include：公共文件包含(抽取公共代码)
• browsersync：浏览器实时同步

Gulp插件的使用分为三步

1. 通过npm下载插件
2. 在gulpfile.js中引入插件
3. 调用插件

下面我将列举三个示例
1.html文件压缩

首先下载gulp-htmlmin插件

npm install gulp-htmlmin

第二步，在gulpfile.js中引入插件。代码如图

最后一步，执行代码并查看效果


可以看到在dist目录中，我们已经成功得到了压缩后的html代码了。

2.less语法转css并且压缩css

首先来看less语法转化

第一步：在命令行界面下载gulp-less插件

PowerShell

第二步：在gulpfile.js中引入插件

第三步：执行代码并查看效果

转换前的less文件代码

转换后生成的css文件代码

接着来看css文件压缩

第一步：在命令行界面下载 gulp-csso插件
PowerShell

第二步：在gulpfile.js中引入插件

只需要在less语法转换的任务代码中添加几句即可

第三步：执行代码并查看效果

压缩前的css与less

压缩后的css与(less文件已被转换为css文件并一同压缩）