05【node + gulp】第三方模块 gulp, gulp插件，package.json文件， packjson-lock.json的作用，Node.js模块的加载机制

gulp 

1. 第三方模块

1.1 第三方模块-gulp

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

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

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

1.2 gulp能做什么？

            - 项目上线，HTML,CSS,JS文件压缩合并

           - 语法转换（ES6, LESS）

           - 公共文件抽离（方便修改）

           - 修改文件浏览器自动刷新

1.3 gulp的使用

• 下载：npm install gulp
• 在项目根目录下建立gulpfile.js文件,文件名不可以随意修改
• 重构项目的文件夹结构 src目录 - 放置源代码文件； dist目录-放置构建后的文件
• 在gulpfile.js文件中编写任务，用gulp提供的方法
• 在命令行工具执行gulp任务

1.4 gulp中提供的方法

• Gulp.src(): 获取任务处理的文件
• Gulp.dest(): 输出文件
• Gulp.task(): 建立gulp任务
• Gulp.watch(): 监控文件的变化

执行：

• Node命令执行 gulpfile.js会执行整个文件
• 想执行其中的 first文件, Gulp给我们提供了一个命令行工具：先去下载：npm install gulp-cli -g
• 这样执行： gulp first(要执行的任务名字)，他会自动去 当前项目根目录下去找gulpfile.js，在文件中招first,执行这个任务的回调函数

基本使用：

1.5 gulp插件

• Gulp轻内核的第三方模块，提供方法非常少，所有的功能用插件实现
• Gulp-htmlmin: html文件压缩
• Gulp-csso: 压缩css
• Gulp-babel: JavaScript语法转换： ES6-ES5
• Gulp-less: less语法转换
• Gulp-uglify: 压缩混淆JS
• Gulp-file-include：公共文件包含
• Browsersync: 浏览器实时同步

插件的使用：

1. 下载
2. 引入
3. 调用

//html任务 $ npm install --save  gulp-htmlmin $ npm install --save-dev gulp-file-include $ npm install gulp-less $ npm i gulp-csso $ npm install --save-dev gulp-babel @babel/core @babel/preset-env $ npm i gulp-uglify

