01 温故
npm
npm i 包 -S
npm i 包 -D
package.json
npm init -y
sass
scss -> css
npm i sass -g
git
git init
.git
git add .
git commit -m '信息'
git push
git clone
git pull
项目案例 -> gitee远程库
02 gulp
1.gulp 项目自动化打包构建工具
=> 操作对象: 项目
=> 自动化打包
开发环境 开发工作人员写好的项目代码
| gulp工具来执行任务 ex:压缩|sass->scss js最新语法->低版本兼容 ...
生产环境(服务器)
用户1,用户2...访问服务器
2.gulp使用
=>安装gulp环境
npm i gulp -g 【gulp全局依赖】
检查是否安装成功? gulp -version
=>项目目录
gulpDemo
-|src
-|pages
-index.html
-login.html
-|css
-index.css
-|sass
-index.scss
-|js
-index.js
-|static
-image
-|dist
-|css
注意:在项目文件夹gulpDemo 里面执行一个 npm 初始化
npm init -y => package.json文件
=> 写任务,在gulpfile.js配置文件
项目根目录下创建 gulpfile.js 文件
=> 如何写任务, 学习gulp提供写任务api
下载gulp 使用api
npm i gulp -D 【项目文件进行gulp安装】=> node_modules
下载之前:
初始化项目 npm init -y pageckage.json
=> gulp api 【重点】
03 gulp api
gulpfile.js文件中写 gulp 命令
1.引入安装的gulp对象
const gulp = require('gulp')
2.创建第一个gulp任务
* gulp.task('任务名',函数)
* gulp 任务名 => 终端执行任务
gulp.task('task1',function(){
//执行任务代码
//以下代码 代表的是复制文件
return gulp.src('./src/sass/**')
.pipe(gulp.dest('./dist/sass'))
})
gulp.task('task2', function () {
return gulp.src('./src/js/**')
.pipe(gulp.dest('./dist/js'))
})
3.创建一个流,从文件系统读取文件到数据对象(数据流)
let srcObj = gulp.src('./src/sass/**')
4.创建一个用于将数据对象写入到文件系统的流。
let desObj = gulp.dest('./dist/')
5.管道链接数据流
srcObj.pipe(desObj)
6. series 让任务按顺序执行
gulp.task('taskSeries',gulp.series('task1','task2'))
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3WFUinjn-1669771543926)(D:\lanCode\第二阶段\js笔记\js-md\img\gulp既定顺序执行任务.png)]
gulp.series 让任务按顺序执行
7. parallel 任务并发执行
gulp.task('taskPar',gulp.parallel('task1','task2'))
//可嵌套
gulp.task('taskparallel', gulp.parallel('task1',gulp.series('task1','task2')))
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZG3L23XW-1669771543927)(D:\lanCode\第二阶段\js笔记\js-md\img\gulp任务同时进行.png)]
parallel 任务并发执行
8. watch 侦听任务
gulp.task('watch1',function(){
gulp.watch('./src/css/**', gulp.parallel('task1'))
})
动态监听新创建的src>css文件,会同步执行task1任务中的复制文件操作
注意:命名避免关键词 文件路径
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TQA4Dc6O-1669771543928)(D:\lanCode\第二阶段\js笔记\js-md\img\gulp依赖包.png)]
('task1')) }) 动态监听新创建的src>css文件,会同步执行task1任务中的复制文件操作
注意:命名避免关键词 文件路径
[外链图片转存中...(img-TQA4Dc6O-1669771543928)]