用gulp实现全站HTML、CSS、JS和图片压缩

最近被安利了一款一键更新 npm package 的小工具,叫 npm-check-updates ,装完只需要在目录下运行 ncu -u,然后就会自动把 package.json 中的包版本更新到最新版本号,然后再一键 npm install 就完成了依赖升级。

本来这个博客 hexo 也是好多年前起的,看到最近 hexo 发布了 5.0 大版本,冲动之下马上一键更新,结果发现自己之前定制的 gulp 压缩脚本也用不了,跑去官网一看,原来 gulp 更新的新版本的语法已经变了。

于是只好花了2个小时左右学习新版本的语法,重写了 hexo 的全站压缩脚本 gulpfile.js

先上官网:

再来个中文网快速入门:

nodejs将base64编码的图片上传至指定服务器

最近做项目的时候遇到了一个小细节问题,对接第三方云平台接口拿到了一个图片的 base64 编码,微信小程序中需要使用这个图片,并且将图片上传至java后端服务器上。
后端提供了图片上传接口,但只支持 FormData 文件流,不支持 base64 直接传,前端需要考虑的就是如何把 base64 编码变成图片。

这个其实 web 端已经有成熟的方案了,将 base64 转换成二进制图片 Blob,再组装 FormData 对象即可完成。

贴一段示例代码,应该很容易看懂:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var base64String = '/*base64图片串*/';

// 这里对base64串进行操作,去掉url头,并转换为byte
var bytes = window.atob(base64String.split(',')[1]);

// 处理异常,将ASCII码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
// Blob对象
var blob = new Blob([ab], {type: 'image/jpeg'}); //type为图片的格式

// FormData对象
var fd = new FormData();

// FormData对象接受三个参数,第三个参数为文件名,通常我们只传前两个参数,第三个参数不传则使用默认文件名。
// 这里使用的Blob对象,所以需要一个文件名,用时间戳代替。
fd.append('file', blob, Date.now() + '.jpg');

然而这一切到了微信小程序上,开始变得困难了 =。=

微信小程序里没有 atob ,也不支持 Blob 对象,这种转换不允许放在微信小程序上前端执行。这时候我只好退而求其次,让 nodejs 作为中间件去完成这个小任务。

mac安装jenkins和微信小程序发布助手集成

mac安装jenkins真是遇到了大坑,jenkins官方pkg下载下来,安装后默认jenkins home主目录不能修改,然后各种报没有权限。本来安装就花了半天的时间去准备环境,最后还是不得不忍痛卸载官方jenkins,使用 brew install jenkins 来解决问题。结果等 brew install 同样等了俩小时。

卸载jenkins的终端命令:

1
/Library/Application Support/Jenkins/Uninstall.command

Nest.js连接mysql数据库及查询的配置

数据库配置

nest.js 使用内置的 TypeORM 数据库处理模块,它为许多不同的数据库提供支持,不仅有 MySQL 。

我们选择了TypeORM,因为它绝对是迄今为止最成熟的对象关系映射器(ORM)。

使用时:

1
npm install --save @nestjs/typeorm typeorm mysql

安装完成后,在 app.module.ts 中加入数据库配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';

@Module({
imports: [
TypeOrmModule.forRoot({
type: 'mysql',
host: 'localhost',
port: 3306,
username: 'root',
password: 'root',
database: 'test',
entities: [__dirname + '/**/*.entity{.ts,.js}'],
synchronize: true,
}),
],
})
export class ApplicationModule {}

另外,也可以将mysql配置参数写在项目根目录的 ormconfig.json 文件中,推荐项目使用这种方法配置数据库连接。

我试了下,用配置文件的方式,发现并没有用,可能还差了什么配置漏掉了吧。目前直接写在 app.module 中的方式是可以正确连接的。

Egg.js和nest.js两个node.js框架的对比

简介

Nest.js

Nest 是一个用于构建高效,可扩展的 Node.js 服务器端应用程序的框架。它使用渐进式 JavaScript,内置并完全支持 TypeScript(但仍然允许开发人员使用纯 JavaScript 编写代码)并结合了 OOP(面向对象编程),FP(功能编程)和 FRP(功能反应编程)的元素。

