windows 安装 Git Bash 增强版（Git SDK 安装和配置）

发表于 2023-09-27

应用场景

不折腾，本着实用的原则，装一个zsh，并使用oh-my-zsh的配置，提高命令行的使用体验，让它看上去跟mac/linux差不多。

切记：一切对于效率提升没有帮助的美化，都是耍流氓。

原生 zsh

比起很多种Shell，我想可能还是 zsh 更加有吸引力；虽然 zsh 是 Linux 上的玩意，但是我想大家都用过 Git Bash —— 一个基于 MinGW64 环境的仿 Linux 环境的终端；虽然它已经很 Linux 了，但是很多功能还是被删减了；但是我们可以使用未删减的 Git SDK 来使用 zsh；

Git SDK 全称 Git for Windows SDK，是基于 MSYS2（MinGW64 + Cygwin 合体增强）的仿 Linux 环境；安装后大约会占用 4~5 GB 的磁盘空间，但是包含了完整的仿 Linux 环境：包括常用工具，完整的 GNU Complier 链以及包管理器 pacman；基本上是一套完整的集成开发环境，所以是 SDK ==

此外，虽然 Git SDK 是基于 MSYS2 的，是 Git 的超集…… 但是你仍然需要安装 Git（可能可以通过适当的配置解决），因为很多软件只认识 Git；建议安装 Git SDK 而不是 MSYS2，因为前者比后者好用。

安装

1、安装 git 发行版 git for windows

要安装 git sdk，需要先安装 git，你可以去 Git for Windows 官网，点击如图按钮下载

2、安装 Git SDK

在 Git for Windows 官网，拉到最下面可以看到 Git SDK 的下载；

也可以通过链接 https://github.com/git-for-windows/build-extra/releases/latest 下载一个64位的安装器。

安装步骤如下：
将下载后的文件 git-sdk-installer-1.0.8-64.7z.exe 解压到指定盘符。

等待自动化安装过程：(有点慢，科学加速)

如果安装过程中，报错安装失败
手动打开 C:\git-sdk-64，显示系统隐藏文件，然后删除.git 文件夹，然后手动管理员身份运行 C:\git-sdk-64 下的 setup-git-sdk.bat

3、配置环境变量

4、修改 pacman 软件包源

在 /etc/pacman.d/ 目录下有三个文件：mirrorlist.msys、mirrorlist.mingw64 和 mirrorlist.mingw32；我们可以直接在 Windows 中使用文本编辑器修改它们为国内源：

##
## MSYS2 repository mirrorlist
##

## Primary
## msys2.org
Server = http://mirrors.ustc.edu.cn/msys2/msys/$arch/
Server = http://repo.msys2.org/msys/$arch
Server = http://downloads.sourceforge.net/project/msys2/REPOS/MSYS2/$arch
Server = http://www2.futureware.at/~nickoe/msys2-mirror/msys/$arch/
Server = https://mirrors.tuna.tsinghua.edu.cn/msys2/msys/$arch/

##
## 64-bit Mingw-w64 repository mirrorlist
##

## Primary
## msys2.org
Server = http://mirrors.ustc.edu.cn/msys2/mingw/x86_64/
Server = http://repo.msys2.org/mingw/x86_64
Server = http://downloads.sourceforge.net/project/msys2/REPOS/MINGW/x86_64
Server = http://www2.futureware.at/~nickoe/msys2-mirror/x86_64/
Server = https://mirrors.tuna.tsinghua.edu.cn/msys2/mingw/x86_64/

##
## 32-bit Mingw-w64 repository mirrorlist
##

## Primary
## msys2.org
Server = http://mirrors.ustc.edu.cn/msys2/mingw/i686/
Server = http://repo.msys2.org/mingw/i686
Server = http://downloads.sourceforge.net/project/msys2/REPOS/MINGW/i686
Server = http://www2.futureware.at/~nickoe/msys2-mirror/i686/
Server = https://mirrors.tuna.tsinghua.edu.cn/msys2/mingw/i686/

