本文共 2726 字，大约阅读时间需要 9 分钟。

Node.js第二天

一.第三方模块Gulp

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

将机械化操作编写成任务,想要执行机械化操作时执行个命令行命令 任务就能自动执行了用机器代替手工，提开发效率。

1.1 Gulp能做什么

● 项目上线，HTML、CSS、JS文件压缩合并

● 语法转换(es6、 less … ● 公共文件抽离 ● 修改文件浏览器自动刷新

1.2 Gulp使用

1.使用npm install gulp下载gulp库文件

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

1.3 Gulp中提供的方法

●gulp.src0): 获取任务要处理的文件

●gulp.dest(): 输出文件

const gulp = require('gulp') ;//使用gulp.task(方法建立任务gulp. task('first',() => {
   //获取要处理的文件	gulp.src('./src/css/base.css')//将处理后的文件输出到dist目录	.pipe(gulp.dest('./dist/css')) ;});

●gulp.task(): 建立gulp任务

●gulp.watch(): 监控文件的变化

1.4 Gulp插件

● gulp-htmlmin : html文件压缩

gulp.task('htmlmin',() => {
   	gulp.src('./src/*.html')		// 压缩html文件中的代码		.pipe(htmlmin({
    collapseWhitespace: true }))		.pipe(gulp.dest('dist'));});

● gulp-Csso: 压缩CSS

● gulp-less: less语法转化

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

● gulp-babel: JavaScript语法转化

● gulp-uglify: 压缩混淆JavaScript

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

● gulp-file-include 公共文件包含

● browsersync浏览器实时同步

// 复制文件夹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']);

二.package.json文件

2.1 node_modules文件夹的问题

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

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

2.2 package.json文件的作用

项目描述文件,记录了当前项目信息，例如项目名称、版本、作者、github地址、当前项目依赖了哪些第三方模块等。

使用npm init 命令生成。 接收方只需要进行 npm install自动下载当前模块所依赖的第三方模块。

2.3项目依赖

● 在项目的开发阶段和线上运营阶段,都需要依赖的第三包，称为项目依赖

● 使用npm install包名命令下载的文件会默认被添加到package.json文件的dependencies字段中

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

2.4开发依赖

●在项目的开发阶段需要依赖，线上运营阶段不需要依赖的第三方包，称为开发依赖

●使用npm install包名–save-dev命令将包添加到package.json文件的devDependencies字段中

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

2.5 package-lock.json文件的作用

● 锁定包的版本, 确保再次下载时不会因为包版本不同而产生问题

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

三.Node.js中模块加载机制

3.1 模块查找规则——当模块拥有路径但没有后缀时

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

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

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

require('find');

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

转载地址：https://blog.csdn.net/I_love_bc/article/details/117431860 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！