theme: fancy

highlight: agate

Git

配置

名字和邮箱信息

cd到文件夹打开Git bash输入git init

基本使用

HEAD：当前 commit 的引用，分支可以理解为是一系列commit连接起来的串，并且分支跟主分支是’平等‘的

常见指令

git status 文件状态
git add 文件名添加到暂存区，添加全部文件git add .
git commit 添加到本地版本库,git commit -m '描述信息'
git log / git log --oneline 日志，之后显示一条分支的日志
git reflog 可以查看所有记录，包括被"丢弃"的版本

git reset --soft 版本号:仅重置本地仓库
git reset --mixed 版本号:重置本地仓库和暂存区,默认行为
git reset --hard 版本号:重置本地仓库、暂存区和工作目录
不让git管理的文件
.gitignore文件

分支

git branch 显示现在所处分支 git branch -v可以列出每一个分支的最后一次提交
git branch 名字新建分支，新建之后不会自动切换到这个新分支可以使用git branch -b 分支名新建并自动切换
git branch -d 分支名删除分支如果要删除 HEAD 指向的branch，需要先用checkout 把 HEAD 指向其他地方，没有被合并到 master 过的 branch 在删除时会失败，强制删除可以使用 -D
git checkout/switch branch 切换分支
合并分支，先切换到分支，git merge 分支名
git log --oneline --graph 图形化查看提交记录
配置远程服务器
创建一个空仓库，仓库名与文件名相同
git push 地址分支名
git remote add origin 地址设置地址别名
git remote -v 显示地址别名
git clone 第一次拉取代码
git pull 这个指令的内部实现就是把远程仓库使用 git fetch 取下来以后再进行 merge操作
先拉取在更新

git push 是把当前的分支上传到远程仓库，并把这个 branch 的路径上的所有 commits 也一并上传。如果当前分支是一个本地创建的分支，需要指定远程仓库名和分支名，用 git push origin branch_name 的格式

跨团队协作

复制项目网址，fork到自己的空仓库
完成后在自己的仓库pull request审核

如果你刚刚提交的代码写错了可以修改之后add 再commit --amend

撤销最新的提交，git reset --hard 目标commit

gulp

Gulp本身能做的大致就是读写文件和监控文件的变化，其他事情一般需要通过插件完成

npm install -g gulp-cli 全局安装
npm config set registry https://registry.npm.taobao.org
新建文件夹，在文件名里打开终端，npm init -y
npm i --save-dev gulp
在项目目录下创建gulpfile.js文件
在gulpfile.js里用node的required引入
编写任务，一个任务就是一个函数，exports.任务名=函数名。执行任务 gulp 任务名

const gulp = require('gulp')
function copy() {
   
   
  return gulp.src('hhh.js').pipe(编译插件).pipe(bable插件)pipe(gulp.dest('ok/hhhcopy.js'))
}
exports.copy = copy
//或者直接解构出src dest进行使用

基本概念

默认任务 export.default=函数名,直接输入gulp就会执行这个默认任务
公开任务:导出的任务，可以通过gulp命令直接调用
私有任务:没有导出的任务,仅在内部使用，通常作为series()或parallel()组合的组成部分
任务执行完成需要通知Gulp:执行callback或者返回promise，stream等类型
任务组合
当有多个任务需要顺序执行，exports.default=series(函数名1，函数名2)
parallel并发执行
它们可以接受任意数目的任务或组合后的任务
可以互相嵌套至任意深度
文件读写
gulp.src()读取文件
参数一个文件路径或多个文件路径组成的数组
返回值：Node流（stream）
gulp.dest()输出文件
参数：输出目录
返回值：Node流（stream）
stream.pipe管道
参数Node流（src（）,dest（），gulp插件等）
删除文件
使用一个npm包
npm i -D del 鼠标右键复制
require del
del([文件名1，文件名2])
glob
分隔符永远是/字符
特殊字符: * 匹配单级目录下任意数量的字符
** 匹配任意级目录下任意数量的字符(深拷贝)
！剔除某些文件 ['src/image/*,'!src/images/.png']

插件

https://gulpjs.com/plugins/

pipe（插件名（这里可能有配置））

监控文件

gulp.watch(glob, task)将通过glob匹配到的文件与任务(task) 进行关联，如果有文件被修改了就执行关联的任务(task)
watch没有完成的时候，不需要通知Gulp
在顺序执行中，watch任务一般放在最后

function watchtask () {
   
    gulp.watch('./src/js/**.js', 任务名) });//不需要回调

处理css

sass -> css
自动添加厂商前缀
压缩css文件
开发,生产环境任务

//开发环境，生产环境类似
const dev{
   
   
    方法1，方法2......
}
//调用dev.方法一

webpack

npm init -y
npm i -D webpack-cil webpack
webpack.config.js 配置webpack
在package.json里scripts里加上"webpack": "webpack --config webpack.config.js"如果只写"webpack": "webpack"效果是一样的，默认的配置文件是webpack.config.js，如果配置文件不是这个名字才需要在后面加上。
npm run webpack
entry output
出入口
```js
const path = require('path')
module.exports = {
mode: 'development',//开发模式不压缩混淆
// entry:'./src/index.js'//单入口
entry: {
main: './src/index.js',
search: './src/search.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
//filename:'bundle.js'
filename: '[name].js', //多出口
},
}

## loader
webpack只能识别js,json文件，loader让其能处理其他类型文件

```js
 module:{
    rules:[
        {
            test:/\.js$/,//目标文件正则
            exclude:/node_modules/,//排除文件
           // loader:'babel-loader'//加载器名
            //多个加载器
            use:['加载器1','加载器2']//从右向左调用
        }
    ]
  }

plugin

loader只能用于转换某些类型的模块。而插件则可以处理其他一些模块，包括打包优化，资源管理

使用

引入css文件可以直接在js里引入两种方式style\link

const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
   
   
  mode: 'development',
  entry: {
   
   
    main: './src/index.js',
  },
  output: {
   
   
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash:8]js', //有利于命中浏览器缓存
  },
  module: {
   
   
    rules: [
      {
   
   
        test: /\.css$/i,
        // use: [ "style-loader","css-loader"],//从右向左执行。以style引入css
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
   
   
      filename: './a.html',
      template: './src/a.html',
    }),
    new MiniCssExtractPlugin({
   
   
      filename: 'css/[name].css',
    }),//link引入css
  ],
}

处理图片

webpack5不需要使用loader处理图片

 {
   
   
        test: /\.(png|jpe?g|svg|gif)$/i,
        type:'asset',
        parser:{
   
   
            dataUrlCondition:{
   
   
                maxSize:60*1024//小于60kb会转成base64
            }
        },
        generator:{
   
   
            filename:'img/[name]_[hash:8].[ext]'
        }
      },

webpack基本配置

拆分为三个配置文件，common存放公共的部分，其他两个文件存放开发和生产环境下的配置。处理ES6，使用bable-loader。处理样式文件，推荐使用MiniCssExtractPlugin，注意要先使用css-loader使webpack能识别.css，在css-loader之前还可以使用postcss-loader,可以在这里添加厂商前缀。处理图片小于某大小。可以转成base64

高级配置

多入口

   //不写chunks会全部引入
    new HtmlWebpackPlugin({
   
   
      filename: './a.html',
      template: './src/a.html',
      chunks:['a']//只引入a.js
    }),
    new HtmlWebpackPlugin({
   
   
      filename: './b.html',
      template: './src/b.html',
      chunks:['b']//只引入b.js
    }),