注意服务器的顺序，将国内服务器放在优先的位置才能保证 pacman 优先使用它；
调整之后执行 pacman -Syu 和 pacman -Su 更新源信息，首次更新可能需要重启；

5、安装 zsh 以及 oh my zsh

先安装 zsh

1	pacman -S zsh

再安装 oh-my-zsh

1
2
3

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
# ↑ 通过 curl 或者 通过 wget ↓
sh -c "$(wget https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh -O -)"

当然，修改 host 文件，设置终端代理过于麻烦；我们可以科学上网后直接访问上述命令中的地址，获得脚本的内容后放到某个文件夹下，再使用 zsh 去执行脚本即可；
安装后脚本会在 ~ 目录下创建 .oh-my-zsh 目录，和 ~/.zshrc 在同一个目录中；这个 ~ 目录对应的就是 Windows 的用户文件夹。

关闭自动更新

此外，oh-my-zsh 会定期的运行更新检查来从 Github 下载最新的更新；但是由于国内网络环境的因素，这个过程并不能流利地进行，这样就会导致在更新的时候卡在初始化终端，造成不好的体验；关闭自动更新也需要编辑 ~/.zshrc 文件，找到 DISABLE_AUTO_UPDATE 项目，并取消其默认的注释：

1 2	- # DISABLE_AUTO_UPDATE="true" + DISABLE_AUTO_UPDATE="true"

这样就关闭了 oh-my-zsh 定期的自动更新；如果需要手动更新，可以运行 upgrade_oh_my_zsh

字体问题

上面说到了只有安装 PowerLine 字体才可以显示一些美妙的图标；但是如果你跑了一遍 p10k 的配置之后就会发现，上面提到的好一部分 PL 字体并不支持显示 fontawesome 上的图标，比如那个锁就会显示成一个方块，这不太行；前几天再网上瞎jb翻的时候看到了一种字体叫做 Nerd Fonts，有一种 Hack Nerd Font 似乎可以很棒的兼容这些图标，所以在这里推荐一手（
实际上，除了 oh my posh，其他的终端美化都是使用打包了 Fontawesome 的 Hack 字体作为更丰富的图标支持的；如果你需要使用包含多个图标的字体，比起一般的 PowerLine 字体，还是建议来一个 Hack 字体

参考

前端字体文件大小优化 fontmin

发表于 2023-09-22

应用场景

有时候，我们想给网站的 Logo 、 Slogan 、标题、活动页等的中文自定义字体，我们可以使用 @font-face 引入 Web 字体，但是完整的中文字体库都是 8M 10M ，加载性能非常差，所以我们提取部分我们使用到的字体，这样可以把字体文件变成几KB。

1.node 模块

提供细粒度 plugins，你可以自由定制专属的 webfont 压缩方案，比如：把字体转为 base64 嵌入到 css 中：

var Fontmin = require('fontmin');

var fontmin = new Fontmin()
    .use(Fontmin.css({
        base64: true		// 开启 base64 嵌入，默认关闭
    }));

