Gulp

1. 第三方模块

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

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

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

1.1 获取第三方模块

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

npm（node package manager）：node的第三方模块管理工具

下载：npm install 模块名称
卸载：npm uninstall package 模块名称

全局安装与本地安装

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

1.2 nrm 地址切换

nrm ( npm registry manager )：npm下载地址切换工具

下载：npm install nrm –g
查询可用下载地址列表：nrm ls
切换 npm下载地址：nrm use 下载地址名称

报错1：WARN deprecated request@2.88.2: request has been deprecated

删除 C:\Users\Administrator\AppData\Roaming 路径下的 npm 和 npm-cache 两个文件夹
安装设置国内淘宝的 npm 镜像：npm install -g cnpm --registry=http://registry.npm.taobao.org
检查是否安装成功：cnpm -v
最后安装成功：cnpm install

配置淘宝镜像 npm config set registry https://registry.npm.taobao.org
配置完成后检验是否成功：npm config get registry

报错2：cnpm：无法加载文件C:\Users\93457\AppData\R oaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本

Windos PowerShell 选择管理员身份运行
输入：set-ExecutionPolicy RemoteSigned
更改权限输入：A

1.3 nodemon 自动刷新

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

在 Node.js 中，每次修改文件都要在命令行工具中重新执行该文件，非常繁琐，该模块可以监听文件的变动，每次保存即可自动输出

使用步骤：

下载：npm install nodemon –g （全局安装）
在命令行工具中用 nodemon 命令替代 node 命令执行文件

此处光标未显示，即处于监听状态

取消监听状态：Ctrl + C（重复两次）

2. Gulp 构建工具

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

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

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

下载 gulp 库文件：npm install gulp

如果有报错：gulp 无法识别名称

需要在本地全局安装：npm i -g gulp

2.1 Gulp 功能

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

2.2 Gulp 使用

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

2.3 Gulp 方法

gulp.src()：获取任务要处理的文件
gulp.dest()：输出文件（会自动创建目录）
gulp.task()：建立 gulp 任务
gulp.watch()：监控文件的变化

const gulp = require('gulp'); // 引用 gulp 模块
gulp.task('first', done => {
    console.log('第一个gulp任务执行!');
    done();
});

done：回调函数的作用是在 task 完成时通知 Gulp
first：任务名称

2.4 Gulp 插件

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

3. package.json文件

3.1 node_modules 文件夹的问题

文件夹以及文件过多过碎，当我们将项目整体拷贝给别人的时候，传输速度会很慢很慢
复杂的模块依赖关系需要被记录，确保模块的版本和当前保持一致，否则会导致当前项目运行报错

注意：通常不传输 node_modules 这个文件夹

3.2 package.json文件的作用

项目描述文件，记录了当前项目信息，例如项目名称、版本、作者、github地址、当前项目依赖了哪些第三方模块等。

使用 npm init -y 命令生成（-y 表示信息为默认值）

注意：package.json 中不能有注释否则会报错（此处为了理解）

{
    "name": "description", // 名称
    "version": "1.0.0", // 版本
    "description": "", // 描述
    "main": "index.js", // 项目入口地址，即执行 npm 后会执行的项目
    "scripts": { // 命令别名
        "test": "echo \"Error:\" && exit 1",
        "abc": "nodemon abc.js" // 自定义别名
    },
    "keywords": [], // 关键字
    "author": "", // 作者
    "license": "ISC" // 协议（ISC表示开放源代码）
}

命令别名的执行：npm run 别名

3.3 项目依赖

在项目的开发阶段和线上运营阶段，都需要依赖的第三方包，称为项目依赖

传输项目通常不传输 node_modules 这个文件夹

下载当前项目所依赖的全部模块： npm install

自动把模块和版本号添加到 dependencies 字段中

命令：npm install name --save

简写：npm i name -S

运行时的依赖：npm install --save 包名（将包添加到 package.json 文件的 dependencies 字段中）

注意：--save 写与不写都一样

"dependencies": { // 项目依赖的模块
        "formidable": "^1.2.2",
        "mime": "^2.4.6"
    }

3.4 开发依赖

在项目的开发阶段需要依赖，线上运营阶段不需要依赖的第三方包，称为开发依赖

自动把模块和版本号添加到 devdependencies 字段中

命令：npm install name -save-dve

简写：npm i name -D

不下载开发依赖：npm install --production（线上运行用）

"devDependencies": { // 开发依赖的模块
        "gulp": "^3.9.1“
    }

3.5 package-lock.json 文件的作用

记录模块与模块之间的依赖关系

锁定包的版本，确保再次下载时不会因为包版本不同而产生问题
加快下载速度，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址，重新安装时只需下载即可，不需要做额外的工作

4. Node.js 中模块加载机制

require 方法根据模块路径查找模块，有三种路径情况

完整路径则直接引入模块，例： require('./find.js');

4.1 当模块拥有路径但没有后缀时

例：require('./find');

查找机制的优先级：

同名 JS 文件
同名文件夹下 package.json 中 main 入口文件
同名文件夹下 index.js
都找不到就报错

4.2 当模块没有路径且没有后缀时

例：require('find');