Node.js入门和Gulp的使用

àì夳堔傛蜴生んèń 2023-02-16 06:48 4阅读 0赞

### Node.js入门和Gulp的使用 ###

*  Node.js入门和Gulp的使用
 *   *  1 Node.js入门
     *   *  1.1 Node介绍与环境的搭建
         *  1.2 Node.js的使用
         *   *  1.2.1 Node.js模块化开发
             *  1.2.2 系统模块
             *   *  （1）readFile.js的使用
                 *  （2）writeFile.js的使用
                 *  （2）path.js的使用
             *  1.2.3 第三方模块介绍与使用
             *   *  （1）获取第三方模块
                 *  （2）第三方模块 nodemon
                 *  （3）第三方模块 nrm
     *  2 Gulp的使用（第三方模块）
     *   *  2.1 Gulp介绍与使用
         *  2.2 Gulp提供的方法与插件
         *   *  2.2.1 Gulp提供的方法如下：
             *  2.2.2 Gulp相关处理文件的插件如下：
             *  2.2.3 使用的有关代码如下：（特别要注意gulp3版本和4版本的变化问题）
         *  2.3 package.json文件
         *   *  2.3.1 node\_modules文件夹的问题：
             *  2.3.2package.json文件的作用：
             *  2.3.3 项目依赖与开发依赖
             *  2.3.4 package-lock.json文件的作用
         *  2.4 Node.js中模块加载机制
         *   *  2.4.1 模块查找规则-当模块拥有路径但没有后缀时
             *  2.4.2 模块查找规则-当模块没有路径且没有后缀时

# Node.js入门和Gulp的使用 #

## 1 Node.js入门 ##

### 1.1 Node介绍与环境的搭建 ###

Node是一个基于Chrome V8引擎的JavaScript代码运行环境。

**运行环境：**

*  浏览器（软件）能够运行JavaScript代码，浏览器就是JavaScript代码的运行环境。
 *  Node（软件）能够运行JavaScript代码，Node就是JavaScript代码的运行环境。

**环境的搭建：**

1.到官网上去下载你电脑对应版本的node.js  
2.双击下载的node.js安装包安装即可，安装位置可以修改，也可以选择默认的。  
3.配置环境变量。  
4.在CMD控制台中输入node -v可以看到nodejs的版本号，看node环境是否搭建成功。

### 1.2 Node.js的使用 ###

#### 1.2.1 Node.js模块化开发 ####

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

1.模块成员导出代码（第一种导出的方式）：

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

模块成员导入代码：

2.模块成员导出的另一种方式：module。  
代码如下：

导入代码：

const a = require('./04.module.exports.js');
    // console.log(a.greeting('zhangsan'));
    console.log(a);

结论：当exports对象和moudle.exports对象指向的不是同一个对象时 以module.exports为准。

#### 1.2.2 系统模块 ####

Node运行环境提供的API. 因为这些API都是以模块化的方式进行开发的, 所以我们又称Node运行环境提供的API为系统模块。  
![在这里插入图片描述][20200609105609345.png]

##### （1）readFile.js的使用 #####

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

##### （2）writeFile.js的使用 #####

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

##### （2）path.js的使用 #####

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

#### 1.2.3 第三方模块介绍与使用 ####

别人写好的、具有特定功能的、我们能直接使用的模块即第三方模块，第三方模块有两种存在形式：

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

##### （1）获取第三方模块 #####

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

*  下载：npm install 模块名称
 *  卸载：npm unintall package 模块名称

**全局安装与本地安装：**

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

##### （2）第三方模块 nodemon #####

nodemon是一个命令行工具，用以辅助项目开发。用于改善在Node.js中，每次修改文件都要在命令行工具中重新执行该文件，非常繁琐。**nodemon可以帮助项目自动更新。**

上面提到命令行工具一般都是全局安装，使用步骤如下：

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

##### （3）第三方模块 nrm #####