/* 输出 css： */
@font-face {
    font-family: "eduSong";
    src: url("eduSong.eot"); /* IE9 */
    src: url("eduSong.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwA....) format("truetype"), /* chrome、firefox、opera、Safari, Android，iOS 4.2+ */
    url("eduSong.svg#eduSong") format("svg"); /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
}

为方便大家使用，提供一个最基本的 webfont 工作流 snippet：

var Fontmin = require('fontmin');

var srcPath = 'src/font/*.ttf'; // 字体源文件
var destPath = 'asset/font';    // 输出路径
var text = '我说你是人间的四月天；笑响点亮了四面风；轻灵在春的光艳中交舞着变。';

// 初始化
var fontmin = new Fontmin()
    .src(srcPath)               // 输入配置
    .use(Fontmin.glyph({        // 字型提取插件
        text: text              // 所需文字
    }))
    .use(Fontmin.ttf2eot())     // eot 转换插件
    .use(Fontmin.ttf2woff())    // woff 转换插件     
    .use(Fontmin.ttf2svg())     // svg 转换插件
    .use(Fontmin.css())         // css 生成插件
    .dest(destPath);            // 输出配置

// 执行
fontmin.run(function (err, files, stream) {

    if (err) {                  // 异常捕捉
        console.error(err);
    }

    console.log('done');        // 成功
});

2.命令行

极客范儿? 就是喜欢弹奏键盘这种飘逸的感觉～

1 2	# 全局安装 fontmin npm install -g fontmin

3.客户端(GUI)

懒得写代码? 直接把 TTF 拖进来，左侧输入需要文字，右侧实时看效果。点击生成，duang 一下，就搞定了~

简介

官方：http://ecomfe.github.io/fontmin/
Github: https://github.com/ecomfe/fontmin-app/releases (GUI安装文件)

参考

http://ecomfe.github.io/blog/fontmin-getting-started/
https://juejin.cn/post/7109286663796293645
https://juejin.cn/post/6844903826051301389
https://segmentfault.com/a/1190000020121850 (iconfont 在线预览工具及其解析)

js中base64编码和解码

发表于 2023-09-21

什么是 Base64 编码？

Base64：选出64个字符作为一个基本字符集（A-Z，a-z，0-9，+，/，再加上作为垫字的”=”，实际是65个字符），其它所有符号都转换成这个字符集中的字符。

Base64 因为能够起到隐藏数据的效果而常常被误认为是一种加密技术。值得强调的是， Base64 不是一种加密或压缩技术。实际上，Base64 编码信息的大小是原始数据实际大小的 1.3333 倍。

编码规则：
1.将每三个字节作为一组，一共是24个二进制位。
2.将这24个二进制位分为四组，每个组有6个二进制位。
3.在每组前面加两个00，扩展成32个二进制位，即四个字节。
4.根据下表，得到扩展后的每个字节的对应符号，这就是Base64的编码值。

理解：假设我们有 6 个 ASCII 字符，那么二进制数据就是 6 * 8 = 48（位）。如果使用 Base64 编码的话，那么就会分成 48 / 6 = 8(组)，每一组就会对应一个 ASCII 字符，也即是说，经过 Base64 编码后，我们会有 8 个 ASCII 字符。因为数据传输的时候都会被转换为电信号（虽然你看到的是字符），所以数据的大小都是按位来算的，8 个 ASCII 字符就是 8 * 8 = 64（位），64 / 48 = 4 / 3 ≈ 1.3333 。综上所述，Base64 编码信息的大小是原始数据实际大小的 1.3333 倍。

1.Vue 中实现 base64 编码和解码

使用 js-base64 插件实现

1 2	# 安装 $ npm install --save js-base64

export default {
  data() {
    return {
      encodeTxt:'前端开发',
      decodeTxt:'5YmN56uv5byA5Y+R',
    };
  },
  methods: {
    base64Test(){
      let Base64 = require('js-base64').Base64; // 引入
      console.log('编码：' + Base64.encode(this.encodeTxt))
      console.log('解码：' + Base64.decode(this.decodeTxt))  
    }
  },
  mounted(){
    this.base64Test();
  }
};

2. Web 通过 window对象的 btoa 和 atob 函数实现

// window.atob() 函数用来解码被 base64 编码过的数据
var encoded_str = "VGhpcyBpcyBhIHN0cmluZw==";
var str = atob(encoded_str);
console.log(str); // This is a string

// window.btoa() 将ascii字符串或二进制数据转换成 base64 编码过的字符串
var str = "This is a string";
var encoded_str = btoa(str);
console.log(encoded_str); // VGhpcyBpcyBhIHN0cmluZw==

注意：不适用于带中文解密，即window.btoa 与 window.atob 不支持中文，且 IE9 以下不支持atob、btoa
解决：btoa 不支持 Unicode 字符编码的问题
编码时，先用 encodeURIComponent 对字符串进行编码，再进行 btoa 进行 Base64 编码
解码时，先用 atob 对 Base64 编码的串进行解码，再用 decodeURIComponent 对字符串进行解码

var str = "hello,中国";
var encoded_str = btoa(encodeURIComponent(str));
var decoded_str = decodeURIComponent(atob(encoded_str));
console.log(encoded_str); // aGVsbG8lMkMlRTQlQjglQUQlRTUlOUIlQkQ=
console.log(decoded_str); // hello,中国在这里插入代码片

3.node中自带的base64编码与解码方法

// 普通字符串

//编码
Buffer.from(String).toString('base64');
//解码
Buffer.from(base64Str, 'base64').toString();

// 十六进制Hex
//编码
Buffer.from(String, 'base64').toString('hex');
//解码
Buffer.from(base64Str, 'hex').toString('utf8');

// 图片
const fs = require('fs');
//编码
function base64_encode(file) {
    let bitmap = fs.readFileSync(file);
    return Buffer.from(bitmap).toString('base64');
}
//解码
function base64_decode(base64str, file) {
    var bitmap = Buffer.from(base64str, 'base64');
    fs.writeFileSync(file, bitmap);
}

参考

https://juejin.cn/post/6976480394002563109
https://juejin.cn/post/7195757485936803899
https://juejin.cn/post/7003217250979151885

Hexo推送Github需要重新绑定域名问题

发表于 2022-02-11

当你自定义 Github Pages 域名时，是否出现了每次hexo deploy，自定义域名都失效的问题呢?

解决方案：

1、找到 hexo 博客根目录下的 source 文件夹。( 注意，不是主题的 source 文件夹。)当 hexo 生成静态页面时，根目录下的 source 文件夹中的内容，就会在生成的网页根目录中（你可以在部署到github后，在仓库中查看，此时本地根目录下source文件夹的内容就在仓库的根目下）。

2、新建一个文件，名为 CNAME ，内容为你的域名（不包括www.或http等等）例：liunwcj.cn。

3、hexo g -d

注意：
-- 名为 CNAME，全部大写，没有后缀。
-- 内容只包含一个域名，且不含 www. 或 http 等。
-- 放到根目录下的source文件夹中。

vue开启ESLint+Prettier，vscode配置

发表于 2020-10-14

1、vscode 需要安装 Vetur、ESLint、Prettier - Code formatter 这三个插件

2、打开vscode工具的设置（快捷键 Ctrl + ,）里面有两个设置。

一个是 USER SETTINGS（用户设置）也就是全局配置，其他项目也会应用这个配置。
另一个是WORKSPACE SETTINGS（工作区设置）也就是项目配置，会在当前项目的根路径里创建一个.vscode/settings.json文件，然后配置只在当前项目生效。

{
    // 个人习惯写在用户配置中，方便(Settings Sync)同步，Dome测试。Fix:建议写在单独工作区配置。
    // eslint & prettierrc S
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true // eslint配置项，保存时自动修复
    },
    "editor.defaultFormatter": "esbenp.prettier-vscode", // 默认使用prettier格式化支持的文件
    "eslint.workingDirectories": [{ "mode": "auto" }], // 自动设定eslint工作区
    "editor.formatOnSave": true // 每次保存的时候自动格式化
    // eslint & prettierrc E
}

