从前慢-Node+Gulp+Promise+Express

Posted 2021-08-04 Java大世界

前言

想要获取该该课程markdown笔记（脑图+笔记）。
搜索微信公众号-Java大世界。回复ngpe，即可
获取笔记获取方式。

Node+Gulp+Promise+Express

1.1 Node的介绍及基础语法

Node是一个基于Chrome V8引擎的javascript代码运行环境。
浏览器（软件）能够运行JavaScript代码，浏览器就是
JavaScript代码的运行环境
Node（软件）能够运行JavaScript代码，Node就是
JavaScript代码的运行环境

node之所以能够运行JavaScript代码，是因为内部有V8引擎
node -v（查看当前node的版本）
JavaScript 由三部分组成，ECMAScript，DOM，BOM。
Node. js是由 ECMAScript及Node环境提供的一些附加API组
成的，包括文件、网络、路径等等一些更加强大的API

执行文件
node 文件名.js

1.1.1 Node全局对象global

在浏览器中全局对象是window，在Node中全局对象是global。
Node中全局对象下有以下方法，可以在任何地方使用，
global可以省略。
console.log()     在控制台中输出
setTimeout()     设置超时定时器
clearTimeout()  清除超时时定时器
setInterval()      设置间歇定时器
clearInterval()   清除间歇定时器

/*global.console.log('我是global对象下面的console.log方法输出的内容');

global.setTimeout(function (){
 console.log('123');
}, 2000)*/

console.log('我是global对象下面的console.log方法输出的内容');

setTimeout(function (){
    console.log('123');
}, 2000)

1.2 Node中模块化

Node.js规定一个JavaScript文件就是一个模块，模块内部
定义的变量和函数默认情况下在外部无法得到
模块内部可以使用exports对象进行成员导出， 使用
require方法导入其他模块。

1.2.1 模块成员导出

// a.js
  // 在模块内部定义变量
 let version = 1.0;
 // 在模块内部定义方法
 const sayHi = name => `您好, ${name}`;
 // 向模块外部导出数据 
 exports.version = version;
 exports.sayHi = sayHi;

1.2.2 模块成员的导入

  // b.js
  // 在b.js模块中导入模块a
 let a = require('./b.js');
  // 输出b模块中的version变量
 console.log(a.version);
  // 调用b模块中的sayHi方法 并输出其返回值
 console.log(a.sayHi('黑马讲师')); 

导入模块时后缀可以省略

案例导入导出

module-a.js

const add = (n1, n2) => n1 + n2;

exports.add = add;

module-b.js

//const a = require('./03.module-a.js');
const a = require('./03.module-a');
console.log(a.add(10, 20));

1.2.3 模块成员导出的另一种方式

module.exports.version = version;
module.exports.sayHi = sayHi;

exports是module.exports的别名(地址引用关系)，导出
对象最终以module.exports为准

1.2.4 模块导出两种方式的联系与区别

module.exports

const greeting = name => `hello ${name}`;
const x = 100;
exports.x = x;
module.exports.greeting = greeting;
// 当exports对象和moudle.exports对象指向的不是同一个对象时 以module.exports为准
module.exports = {
    name: 'zhangsan'
}

exports = {
    age: 20
}

1.2.5 系统模块

Node运行环境提供的API. 因为这些API都是以模块化
的方式进行开发的, 所以我们又称Node运行环境提供的API为系统模块

1.2.5.1 系统模块fs（文件操作系统）文件操作

const fs = require('fs');
fs.reaFile('文件路径/文件名称'[,'文件编码'], callback); // 读取文件内容

1.2.5.1.1 读取内容

// 1.通过模块的名字fs对模块进行引用
const fs = require('fs');

// 2.通过模块内部的readFile读取文件内容
fs.readFile('./01.helloworld.js', 'utf8', (err, doc) => {
    // 如果文件读取出错err 是一个对象 包含错误信息
    // 如果文件读取正确 err是 null
    // doc 是文件读取的结果
    console.log(err);
    console.log(doc);
});

1.2.5.1.2 写入文件内容

const fs = require('fs');
fs.writeFile('文件路径/文件名称', '数据', callback);

const fs = require('fs');

fs.writeFile('./demo.txt', '即将要写入的内容', err => {
    if (err != null) {
        console.log(err);
        return;
    }

    console.log('文件内容写入成功');
})

1.2.5.1.3 路径拼接语法

为什么要进行路径拼接 
不同操作系统的路径分隔符不统一
/public/uploads/avatar
Windows 上是 \   /
Linux 上是 /

const path = require('path');
 // 路径拼接