特性:

  • 依赖注入容器
  • 模块化封装
  • 可测试性
  • 内置支持 TypeScript

Egg.js

  • 为企业级框架和应用而生
  • 奉行『约定优于配置』

特性:

  • 提供基于 Egg 定制上层框架的能力
  • 高度可扩展的插件机制
  • 内置多进程管理
  • 基于 Koa 开发,性能优异
  • 框架稳定,测试覆盖率高
  • 渐进式开发

VPS迁移记录

最近使用的vultr主机又一次被墙,换了日本、新加坡、美国不同位置的主机,连 ssh 都是连不上的状态,不得不考虑换个VPS服务商。同事推荐了那个很出名的搬瓦工Bandwagon,一年50刀的价格感觉还可以接受,而且听说搬瓦工有个功能是可以免费更换被墙IP,这个功能有点贴心啊,于是迅速地下单买买买,拿到一个试用一年。

接下来要面对的就是搬搬搬……把之前VPS上的N个网站搬到新主机上。好像做这种主机迁移的事情也是做过蛮多次了,实在是难得碰到一个靠谱稳定的VPS,这次还是把主机迁移的步骤记录一下,下次如果还要做这种事情,就整个自动化脚本工具做一键迁移试试。

hexo用travis-ci实现自动部署

一些操作更新by 2019.11.13

首先需要机器上安装 ruby & gem :

1
2
3
4
yum install ruby ruby-devel

gem update --system
gem -v

也可以使用RVM管理ruby安装:https://rvm.io/

1
curl -sSL https://get.rvm.io | bash -s stable

国内vps切换rubygems为ruby-china镜像

1
2
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
gem sources -l

一、配置github项目

在github项目里新增 .travis.yml 文件。

在server上生成travis私钥

1
2
ssh-keygen -f travis                    # 生成 travis, travis.pub
cat travis.pub >> ~/.ssh/authorized_keys # 将公钥添加到服务器认证列表

注意:生成私钥的时候不能输入 passphrase 否则不能正常构建。

在server上加密travis私钥

travis 加密命令是要通过 gem 安装的,请确保 ruby 已经安装。
在 vps 上的项目目录里安装执行下面的命令

1
2
3
gem install travis
travis login --pro --github-token=xxxxx # github token 在设置中生成:https://github.com/settings/tokens
travis encrypt-file travis --com --add # 加密 travis 私钥,--add 会自动将解密命令添加到 .travis.yml

注意:迁移到 travis-ci.com 的项目,需要添加参数 --com

这时提交代码之后就可以在网站 https://travis-ci.org/https://travis-ci.com/ 上看到自动构建流程了。

补充更新 by 2021.6.3

travis login 目前只支持 github-token 一种方式了,使用用户名密码登录会报错。

自己写了个抓取网页图片的脚本(phantomjs和shell)

最近自己写程序的时候经常素材不够用,想去网上扒现成的图片,扒很多的图片,这种重复劳动让我又想偷懒看能不能用程序实现。
找到了比较适合我用的两个工具—— phantomjsshell
phantomjs http://phantomjs.org/ 支持模拟浏览器打开网页,执行脚本用js就可以写,适合前端用。有时候碰到那些不实时渲染img源地址的,还可以在浏览器开发者工具console里跑一下,复用度高。
shell 主要是觉得用wget做下载系统消耗可能少一点,然后用惯了mac偶尔写写脚本也还顺手。想的是用phantomjs拿到图片地址后,存到一个文件里,脚本逐行读然后wget下载就行了,很方便。

ruby on rails使用HTTP认证token实现用户登录验证和会话保持

增加认证(Authentication)

认证的过程是这样的: 用户把用户名和密码通过 HTTP POST 请求发送到我们的 API (在这里我们使用 sessions 端点来处理这个请求), 如果用户名和密码匹配,我们会把 token 发送给用户。 这个 token 就是用来证明用户身份的凭证。然后在以后的每个请求中,我们都通过这个 token 来查找用户,如果没有找到用户则返回 401 错误。