3、在构建vue项目(vue create vue)配置中，注意勾选几个事项。

4、在项目的根目录建一个.prettierrc文件，在文件里写上如下代码。

{
    "semi": false,    // 使用分号, 默认true
    "singleQuote": true,   // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
}

参考

https://segmentfault.com/a/1190000016964384
https://www.jianshu.com/p/4be58a69b20f
https://www.jb51.net/article/183275.htm

优化

https://github.com/forthealllight/blog/issues/45

git bash中vue-cli 无法选择设置

发表于 2020-10-02

windows下默认cmd用过的人都知道，在windows我一般都用git bash代替cmd。
vue-cli 项目创建时，git bash箭头选择无效问题。
通过设置 git bash的alias(配置永久别名)。

1、用户目录下创建 .bash_profile 文件( ~/.bash_profile)。

1
2
3

# 打开 git bash
cd  # 返回用户根目录
vim .bash_profile # 使用 vim 打开 .bash_profile 文件

2、复制粘贴2行配置。

# 用git bash使用 vue映射成 winpty vue.cmd
alias vue="winpty vue.cmd"

# 在macOS下打开当前目录管理器也顺带加上
alias open="explorer"

参考：

https://segmentfault.com/a/1190000011532209
https://segmentfault.com/a/1190000004413842 (.bashrc和.bash_profile之间的不同)