Html任务 HTML文件中代码 的压缩操作 ： gulp-htmlmin 抽取html 文件中的公共代码，修改时，只修改单独文件就可以了 下载 $ npm install --save  gulp-htmlmin 引用插件：Const htmlmin = require(‘gulp-htmlmin’) 使用插件： Gulp.task(‘html’,() => { gulp.src(‘.src/*.html’)  // 获取所有的html文件 .pipe(htmlmin({collapseeWhitespace: true})) // 使用 htmlmin 压缩处理文件      .pipe(gulp.dest(‘dest’))；// 输出到dist目录下 }) 命令行 执行：gulp htmlmin 任务执行完成

2，html文件中的公共代码抽取，便于维护，这段代码有问题的时候，直接修改这段公共就可以了，不用改所有的 下载 $ npm install --save-dev gulp-file-include 引用：const  fileinclude = require(‘gulp-file-include’); 调用插件：gulp中任务执行是有顺序的，在压缩之前，要抽取公共代码 Gulp.task(‘html’,() => { gulp.src(‘.src/*.html’)  // 获取所有的html文件     .pipe(fileinclude())// 调用fileinclude() .pipe(htmlmin({collapseeWhitespace: true})) // 使用 htmlmin 压缩处理文件      .pipe(gulp.dest(‘dest’))；// 输出到dist目录下 }) 调用后，公共代码抽取：在src目录中，新建common文件夹，存html公共代码(比如头部，在common里新建一个文件：header.html, 把公共的头部代码粘贴过去；删掉原页面中的)， 在每一个页面引入刚才抽取的公共页面 @@include(‘./common/header.html’); 在命令行执行：gulp htmlmin 执行完成 到dist目录查看：抽取的公共代码，已经被包含在自己的html页面里了

// 建立css 任务 //1，less 语法转换 //2，css代码压缩   下载 $ npm install gulp-less 引用 const less = require(‘gulp-less’); 调用 // 建立任务 Gulp.task(‘cssmin’, () => { Gulp.src(‘./src/css/*.css’，‘./src/css/*.less’); //将less语法转为css；获取所有less文件 .pipe(less()) // 转换 .pipe(gulp.dest(‘dist/css’)) //处理的结果输出 }) 执行 gulp cssmin 在dist中查看 问题：css下也有很多less文件，要同时拷贝css,less; 可以同时写多个文件 对所有的文件压缩：下载插件 $ npm i gulp-csso 引用它 const csso = require(‘gulp-csso’); 使用它： Gulp.task(‘cssmin’, () => { Gulp.src(‘./src/css/*.css’，‘./src/css/*.less’); //将less语法转为css；获取所有less文件以及css 文件 .pipe(less()) // less转换为css .pipe(csso()) // 调用，压缩css代码 .pipe(gulp.dest(‘dist/css’)) //处理的结果输出 }) 命令行执行：glup cssmin

Js 任务 ES6代码转化 代码压缩 Gulp.task(“jsmin”,() => {    Gulp..src(‘./src/js/*.js’)   }) 下载插件：$ npm install --save-dev gulp-babel @babel/core @babel/preset-env 引用：const babel = require(‘gulp-babel’); 调用：.pipe(babel({ //判断代码的运行环境，将代码转换为当前运行环境支持的代码      Presets: [‘@babel/env’] })) 输出：.pipe(gulp.dest(‘dist/js’)) 执行：gulp jsmin 压缩js代码：下载插件 $ npm i gulp-uglify 使用：const uglify = require(“gulp-uglify”); 调用插件：.pipe(uglify) // 获取所有Js 文件，西安转ES6，在处理 输出到dist 执行 gulp jsmin

把剩下的 image 和lib 文件夹 复制到 dist目录下：   gulp.task(‘copy’, () => {   // 建立copy任务 gulp.src(‘./src/images/*’)  //获取文件    .pipe(gulp.dest(‘dist/images’)); //复制到dist gulp.src(‘./src/lib/*’)    .pipe(gulp.dest(‘dist/lib’)); }) 命令行执行：gulp copy

这几个任务，很多，分别编写，分别执行 想要执行一个，其他的也跟着执行 我们可以编写一个 bulid 任务，执行它，其他也跟着执行 gulp.task(‘default’, [‘htmlmin’, ‘cssmin’, ’jsmin’, ‘copy’])  // 当我们执行default任务时，其他任务跟着执行, 如果你的名字是default，可以省略，再在命令行执行gulp, 回车就可以了

 

2. package.json文件

2.1 node_modules文件夹问题：

1）. 文件过多过碎，当我们将项目整体拷贝给别人的时候，传输速度慢很慢

2）. 复杂的模块依赖关系需要被记录，确保模块的版本和当前保持一致，否则会导致前前项目运行报错

2.2 package.json文件的作用

- Npm 为我们提供了这个项目描述文件，当别人拿到这个项目时，根据这个json文件中所记载的依赖项去下载这个第三方模块。这个项目在别人的电脑就可以运行

- package.json文件主要记录当前项目信息，例如名称，作者，github地址，当前项目依赖了那些那三方模块

- 使用npm init -y命令生成该文件 y: yes, 不填写任何信息，使用默认值

{   "name": "description",   "version": "1.0.0",   "description": "",   "main": "index.js",   // 项目的主入口文件  主模块   "scripts": {   // 命令的别名，当执行命令很长，在命令行使用时很麻烦 使用 npm run + 别名     "test": "echo \"Error: no test specified\" && exit 1" }, “keywords”: [],  // 关键字，可以用关键字描述   "author": "",   "license": "ISC" // 开放源代码的协议=项目遵循的协议 }

 

【解决问题1】：

• 下载多个模块，空格隔开： npm i formidable mime
• 当我们给别人传文件的时候，并不会传node_modules文件：
• 别人去命令行： npm install 回车就好， node_modules文件会自己回来

2.3 项目依赖

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

使用npm install 安装的文件默认会被添加到package.json文件的depedences

2.4 开发依赖

在项目开发阶段需要依赖, 服务器环境，线上运营阶段不需要依赖的第三方包

使用npm install 包名 –save-dev 命令 添加到package.json文件的devDepedices

npm install gulp --save-dev: gulp 是开发依赖

npm install 会全部下载

npm install –production 生产环境=线上，服务器的运行环境， 运行依赖= depedencies

2.5 packjson-lock.json的作用

模块模块的依赖关系， 下载地址，锁定包的版本

锁定包的版本，确保再次下载不会因版本不同产生问题

加快下载速度，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址，重新安装只需下载就好，不需额外工作

 

3. Node.js模块的加载机制

3.1 模块查找规则-当模块中拥有路径但灭有后缀时

           - require(‘./find.js’);

           - require(‘./find’);

           - require方法根据模块路径查找模块，完整路径的话，直接顺着路径找到引入

           - 后缀省略，先找同名find.JS文件，再找同名JS文件夹，

           - 如果找到同名文件夹，找到其中的index.js

           - index.js没有的话，去package.js文件去找 main选项中的入口文件

           - 如果指定入口文件不存在，或者没有就会报错，模块没有找到

5.2 模块查找规则 – 模块 没有路径也灭有后缀 require(‘find’);

           - node.js会假设他是系统模块，是就执行，不是得话

           - 回去node_modules文件夹去找

           - 首先看是否有同名字的JS文件

           - 再看是否有同名字的文件夹

           - 如果是文件夹，看有没有index.js

           - 如果没有，看package.js文件去找main选项中的入口文件

           - 还没有，报错

 

5.3. 解决localhost 和127.0.0.1 不一致问题

win10 localhost 解析为::1 的解决办法

.输入命令  netsh interface ipv6 show prefixpolicies，查询ipv6优先级

请注意，IPv6地址（:: / 0）优先于IPv4地址（:: / 96，:: ffff：0：0/96），因此我们可以制定策略，使IPv6不会比任何IPv4地址有利。其中，标签表示优先级，0表示优先级最高，依次类推。

现在需要设置使::/96、::ffff:0:0/96的优先级高于::/0和::1/128，在命令行中依次设置优先级：

netsh int ipv6 set prefix ::/96 50 0

netsh int ipv6 set prefix ::ffff:0:0/96 40 1

netsh int ipv6 set prefix 2002::/16 35 2

netsh int ipv6 set prefix 2001::/32 30 3

netsh int ipv6 set prefix ::1/128 10 4

netsh int ipv6 set prefix ::/0 5 5

netsh int ipv6 set prefix fc00::/7 3 13

netsh int ipv6 set prefix fec0::/10 1 11

netsh int ipv6 set prefix 3ffe::/16 1 12

在查询优先级

可以看到，此时:: / 96，:: ffff：0：0/96优先级高于::/0了。ping一下localhost,