前后端交互Node+Gulp之Node基础

---

Node开发概述

1. 为什么学习服务器端开发基础

• 能够和后端程序紧密配合
• 网站业务逻辑前置，前端技术选哟后端技术支撑（Ajax）
• 扩展知识视野，站在更高的角度审视整个项目

2. 服务器端开发要做的事情

• 实现网站业务逻辑，登录问题
• 数据增删改查 购物网站 删除商品数量

3. 为什么选择Node

• 使用JavaScript语法开发后端应用
• 一些公司需要前端工程师掌握Node
• 生态系统活跃，有大量的开源库可以使用
• 前端开发工具大多基于Node

4.Node是什么
Node是一个基于Chrome V8引擎的JavaScript代码运行坏境

Node坏境搭建

Node官网
Path 存储系统中的目录
nodejs如何知道子进程正在等待输入

Node.js组成

JavsScript由三部分组成：ECMAScript DOM BOM
Node.js由： ECMAScript Node坏境提供的一些附加的API组成，包括文件、网络、路径等等一些更加强大的API

Node简单使用

进入d盘 cd d:
返回上一级目录 ../

Node.js模块化开发

1.JavaScript 存在两大问题：文件依赖 命名冲突 文件依赖就是有的js文件需要先引入才能使用后面的js文件 比如jQuery.js文件需要先引入

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

模块开发两步骤：

1. 在被导入函数文件里面写入语句(两种)

//在a模块实现加法函数
const add = (n1, n2) => n1 + n2;
exports.add = add;//第一种

const greeting = name => `hello ${name}`;
module.exports.greeting = greeting;//第二种

2. 在需要导入另一个函数文件的js文件中写：

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

const a = require('./04-module-exports');
console.log(a.greeting('zhangsan'));//第二种

模块导入两种方式区别：当module.exports与exports指向的地址不同时以module.exports为准

系统模块

1. 系统模块fs文件操作 f----file 文件 s: system系统

读取文件内容 fs.reaFile(‘文件路径/文件名称’ [,‘文件编码’]，callback);
fs使用案例

//1.通过模块名字fs对模块进行引用
const fs = require('fs');
//2.通过模块内部的readFile读取文件内容
fs.readFile('./helloworld.js', 'utf8', (err, doc) => {
    //如果文件读取出错err是对象 包含错误信息
    //如果文件读取正确err 是空null
    //doc 是文件读取的结果
    console.log(err);
    console.log(doc);//显示helloworld.js文件里面的内容
});

3. 写入文件内容 fs.writeFile(‘文件路径/文件名称’,‘数据’,callback);

const { fstat } = require("fs");
const fs = require('fs');
fs.writeFile('./demo.txt', '即将要写入的内容', err => {
    if (err != null) {
        console.log(err);
        return;
    }
    console.log('文件内容写入成功');
})

5. 系统模块path路径操作
   为什么要进行路径拼接：

• 不同操作系统的路径分隔符不统一
• /public/uploads/avatar
• Windows上是\ /
• Linus上是/
  路径拼接语法path.join('路径','路径',...);

const path = require('path');
const finalPath = path.join('public', 'uploads', 'avatar');
console.log(finalPath);

6. 相对路径VS绝对路径

• 大多数情况使用绝对路径，因为先对路径是可变的所以不安全
• 在读取文件或者设置文件路径时都会选择路径
• 使用__dirname获取当前文件所在的绝对路径

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

第三方模块

第三方模块提供特定功能，又叫包，第三方模块有两种存在形式：

• 以js文件形式存在，提供实现项目具体功能的API接口
• 以命令行工具形式存在，辅助项目开发；
• Node.js中模块的加载机制
  获取第三方模块 npmjs.com
  如何使用第三方模块 在PowerShell当前工作路径输入npm install formidable

全局安装 本地安装

• 命令行工具 全局安装 在最后面+-g
• 库文件：本地安装

nodemon模块
nodemon是一个命令行工具，用以辅助项目开发
在Node.js中，每次修改文件都要在命令行工具中重新执行该文件；
使用npm install nodemon -g下载，增加-g表示全局安装
下载完成之后nodemon .\helloworld.js运行试试发现出错了

解决方法
nrm模块
nrm:npm 下载地址切换工具

使用nrm步骤如下图所示

Gulp模块
基于node平台开发的前端构建工具 对一些机械化命令写成命令行就能执行提高开发效率
Gulp可以做什么？

