3. 第三方模块

3.1 什么是第三方模块

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

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

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

3.2 获取第三方模块

npmjs.com:第三方模块的存储和分发仓库

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

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

全局安装与本地安装

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

3.3 第三方模块 nodemon

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

使用步骤

  • 使用npm install nodemon –g 下载它
  • 在命令行工具中用nodemon命令替代node命令执行文件

3.4 第三方模块 nrm

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

使用步骤

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

3.5 第三方模块 Gulp

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

3.6 Gulp能做什么

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

3.7 Gulp使用

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

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

3.9 Gulp插件

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

Emrof
31 声望6 粉丝