前后端交互Node+Gulp-02

第三方模块Gulp

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
1、引入2、创建

下载模块
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
880
在这里插入图片描述
下载,引用,调用

在这里插入图片描述
在这里插入图片描述
1、压缩
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
2、抽取公共代码
在这里插入图片描述
在这里插入图片描述
然后把AB两个文件中的公共代码保存到cm.html里面,再通过在AB文件里面加在这里插入图片描述
最后在命令行里执行
在这里插入图片描述

css任务

1、less语法转换
2、css代码压缩
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
2、
在这里插入图片描述
下载
在这里插入图片描述
引入
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
被压缩了:
在这里插入图片描述

js任务

1、es6转换
2、代码压缩

在这里插入图片描述
空格隔开,可以同时下载多个,后面的文件是他的依赖
在这里插入图片描述
引用
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
代码压缩 gulp-uglify
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
压缩之后
copy
在这里插入图片描述
在这里插入图片描述

构建任务

在这里插入图片描述

package.json文件

在这里插入图片描述
在这里插入图片描述
创建description文件,用命令行进入,(一次性 npm init -y)
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
下载两个模块
在这里插入图片描述
在这里插入图片描述
如果使用者缺乏这个模块,可以使用命令行工具npm install
下回来

项目依赖

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
区分的好处:让我们在不同的开发环境下下载不同的依赖,线下开发环境可以下载全部依赖,线上(服务器),就只下载dependencies

npm install --production 只会下载
在这里插入图片描述
在这里插入图片描述
别名+原来的名字
在这里插入图片描述
npm run build
在这里插入图片描述

node.js中模块的加载机制

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
省略后缀依然能找到
在这里插入图片描述
把find.js的名字改了,再执行会出错,这是新建一个find文件夹,里面创建一个Index.js的文件
在这里插入图片描述
在这里插入图片描述
如果index.js也没有,就找package.json
切换到find,
在这里插入图片描述
把main里面的默认执行改成main.js,并在find新建main.js
在这里插入图片描述
找的就是Main指向的那个文件,如果没有Main,就什么都找不到

第二种情况

在这里插入图片描述
在这里插入图片描述
系统里没有,去module去找
在这里插入图片描述
把find改名,创建find文件夹,文件夹里创建一个index.js文件
在这里插入图片描述
再改名,再find文件夹里创建json文件,把main指向改成b.js
在这里插入图片描述
入口文件不存在就找不到了

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值