jQuery 图片加载完成

发表于 2020-09-28

main:

var imgLoaded = function($imgArr,callback){
     var _length = $imgArr.length;
     if(_length > 0){
         $imgArr.each(function(){
             var img = new Image();
             img.src = $(this).attr("src");
             img.onload = function(){
                 _length--;
                 if(typeof callback === 'function' && _length === 0){
                     callback();
                 }  
             }
         });
     }
 };

test:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>imgs - test</title>
    </head>
    <body>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script charset="utf-8">
            $(function(){
                var imgLoaded = function($imgArr,callback){
                    var _length = $imgArr.length;
                    if(_length > 0){
                        $imgArr.each(function(){
                            var img = new Image();
                            img.src = $(this).attr("src");
                            img.onload = function(){
                                _length--;
                                if(typeof callback === 'function' && _length === 0){
                                    callback();
                                }  
                            }
                        });
                    }
                };

                var tpl = function(data){
                    var str = '';
                    $.each(data,function(index,val){
                        str += '<img src="'+val.image+'" />'
                    });
                    return str;
                };

                $.ajax({
                    url: 'https://www.fastmock.site/mock/f4b7c39ca8a0e60b26a72e0912603206/card/test',
                    type: 'POST',
                    dataType: 'JSON',
                    success: function (data, textStatus, jqXHR) {
                        $('body').append(tpl(data.data.list));
                        imgLoaded($('body').find('img'),function(){
                            console.log('--- 图片加载完成 ---');
                        });
                    }
                });
            });
        </script>
    </body>
</html>

参考

https://www.cnblogs.com/moqiutao/p/7283129.html
https://segmentfault.com/q/1010000016260540

使用debug.js调试手机网页转vConsole

发表于 2020-09-16

H5调试的时候，我们会使用console.log，但手机上看不到打印出来的信息。所以只好各种alert，但alert总显得不方便，页面JS报错也没提示。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<meta name="format-detection" content="telephone=no,email=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<title>移动端HTML模版</title>
<link rel="dns-prefetch" href="">
<link rel="stylesheet" href="style.css">

<!-- 注意：页面中要第一个引入 debug.min.js 文件 -->
<script src="http://binnng.github.io/debug.js/build/debug.min.js"></script>

</head>
<body>

</body>
</html>

// 快速上手
debug.success("This is success message:)");
debug.error("This is error message:)");
debug.log("This is primary message:)");
debug.log({a: 1, b: 2});
debug.log([1,2,3]);

// debug.js为了方便调试，会默认开启捕捉浏览器的报错。如果你不需要这个功能，可以这样禁止它：
debug.silence()

2022-02-11 16:00 补充说明：

推荐使腾讯推出的 vConsole，通过vConsole.js 重写console方法，实现了类似于微信小程序的移动端调试效果，方便查看http请求的详细信息以及浏览器缓存信息。体验更好些。

方法一：使用 npm（推荐）

1	$ npm install vconsole

Import 并初始化后，即可使用 console.log 功能，如 Chrome devtools 上一样。

import VConsole from 'vconsole';

const vConsole = new VConsole();
// 或者使用配置参数来初始化，详情见文档
const vConsole = new VConsole({ maxLogNumber: 1000 });

// 接下来即可照常使用 `console` 等方法
console.log('Hello world');

