Node.js+Gulp

本文介绍了Node.js的基本概念,如其非阻塞I/O特性、基于事件驱动的开发模式,以及Node.js如何利用V8引擎和模块化实现高效服务器端编程。涵盖了Node安装、模块化开发、系统模块(如文件和路径操作)和第三方模块(如Gulp和package.json)的使用。
摘要由CSDN通过智能技术生成

一、简介

1、什么是Node.js?

Node.js 是一种建立在Google Chrome’s v8 engine上的 non-blocking (非阻塞), event-driven (基于事件的) I/O平台.
Node.js平台使用的开发语言是JavaScript,平台提供了操作系统低层的API,方便做服务器端编程,具体包括文件操作、进程操作、通信操作等系统模块

2、Node.js的特性

  1. 基于V8引起渲染JS
  • REPL模式(Read-Evaluate-Print-Loop, 输入-求值-输出-循环)
  • 在命令行中 node xxx.js
  • 在webstorm,Vscode等编译器中执行
  1. 单线程、无阻塞IO操作、event-driven时间驱动
  • node是单线程异步,基于事件驱动任务执行的
  • 类似于发布订阅(响应式)
  1. window VS global
  • 客户端this执向window
  • 在JS中执行,this执行当前模块,在命令行中执行,this指向global
  • Process.nextTick/setImmediate

3、Node的优点

Node作为一个热门的前端框架,后台语言,有很多吸引人的地方:

RESTful API

单线程

Node可以在不新增额外线程的情况下,依然可以对任务进行并发处理 —— Node.js是单线程的。它通过事件循环(event loop)来实现并发操作,对此,我们应该要充分利用这一点 —— 尽可能的避免阻塞操作,取而代之,多使用非阻塞操作。

非阻塞IO

V8虚拟机

事件驱动

二、Node基础知识

1、Node安装

官网:https://nodejs.org/en/

  • LTS = Long Term Support 长期支持版 稳定版
  • Current 拥有最新特性 实验版

Node环境安装失败解决办法

1. 错误代号2502、2503

失败原因:系统帐户权限不足。

解决办法:

  1. 以管理员身份运行powershell命令行工具
  2. 输入运行安装包命令 msiexec /package node安装包位置

在这里插入图片描述

2. 执行命令报错

失败原因:Node安装目录写入环境变量失败

解决办法:将Node安装目录添加到环境变量中

在这里插入图片描述

PATH环境变量

存储系统中的目录,在命令行中执行命令的时候系统会自动去这些目录中查找命令的位置。

在这里插入图片描述

多版本安装方式


卸载已有的Node.js
下载nvm
在C盘创建目录dev
在dev目中中创建两个子目录nvm和nodejs
并且把nvm包解压进去nvm目录中
在install.cmd文件上面右键选择【以管理员身份运行】
打开的cmd窗口直接回车会生成一个settings.txt文件,修改文件中配置信息
配置nvm和Node.js环境变量

  • NVM_HOME:C:\dev\nvm
  • NVM_SYMLINK:C:\dev\nodejs

把配置好的两个环境变量加到Path中

2、Node.js的组成

JavaScript 由三部分组成,ECMAScript,DOM,BOM。

Node.js是由ECMAScript及Node 环境提供的一些附加API组成的,包括文件、网络、路径等等一些更加强大的 API。

在这里插入图片描述

基础语法

所有ECMAScript语法在Node环境中都可以使用。在Node环境下执行代码,使用Node命令执行后缀为.js的文件即可

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9DKUrY8p-1577712588681)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1577622258996.png)]

全局对象global
在浏览器中全局对象是window,在Node中全局对象是global。

Node中全局对象下有以下方法,可以在任何地方使用,global可以省略。

  • console.log() 在控制台中输出
  • setTimeout() 设置超时定时器
  • clearTimeout() 清除超时时定时器
  • setInterval() 设置间歇定时器
  • clearInterval() 清除间歇定时器

3、Node.js的模块化开发

(1)JavaScript开发弊端

JavaScript在使用时存在两大问题,文件依赖和命名冲突。

(2)软件中的模块化开发

(3)Node.js中的模块化开发规范

Node.js规定一个JavaScript文件就是一个模块,模块内部定义的变量和函数默认情况下在外部无法得到

模块内部可以使用exports对象进行成员导出, 使用require方法导入其他模块。

在这里插入图片描述

4、系统模块

(1)什么是系统模块

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

例:文件模块

在这里插入图片描述

(2)系统模板fs文件操作

f:file 文件 ,s:system 系统,文件操作系统。

const fs = require('fs');

读取文件内容

fs.reaFile('文件路径/文件名称'[,'文件编码'], callback);

注:callback 为回调函数

// 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);
});

在这里插入图片描述

写入文件内容

fs.writeFile('文件路径/文件名称', '数据', callback);
 const content = '<h3>正在使用fs.writeFile写入文件内容</h3>';
 fs.writeFile('../index.html', content, err => {
   if (err != null) { 
       console.log(err);
       return;
   }
   console.log('文件写入成功');
 });

(3)系统模块path 路径操作

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


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

相对路径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)
});

5、第三方模块

(1)什么是第三方模块

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

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

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

(2)获取第三方模块

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

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

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

全局安装与本地安装

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

(3)第三方模块 nodemon


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

使用步骤

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

在这里插入图片描述

(4)第三方模块 nrm


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

npm默认的下载地址在国外,国内下载速度慢

使用步骤:

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

(5)第三方模块 Gulp

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

(6)Gulp能做什么

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

(7)Gulp使用

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

(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'));
 });
// 引用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']);

(9)Gulp插件

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

6、package.json

(1)node_modules文件夹的问题


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


(2)package.json文件的作用


项目描述文件,记录了当前项目信息,例如项目名称、版本、作者、github地址、当前项目依赖了哪些第三方模块等。
使用npm init -y命令生成。

(3)项目依赖


在项目的开发阶段和线上运营阶段,都需要依赖的第三方包,称为项目依赖
使用npm install 包名命令下载的文件会默认被添加到 package.json 文件的 dependencies 字段中

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值