nrm ( npm registry manager )：npm下载地址切换工具，npm默认的下载地址在国外，国内下载速度慢。

使用步骤如下：

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

## 2 Gulp的使用（第三方模块） ##

### 2.1 Gulp介绍与使用 ###

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

**2.Gulp能做什么**：

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

**3.Gulp的使用**：

*  1.使用npm install gulp下载gulp库文件，如此同时，还需要npm install gulp-cli -g全局安装gulp-cli工具；
 *  2.在项目根目录下建立gulpfile.js文件；
 *  3.重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件；
 *  4.在gulpfile.js文件中编写任务；
 *  5.在命令行工具中执行gulp任务。

注意：gulp-cli的目的是让你像使用全局程序一样使用gulp，但并不是在全局安装gulp。gulp是一个让你在代码中使用gulp的JS库；gulp-cli是一个让你在命令行中使用gulp的辅助程序。

### 2.2 Gulp提供的方法与插件 ###

#### 2.2.1 Gulp提供的方法如下： ####

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

#### 2.2.2 Gulp相关处理文件的插件如下： ####

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

#### 2.2.3 使用的有关代码如下：（特别要注意gulp3版本和4版本的变化问题） ####

// 引用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',(done) => { 
    	 gulp.src('./src/*.html')
    		.pipe(fileinclude())
    		// 压缩html文件中的代码
    		.pipe(htmlmin({  collapseWhitespace: true }))
    		.pipe(gulp.dest('dist'));
    		done()
    });
    
    // css任务
    // 1.less语法转换
    // 2.css代码压缩
    gulp.task('cssmin', (done) => { 
    	// 选择css目录下的所有less文件以及css文件
    	gulp.src(['./src/css/*.less', './src/css/*.css'])
    		// 将less语法转换为css语法
    		.pipe(less())
    		// 将css代码进行压缩
    		.pipe(csso())
    		// 将处理的结果进行输出
    		.pipe(gulp.dest('dist/css'));
    		done()
    });
    
    // js任务
    // 1.es6代码转换
    // 2.代码压缩
    gulp.task('jsmin', (done) => { 
    	gulp.src('./src/js/*.js')
    		.pipe(babel({ 
    			// 它可以判断当前代码的运行环境 将代码转换为当前运行环境所支持的代码
                presets: ['@babel/env']
            }))
            .pipe(uglify())
            .pipe(gulp.dest('dist/js'));
            done()
    });
    
    // 复制文件夹
    gulp.task('copy', (done) => { 
    
    	gulp.src('./src/images/*')
    		.pipe(gulp.dest('dist/images'));
    
    	gulp.src('./src/lib/*')
    		.pipe(gulp.dest('dist/lib'));
    	done()
    });
    
    // 构建任务
    // gulp.task('default', ['htmlmin', 'cssmin', 'jsmin', 'copy']);
    
    gulp.task('default', gulp.series(gulp.parallel('htmlmin', 'cssmin', 'jsmin', 'copy',done => done())));

### 2.3 package.json文件 ###

#### 2.3.1 node\_modules文件夹的问题： ####

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

#### 2.3.2package.json文件的作用： ####

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

#### 2.3.3 项目依赖与开发依赖 ####

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

{ 
        "dependencies": { 
            "jquery": "^3.3.1“
        }
     }

2.在项目的开发阶段需要依赖，线上运营阶段不需要依赖的第三方包，称为开发依赖使用npm install 包名 --save-dev命令将包添加到package.json文件的devDependencies字段中

{ 
        "devDependencies": { 
            "gulp": "^3.9.1“
        }
     }

#### 2.3.4 package-lock.json文件的作用 ####

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

### 2.4 Node.js中模块加载机制 ###

#### 2.4.1 模块查找规则-当模块拥有路径但没有后缀时 ####

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

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

#### 2.4.2 模块查找规则-当模块没有路径且没有后缀时 ####

require('find');

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

[20200609105609345.png]: https://img-blog.csdnimg.cn/20200609105609345.png