// 结束调试后，可移除掉
vConsole.destroy();

方法二：使用 CDN 直接插入到 HTML

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  // VConsole 默认会挂载到 `window.VConsole` 上
  var vConsole = new window.VConsole();
</script>

可用的 CDN：

https://unpkg.com/vconsole@latest/dist/vconsole.min.js
https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js

测试CDN

~~http://img.liunwcj.cn/debug.js~~
~~http://img.liunwcj.cn/debug.min.js~~

参考

debug:
https://github.com/binnng/debug.js
http://binnng.github.io/debug.js
http://binnng.github.io/debug.js/demo/index.html

vConsole:
https://github.com/Tencent/vConsole

git add后如何撤销?

发表于 2020-09-13

在日常的工作中，git 添加操作是最基本的Git命令之一。
以下是 Git 上传的原理及上传命令的几个步骤：
在工作区（working directory）进行内容改动后，需要add操作，将文件添加到暂存区（index）。
然后再 commit ，改动的内容才在本地仓库（local repository，或者也叫版本库）中生效。
然后 push 到远程仓库（remote repository），才能在远程仓库中查看或者使用。

git add 添加命令的常用操作：

1、添加所有文件到暂存区

一般情况下，我们会用 . 或者 * 来提交，表示的是所有，是一种正则表达式。
不加参数默认为将修改操作的文件和未跟踪新添加的文件添加到git系统的暂存区，注意不包括删除。

git add *
# or
git add .

# 拓展：
# -u 表示将已跟踪文件中的修改和删除的文件添加到暂存区，不包括新增加的文件，
# 注意这些被删除的文件被加入到暂存区再被提交并推送到服务器的版本库之后这个文件就会从git系统中消失了。
git add -u .

# -A 表示将所有的已跟踪的文件的修改与删除和新增的未跟踪的文件都添加到暂存区。
git add -A .

2、添加某个文件类型到暂存区

1 2	# 如：所有的 .html 文件。 git add *.html

3、添加整个文件夹到暂存区

1 2	# 如：根目录的 mod 文件夹 git add mod/

4、添加某个文件或者某个文件夹中的某个文件到暂存区

1 2	# 如：根目录的 mod/index.html 文件 git add mod/index.html

取消/撤销文件 add

# 撤销操作

# 查看一下git add 中的文件 
git status 

# 如果后面什么都不跟的话 就是上一次git add 里面的文件全部撤销 
git reset HEAD

# 对某个文件进行撤销
git reset HEAD XXX.html

H5移动端页面禁用长按选中文本

发表于 2020-09-12

禁用长按可选中文本

/* 已测有效 */
* {
    -webkit-touch-callout:none;/*系统默认菜单被禁用*/
    -webkit-user-select:none;/*webkit浏览器*/
    -khtml-user-select:none;/*早起浏览器*/
    -moz-user-select:none;/*火狐浏览器*/
    -ms-user-select:none;/*IE浏览器*/
    user-select:none;/*用户是否能够选中文本*/
}

此段css样式加入后能解决ios下手机浏览器，微信浏览器长按出现选择系统菜单问题，但是对于Android下微信浏览器还会出现不兼容问题。

禁止长按弹出系统菜单

// 待测试
//oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单，此处用于阻止菜单的出现。

//PC端 使右键和复制失效
document.oncontextmenu = new Function("event.returnValue=false");
document.onselectstart = new Function("event.returnValue=false");
//ios
document.oncontextmenu = function (e) {
    e.preventDefault();
};
document.onselectstart = function (e) {
    e.preventDefault();
};
//安卓
document.addEventListener('contextmenu', function (e) {
    e.preventDefault();
});
document.ontouchend = function () {
    throw new Error("NO ERRPR:禁止长按弹出");
}

安卓UC浏览器上还需加入以下代码，可以禁止长按呼出菜单:

1
2
3

<!-- 待测试 -->
<!-- 安卓UC浏览器 禁用长按 右键菜单 -->
<meta name="browsermode" content="application"/>