node第三方模块

第三方模块

4.1 什么是第三方模块

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

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

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

4.2 获取第三方模块

• npmjs.com : 第三方模块的存储和分发仓库
• npm（node package manager）：node的第三方管理工具
• 下载：npm install 模块名称
• 卸载：npm uninstall package 模块名称

全局安装与本地安装

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

4.3 第三方模块 nodemon

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

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

使用步骤：

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

ctrl + c ：可以终止操作

4.4 第三方模块 nrm

nrm（npm register manager）：npm 下载地址切换工具

npm默认的下载地址在国外，国内下载速度慢

使用步骤：

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

4.5 第三方模块 Gulp

基于node平台开发的前端构建工具

将机械化操作编写成任务，想要执行机械化操作时执行一个命令行命令任务就能自动执行

用机器代替手工，提高开发效率

4.6 Gulp能做什么

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

4.7 Gulp使用

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

4.8 Gulp中提供的方法

• gulp.src（）：获取任务要处理的文件‘
• gulp.dest（）：输出文件
• gulp.task（）：建立gulp任务
• gulp.watch（）：监控文件的变化

// 引入gulp模块
const gulp = require('gulp');
// 使用gulp.task建立任务
// 1.任务的名称
// 2.任务的回调函数
gulp.task('first', () => {
  console.log('人生中的第一个gulp任务执行了')
  // 1. 使用gulp.src（）获取要处理的文件
  gulp.src('./src/css/base.css').pipe(gulp.dest('dist/css'))
});

4.9 Gulp插件

html文件压缩：gulp-htmlmin

// 引入gulp模块
const gulp = require('gulp')
const htmlmin = require('gulp-htmlmin')
// 使用gulp.task建立任务
// 1.任务的名称
// 2.任务的回调函数
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', () => {
  // 获取要操作的文件
  //   压缩html文件中的代码
  gulp
    .src('./src/*.html')
    .pipe(htmlmin({ collapseWhitespace: true }))
    .pipe(gulp.dest('dist'))
})

• 压缩前的html文件

• 压缩后的html文件

  

公共文件包含：gulp -file-include

// 引入gulp模块
const gulp = require('gulp')
const htmlmin = require('gulp-htmlmin')
const fileinclude = require('gulp-file-include')
// 使用gulp.task建立任务
// 1.任务的名称
// 2.任务的回调函数
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', () => {
  // 获取要操作的文件
  //   压缩html文件中的代码
  gulp
    .src('./src/*.html')
    ,pipe(fileinclude())
    .pipe(htmlmin({ collapseWhitespace: true }))
    .pipe(gulp.dest('dist'))
})

压缩CSS ：gulp-csso

// 引入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')
// 使用gulp.task建立任务
// 1.任务的名称
// 2.任务的回调函数
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', () => {
  // 获取要操作的文件
  //   压缩html文件中的代码
  gulp.src('./src/*.html'),
    pipe(fileinclude())
      .pipe(htmlmin({ collapseWhitespace: true }))
      .pipe(gulp.dest('dist'))
})

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