• 项目上线 HTMl 、CSS、JS文件压缩合并
• 语法转换
• 公共文件抽离
• 修改文件浏览器自动刷新
  Gulp使用步骤
  
  
  案例如下：
• 首先是新建gulp-demon文件夹，然后在这个文件夹下面新建dist src文件夹 和gulpfile.js文件；src文件夹里面包含了一些源代码；
• npm install gulp 安装gulp的库文件；
• 编写任务文件；
• 下载gulp命令行工具 npm install gulp-cli -g
• 使用gulp first
  在执行上面命令的时候出错了，参考文献解决了

//引用gulp模块
const gulp = require('gulp');
//使用gulp.task建立任务
//1.任务名称  
//2.任务的回调函数 first是任务名称
gulp.task('first', () => {
    console.log('我们人生中的第一个gulp任务执行了');
    //1.使用gulp.src获取要处理的文件  下面语句需要加return
    return gulp.src('./src/css/base.css')
        .pipe(gulp.dest('dist/css')); //dest处理 把src文件夹下的base.css拷贝到了dist下面的css文件夹里面
});

gulp
npm 下载gulp插件
使用gulp执行任务之前要先下载需要的插件

任务代码案例如下

• html任务 压缩html文件插件gulp-htmlmin 抽取文件公共代码使用gulp-file-include插件

//html任务
//1.html文件中代码的压缩操作
//2.抽取html文件中的公共代码
gulp.task('htmlmin', () => {
    return gulp.src('./src/*.html') //获取当前文件夹src下的所有html文件
        .pipe(fileinclude())
        //压缩html文件中的代码
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('dist'));
});

• css文件压缩任务 使用gulp-csso插件 less转css使用gulp-less插件

//css任务
//1.less语法转换
//2.css代码压缩
gulp.task('cssmin', () => {
    //选择css目录下的所有less css文件
    return gulp.src(['./src/css/*.less', './src/css/*.css'])
        //less语法转换为css语法
        .pipe(less())
        //css代码压缩
        .pipe(csso())
        //将处理结果进行输出
        .pipe(gulp.dest('dist/css'))
});

• js任务，es6代码转换为es5标准使用插件gulp-babel 代码压缩使用插件gulp-uglify

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

• 复制文件夹

//复制文件夹
gulp.task('copy', () => {
    return gulp.src('./src/images/*')
        .pipe(gulp.dest('dist/images')),
        gulp.src('./src/lib/*')
        .pipe(gulp.dest('dist/lib'))
});

• 构建任务 使得执行任务default就能执行其他需要执行的任务 在这里需要注意gulp版本不一样 命令写法有差别参考博文

//构建任务 default gulp版本是4.0.2所以需要把其他任务放到gulp.series()语句里面
gulp.task('default', gulp.series('first', 'htmlmin', 'cssmin', 'jsmin', 'copy')); //执行default任务会依次执行后面数组里面的任务

package.json文件

Gulp下面的node_modules文件夹问题

package.json文件记录项目依赖哪些第三方模块
使用npm init -y快速生成项目信息 所以有了package.json在传输文件给别人的时候不要传递node_modules大文件了

npm install --production只下载json文件 dependencies里面有的插件
npm install 则会下载所有插件？

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

json文件里面的script里面是任务别名可通过npm run 别名实现

"scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "nodemon app.js"
    },

在powerShell里面输入npm run build

Node.js中模块的加载机制

第一种情况 有路径有后缀或者有路径没后缀

1. require 方法根据模块路径查找模块，如果是完整路径则直接引入模块；
2. 模块查找规则-当模块拥有路径但没有后缀的时候,先找同名JS文件再找同名JS文件夹
3. 如果在找到了同名文件夹，找文件夹中的index.js文件
4. 文件夹中没有index.js就会去当前文件夹中的package.js文件中查找main选项中的入口文件
5. 如果指定的入口文件不存在或者没有指定入口文件就会报错；

require('./find.js);
require('./find');

当前模块没有路径也没有后缀require('find');

1. Node.js会假设他是系统模块
2. Node.js会去node_modules文件夹中
3. 首先看是否有该名字的JS文件
4. 再看是否有该名字的文件夹
5. 如果是文件夹再看里面是否有index.js
6. 如果没有index.js查看该文件夹中的package.json中的main选项确定模块入口文件
7. 否则找不到报错

10132888

---

总结