node.js的第三方模块 nodemonnrmGulpGulp插件

Posted 2021-05-17 冰雪奇缘lb

什么是第三方模块

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

---

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

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

---

获取第三方模块

https://www.npmjs.com/：第三方模块的存储和分发仓库。

npm(node package manager) : node 的第三方模块管理工具

• 下载: npm install 模块名称
• 卸载: npm unintall package 模块名称

全局安装与本地安装

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

---

第三方模块 nodemon

nodemon是一个命令行工具，用以辅助项目开发。
在Node.js中，每次修改文件都要在命令行工具中重新执行该文件，非常繁琐。
使用步骤

1. 使用 npm install nodemon -g下载它。
2. 在命令行工具中用 nodemon 命令替代 node 命令执行文件。

---

第三方模块 nrm

nrm (npm registry manager): npm下载地址切换工具。
npm默认的下载地址在国外，国内下载速度慢。

使用步骤:

1. 使用 npm install nrm -g 下载它。
2. 查询可用下载地址列表 nrm ls。
3. 切换 npm下载地址 nrm use下载地址名称。
   

---

第三方模块Gulp

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

Gulp能做什么

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

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

Gulp插件

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

对于gulp 的插件，要学会查文档使用。

---

使用流程

1. 下载：

npm install --save-dev 插件名

2. 引用：

const xxx = require('xxx');

3. 调用：

gulp.task('cssmin', () => {
	// 需要处理的文件
	gulp.src(['./src/css/*.less', './src/css/*.css'])
		.pipe(xxx()) // 处理过程
		.pipe(gulp.dest('dist/css')) // 输出路径
});

4. 执行（命令行）：

gulp 任务名

gulp.task('first', () => {
	console.log('我们人生中的第一个gulp任务执行了');
	// 1.使用 gulp.src 获取要处理的文件
	gulp.src('./src/css/base.css')
		.pipe(gulp.dest('dist/css'));
	});
	// html任务
	// 1.html文件中代码的压缩操作
	// 2.抽取html文件中的公共代码
	gulp.task('htmlmin', () => {
		gulp.src('./src/*.html')
		//压缩html文件中的代码
		.pipe(htmlmin({collapsewhitespace: true}))
		.pipe(gulp.dest('dist'));
});

黑窗口执行命令：gulp 任务名 ，例如：gulp htmlmin

---

---

gulp-file-include:公共html文件中的代码压缩

下载：

npm install --save-dev gulp-file-include

引用：

const fileinclude = require('gulp-file-include');

// html任务
// 1.html文件中代码的压缩操作
//2.抽取html文件中的公共代码
gulp.task( ' htmlmin', () =>{
	gulp.src('./src/*.html')
		.pipe(fileinclude())
		 //压缩 html 文件中的代码
		.pipe(htmlmin({ collapseWhitespace: true}))
		.pipe(gulp.dest('dist'));
});

官方文档 gulp-file-include 详细使用方法：https://www.npmjs.com/package/gulp-file-include

---

gulp-less：less转css

// css任务
// 1.less语法转换
// 2.css代码压缩
gulp.task('cssmin', () => {
	gulp.src('./src/css/*.less')
});

lnstallation

npm install gulp-less

Basic Usage

var less =require('gulp-les');
var path = require('path');
gulp.task('1ess', function() {
	return gulp.src('./1ess/**/*.1ess')
		.pipe(less({
			paths: [ path.join(__dirname, '1ess', 'includes') ]
		}))
})

使用举例：

gulp.task('htmlmin', => {
	gulp.src('./src/*.html')
		.pipe(fileinclude())
		// 压缩html文件中的代码
		.pipe(htmlmin({ collapseWhitespace: true }))
		.pipe(gulp.dest( 'dist' ));
});
// css任务
// 1.less语法转换
// 2.css代码压缩
gulp.task('cssmin', () => {
	gulp.src(['./src/css/*.less', './src/css/*.css'])
		.pipe(less())
		.pipe(gulp.dest('dist/css'))
});

官方文档详细使用方法：https://www.npmjs.com/package/gulp-less

---

gulp-csso：css代码压缩

使用举例：

// css 任务
// 1.less 语法转换
// 2.css 代码压缩
gulp.task('cssmin', () => {
	// 选择css目录下的所有1ess文件以及css文件
	gulp.src(['./src/css/*.less', './src/css/*.css'])
	// 将 less 语法转换为 css 语法
		.pipe(less())
		// 将css代码进行压缩
		.pipe(csso())
		// 将处理的结果进行输出
		.pipe(gulp.dest('dist/css'))
});

官方文档详细使用地址：https://www.npmjs.com/package/gulp-csso

---

使用大致流程：

---