let finialPath = path.join('itcast', 'a', 'b', 'c.css');
 // 输出结果 itcast\a\b\c.css
console.log(finialPath);

1.2.5.1.4 相对路径VS绝对路径

大多数情况下使用绝对路径，因为相对路径有时候相
对的是命令行工具的当前工作目录
在读取文件或者设置文件路径时都会选择绝对路径
使用__dirname获取当前文件所在的绝对路径

const fs = require('fs');
const path = require('path');

console.log(__dirname);
console.log(path.join(__dirname, '01.helloworld.js'))

fs.readFile(path.join(__dirname, '01.helloworld.js'), 'utf8', (err, doc) => {
    console.log(err)
    console.log(doc)
});

1.2.5.1.5 第三方模块

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

第三方模块有两种存在形式：
以js文件的形式存在，提供实现项目具体功能的API接口。
以命令行工具形式存在，辅助项目开发

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

1.2.6 npm

npm (node package manager) ：node的第三方模块管理工具
下载：npm install 模块名称 // 默认在下载的目录下生
成node_modules。
卸载：npm unintall package 模块名称

npm默认全局安装路径
C:\Users\Administrator\AppData\Roaming\npm

npm install --save 、--save-dev 、-D、-S 的区别

1、npm install <=> npm i

   --save   <=> -S     

   --save-dev  <=> -D 

npm run start <=> npm start  // 对应"scripts"里的"start"命令

2、npm i --save-dev  <packname>  

工程构建（开发时、“打包”时）依赖 ；例：xxx-cli , less-loader , babel-loader...

3、npm i --save <packname> 

项目（运行时、发布到生产环境时）依赖；例：antd , element,react...

4、对应关系如下

5、使用 npm i 安装package.json里的依赖时，两部分的
包都会pull下来

使用 --prod

npm i --prod <=> npm i --production  // 仅会拉取dependencies中的依赖

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

1.2.6.1 npm 下载慢解决办法

有两个办法：

1、安装cnpm

命令：npm install cnpm -g --registry=https://registry.npm.taobao.org

以后就用 cnpm 代替 npm 做操作。从地址看出这是淘宝的国内镜像，比较快。据说每10分钟更新一次仓库，同步性也好

2、更改npm的绑定地址
命令：npm config set registry https://registry.npm.taobao.org
这样以后还是用npm，但已切换到淘宝镜像
更改后可通过下面命令来验证是否成功

npm config get registry

当然，想换回来也行，npm的原始仓库地址是 https://registry.npmjs.org/

1.2.7 nodemon

nodemon是一个命令行工具，用以辅助项目开发。
在Node.js中，每次修改文件都要在命令行工具中重新
执行该文件，非常繁琐。
使用npm install -g  nodemon下载它
在命令行工具中用nodemon命令替代node命令执行文件

1.2.8 nrm

nrm ( npm registry manager )：npm下载地址切换工具
npm默认的下载地址在国外，国内下载速度慢
使用步骤
使用npm install nrm –g 下载它
查询可用下载地址列表 nrm ls
切换npm下载地址 nrm use 下载地址名称

1.2.9 Gulp

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

Gulp能做什么

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

Gulp的使用

在项目根目录下使用npm install gulp下载gulp库文件
在项目根目录下建立gulpfile.js文件
重构项目的文件夹结构 src目录放置源代码文件 dist目录
放置构建后文件
在gulpfile.js文件中编写任务.
在命令行工具中执行gulp任务（因为node命令是执行某个文
件，所以我们要
使用npm install gulp-cli -g来使用gulp来执行某个文件的具
体任务。安装好后
使用gulp 任务名字就可以了，gulp会去gulpfile.js寻找指
定的任务。

Gulp中提供的方法

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

Gulp插件

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

使用例子

// 引用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');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
// 使用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', () => {
    gulp.src('./src/*.html')
        .pipe(fileinclude())
        // 压缩html文件中的代码
        .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'))
});

// js任务
// 1.es6代码转换
// 2.代码压缩
gulp.task('jsmin', () => {
    gulp.src('./src/js/*.js')
        .pipe(babel({
            // 它可以判断当前代码的运行环境 将代码转换为当前运行环境所支持的代码
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
});

// 复制文件夹
gulp.task('copy', () => {

    gulp.src('./src/images/*')
        .pipe(gulp.dest('dist/images'));

    gulp.src('./src/lib/*')
        .pipe(gulp.dest('dist/lib'))
});

// 构建任务
gulp.task('default', ['htmlmin', 'cssmin', 'jsmin', 'copy']);

该文章篇幅太大，想了解更多，点击阅读原文即可！
可能会出现微信没有相应，点击等待即可。