AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Git Gulp webpack

2023-10-30 58
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Git Gulp webpack

theme: fancy

highlight: agate

Git

image.png

配置

名字和邮箱信息
image.png
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 可以查看所有记录，包括被"丢弃"的版本

image.png

  • git reset --soft 版本号:仅重置本地仓库
  • git reset --mixed 版本号:重置本地仓库和暂存区,默认行为
  • git reset --hard 版本号:重置本地仓库、暂存区和工作目录

    不让git管理的文件

    .gitignore文件

image.png
image.png

分支

  • 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 的格式

跨团队协作

image.png

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

如果你刚刚提交的代码写错了可以修改之后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
image.png

高级配置

多入口

   //不写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
    }),

拆分公共第三方代码

splitChunks
image.png
分为第三方模块，和公共模块
image.png

image.png

懒加载

image.png

处理jsx vue

jsx:babel/preset-react
.vue:vue-loader

image.png

优化

IgnorePlugin避免引入无用模块

image.png
image.png

文章标签：
开发工具
git
前端开发
JavaScript
监控
关键词：
Webpack gulp
GIT webpack
游客burgmwkv
目录
相关文章
进军全栈攻城狮
|
API 开发工具 git
git项目中加入版本号git-revision-webpack-plugin
git项目中加入版本号git-revision-webpack-plugin
进军全栈攻城狮
401 0
土木林森
|
1月前
|
缓存 监控 前端开发
前端工程化：Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势，通过将前端代码视为工程来管理，提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化，并提供了具体示例代码。Webpack擅长模块化打包和资源管理，而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势，需根据项目需求进行选择和优化。
土木林森
69 7
土木林森
|
1月前
|
缓存 前端开发 JavaScript
前端工程化：Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第27天】在现代前端开发中，构建工具的选择对项目的效率和可维护性至关重要。本文比较了Webpack和Gulp两个流行的构建工具，介绍了它们的特点和适用场景，并提供了配置优化的最佳实践。Webpack适合大型模块化项目，Gulp则适用于快速自动化构建流程。通过合理的配置优化，可以显著提升构建效率和性能。
土木林森
39 2
向画
|
7月前
|
前端开发 JavaScript Go
webpack -vite(Rollup )-Gulp （一）
webpack -vite(Rollup )-Gulp （一）
向画
117 0
阿珊和她的猫
|
7月前
|
JavaScript 前端开发 API
轻松掌握构建工具：Webpack、Gulp、Grunt 和 Rollup 的使用技巧（下）
轻松掌握构建工具：Webpack、Gulp、Grunt 和 Rollup 的使用技巧（下）
阿珊和她的猫
103 0
轻松掌握构建工具：Webpack、Gulp、Grunt 和 Rollup 的使用技巧（下）
阿珊和她的猫
|
7月前
|
JSON JavaScript 前端开发
轻松掌握构建工具：Webpack、Gulp、Grunt 和 Rollup 的使用技巧（上）
轻松掌握构建工具：Webpack、Gulp、Grunt 和 Rollup 的使用技巧（上）
阿珊和她的猫
294 0
轻松掌握构建工具：Webpack、Gulp、Grunt 和 Rollup 的使用技巧（上）
__爱吃香菜
webpack与grunt、gulp的不同？
webpack与grunt、gulp的不同？
__爱吃香菜
76 0
chengfengpolang
|
前端开发 JavaScript 算法
Gulp 或 Webpack是干什么的？底层原理是什么？
Gulp 或 Webpack是干什么的？底层原理是什么？
chengfengpolang
132 0
Web技术学苑
|
前端开发 JavaScript API
放弃webpack,拥抱gulp
gulp定义是：用自动化构建工具增强你的工作流程,是一种基于任务文件流方式,你可以在前端写一些自动化脚本，或者升级历史传统项目，解放你重复打包，压缩，解压之类的操作。
Web技术学苑
124 0
放弃webpack,拥抱gulp
快跑啊小卢_
|
JSON JavaScript 前端开发
谈谈gulp和webpack？✔️
谈谈gulp和webpack？✔️
快跑啊小卢_
401 0