使用gulp优化Hexo博客

现状

其实访问博客的时候,我觉得速度还是可以的。但是不能满足于现状,首次访问速度差不多在8S左右,所以要通过压缩html,css,js等静态资源,可以减少请求的数据量从而达到优化hexo访问速度的目的,这里主要用到gulp和一些相关的插件来实现。gulp是一个基于Node.js的自动化构建工具,我们可以通过一些gulp插件实现对html,css,js等静态资源的高效压缩。

安装Gulp

以下cmd依次执行即可

1
2
3
4
5
6
7
cd ~/Github/hexo
npm install gulp -g
npm install gulp-minify-css --save
npm install gulp-uglify --save
npm install gulp-htmlmin --save
npm install gulp-htmlclean --save
npm install gulp-imagemin --save

配置Gulp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');
// 压缩css文件
gulp.task('minify-css', function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public'));
});
// 压缩html文件
gulp.task('minify-html', function() {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}))
.pipe(gulp.dest('./public'))
});
// 压缩js文件
gulp.task('minify-js', function() {
return gulp.src('./public/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('./public'));
});
// 压缩 public/demo 目录内图片
gulp.task('minify-images', function() {
gulp.src('./public/demo/**/*.*')
.pipe(imagemin({
optimizationLevel: 5, //类型:Number 默认:3 取值范围:0-7(优化等级)
progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
interlaced: false, //类型:Boolean 默认:false 隔行扫描gif进行渲染
multipass: false, //类型:Boolean 默认:false 多次优化svg直到完全优化
}))
.pipe(gulp.dest('./public/uploads'));
});
// 默认任务
gulp.task('default', [
'minify-html','minify-css','minify-js','minify-images'
]);

压缩资源

压缩前

1.png

压缩log

2.png

压缩后

3.png
减少了1MB左右的size

部署

1
2
3
hexo c;hexo g;
gulp
hexo d

性能对比

优化前

优化后

我所理解的响应式设计

业务背景

项目现在在使用IBM V6的模板,由于涉及内部金融业务的支付系统,所以每次升级都非常慎重(恩,采取了能不升级就不升级的策略方针)。IBM现在内部都使用V18的模板了,想想落后了多少年啊….但是为了响应公司MobileFirst号召,项目决定可以先让一些Approve页面支持Apple设备。于是把一些响应式设计理念,以及CSS3的新属性,应用到项目里去,这是自己关于PC、移动设备上响应式网站的一次实践的总结。毕竟现在是响应式烂大街的情况了,有些浅显,但是,在实践及总结的过程中,理解了很多原先并不明确的知识,有一些自己的心得和体会,希望能对有做响应式的同学有帮助,如有不正确的地方跪求指出。

设计原则

移动优先
优先考虑页面多终端展示(移动设备,PC,Mac等等)
渐进增强
为了发挥更大的硬件设备的功能和效率,从下往上兼容(但是个人认为没有必要费力去做IE9以下的兼容,比如IE6啊,IE7啊,不支持CSS3的浏览器啊,稍后我们说不支持原因)

响应式的选择

1.Javascript (效率极低)
2.CSS3(media-query简单,推荐,适合运行多年的业务系统)
3.开源框架(比如Bootstrap,AmazeUI,EasyUI等等,推荐,模板多)

到底选那种?
其实我们讨论之后,首先就抛弃了第1种,也抛弃了第3种,采取了第2种方法
因为Procurement的系统是2008年开发的,很多标签比较老,这么多年也没有进行大的系统变更,废弃现在的页面去使用Bootstrap框架,工作量太大不说,由于IBM内部系统也有自己的一套样式模板和开发模板,所以Bootstrap的方案也是不可行的。
我不会具体在这里详细说我们是如何实现的,毕竟商业项目,Confidential啊!哈哈,但是我肯定会把你领进响应式设计的大门!具体不懂的,可以评论留言。

Media-Query属性

你这么理解就可以:为不同的大小的设备规定了类似于import的CSS规则,保证了实际渲染完成页面的效果,当然也可以为一个页面准备多个不同的CSS样式、

设备屏幕宽高

device-width,device-height
就是你物理设备大小,比如5.5寸iPhone的大小,4.7寸android的大小等等

渲染窗口宽高

width,height
这个就是指你窗口大小,比如我可以把窗口最大化啊,拉伸啊,缩小啊等等

设备方向分辨率

orientation,resolution
比如Mac的Retina屏幕分辨率大小和PC分辨率大小就不一样(最典型的,你在PC截图和Mac截图,然后上传到网上,你就发现,图片大小不一样,就是分辨率和DPI的原因,这2种概念自行Google)

示例

1
2
3
4
5
6
7
8
9
10
11
<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="link.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
.test {
display: none;
}
}
</style>

有一篇文章我觉得写得很好,虽然文章是3年前写的,但是对于新手,或者进阶来说,可以避免走很多弯路。
https://isux.tencent.com/code-of-response-web-design.html

读《罗曼蒂克消亡史》有感

TheWastedTimes_Post

引子

  罗曼蒂克消亡史,英文名:The Wasted Times(翻译的很贴切)

七故事

  《罗曼蒂克消亡史》是本短篇小说集,一共七篇小说。一三五七故事背景都发生在现代,电影分别用到了其余的三篇。

  • 1.人鱼
  • 2.女演员
  • 3.鸡
  • 4.童子鸡
  • 5.皮囊的诗篇
  • 6.罗曼蒂克消亡史
  • 7.第三个X君
      买这本书,本意是为了看电影中没有看懂的篇章。导演说了,这是部艺术片,是拍给下个世纪的人看的,就没打算让观众看懂。但看完书以后,书中内容真正和电影有关系的篇幅很少。毕竟是短篇小说集,衔接并不连贯,读下去的欲望也不那么强烈,不过总算在回家的路上看完了,书读百遍,其义自见。这本书给我的第一感觉就是大量描写“性”的篇幅,读完第二遍,第三遍之后,觉得反映的是人性,这不是撕去了罗曼蒂克的皮囊,展现了人类的欲望么?

  书中说了鸡的含义,1.鸡本身。2.一种职业。
  其实,这种职业,表面来看是受大家鄙夷的,但在这个笑贫不笑娼的时代,作者并没有直接指出第二个X君去找鸡消遣,是多么的肮脏不堪,多么的颓废,只是在篇尾第二个X君正与娼妓云雨时这样说道:堕落吧,就他平凡的过往与将来而言,他也并不觉得此刻比较更是一种堕落。

童子鸡

  更好理解了,1.未成熟的鸡本身。2.处男。
  这一篇我认为不仅仅是电影之中的点睛之笔,在书中也算是最耐人寻味的一篇。
  童子鸡,就是乡下有老相好的那位,电影中没有过多的描述老相好,但是书中说了,童子鸡的老相好,是个残疾,面目狰狞,长的并不好看。可笑的是,童子鸡口口声声说,等挣了钱要回去娶那位老相好。但世道变了,童子鸡杀完人之后,到被袭击,再到爬到妓女(霍思燕饰)客厅里的椅子上。窗外的枪声,炮火声,把属于大佬,野心家,明星的罗曼蒂克都湮灭了,结果,市井里最卑微的的那一对男女却意外的通过“钥匙”开启了自己的罗曼蒂克,看似挺美好,但也不全是,书中的结局也蛮悲惨的。
  妓女一直向一位叫老张(中共地下党,电影里貌似是赵老板吧)的恩客求助,外面世道不好的时候,童子鸡找不到工作,她便经常向老张借钱跟童子鸡过日子,老张知道后很生气,警告过妓女,童子鸡是绝对不会像你救他那样救你的,但妓女坚持己见,老张拗不过,还是资助了她。后来妓女又求老张给童子鸡谋一份差事,于是童子鸡成了地下工作者,连带他在乡下的表哥也加入了地下党(表哥最后官做的最大,但在文革中也死的最惨)。后来童子鸡狠心的抛弃了妓女,找了一位革命工作者做妻子。解放后,上海清理娼妓,妓女被抓去劳改,童子鸡在路上撞见了,以他当时的级别完全可以救下妓女,但他不愿意揭露自己过去的这种“肮脏”的往事,为了自己的前程,放任妓女被警察带走,老张的预言成真。1968年运动开始了,童子鸡惨死于文革中,临死前他终于明白当天拍死北方的朋友时,自己为什么那么兴奋。
  童子鸡,也许是小说中最令人作呕的人物之一。
  从对老相好的誓言,到杀人时的狠厉,到妓女怀中的迷失,再到抛弃时的冷漠,何尝不都是罗曼蒂克的消亡。认真坚持的信念在生存面前不堪一击,永恒承诺的誓言在遇到妓女后瞬间消亡。

罗曼蒂克

  书名起的蛮有意思的。Romantic,又称浪漫,我专门去查过,含义为:意为纵情;富有诗意,充满幻想;不拘小节(常指同性或异性情侣关系而言)。
  七篇小说主题都离不开一个字:性。这是人类最原始的欲望。金钱,性,身体都是交易的筹码,不知道程耳为何要把性做为主旋律,围绕性展开了故事的一切。也许是导演认为(臆测),剥去罗曼蒂克式爱情的外衣,也就单纯的留下性了。就像《非诚勿扰》里面,车晓问葛优一样,您觉得爱情的基础就是性吗?葛优回答:不完全是,可是要没有,那肯定不能叫爱情,顶多叫交情。其实我觉得也不是不能叫爱情,这种交情会成为了爱情的最高境界:柏拉图式爱情。排斥肉欲,追求精神的纯洁爱情,不去逾越道德观念和传统习俗的障碍,是那么的富有诗意,让人充满期待。
  但我和葛优一样,做不到。毕竟每个人都有自己的欲望和追求,这是本能,也是权利。

X君

  书中三次写到了这个X君,我看了几遍之后,我觉得作者笔下的这个X君,就是人类的镜像。
  每个人都是这个X君,七篇文章看似混乱,杂乱无章,毫无头绪,其实全篇都在通过描述性来来反映人性:在社会的压力下所有人都在为了自己,为了权利、为了性欲、为了“爱情”而拼搏坚持。但认清现实的时候,也会坦然放弃。就像女演员的丈夫,为了荣华富贵,答应了戴老板的条件一样,心态是那么的坦然,淡定。

消亡史

  总之,罗曼蒂克消亡史,不仅仅是罗曼蒂克的消亡,也是整个时代的消亡史。它在成长时是那么的令人期待,就如同花儿般,在绽放时有多么的绚丽,在湮灭时就有多么的颓废。

ToastMasters:Invocation - 2nd

2017/01/13 IBM Dalian TMC Regular English Meeting

正文

Hi everyone,
  Today I will share a new comedy to all.
  Last week, I went to the cinema with my friends. Chinese name is Qing Sheng, the main idea is the starring has an affair, which triggers a series of incredible, ridiculous stories. The film has a lot of jokes, no less than Xia Luo Te Fan Nao.
  As everyone knows, a part of famous people had affairs in the past year. Maybe the theme of the story also catered with it. At the end of the story, it turned out to be just a dream and the starring changes his mind to appreciate current partner at last.
  Actually, most of us don’t know if the love can go on to the end of our life, but at least now I am lucky that no need to consider it,I am available , The only thing we could do is to be honest, to shoulder responsibility, to understand each other rather than focus on the final result.

表现

824533451277100313.jpg
312630276174209856.jpg
65541056624944168.jpg

总结

  • 值得肯定的点:比第一次好很多,但是还是有些紧张。
  • 需要改善的点:加强身体语言的运用。

免费Https证书:Let’s Encrypt申请与配置

前期准备

现在的博客主要是使用Hexo+Coding Pages服务,SSL证书一直使用的是Cloudflare的SSL证书和CDN加速服务,但是国外没问题,国内的访问速度就比较慢了。
Let’s Encrypt证书不但免费,还非常简单,虽然每次只有 90 天的有效期,但可以通过脚本定期更新,配好之后一劳永逸。

  • 个人域名(万网买的)
  • Let’s Encrypt SSL证书(Coding Pages间接提供)
  • Coding Pages服务(免费哦,但是我是双托管了)

选择原因

  • Coding国内访问速度快
  • 小绿锁hin好看
  • CF的SSL证书生效速度太慢
  • 装逼

更换步骤

万网设置(IP我自己ping出来的,是美国IP,但是国内访问速度很快!)
BaiduShurufa_2017-1-12_15-32-40.png
Coding设置(开启HTTPS加密)
BaiduShurufa_2017-1-12_15-32-59.png
BaiduShurufa_2017-1-12_15-33-12.png

查看结果

生效了!
BaiduShurufa_2017-1-12_15-36-33.png

ToastMasters:Invocation - 1st

2017/01/06 IBM Dalian TMC Regular Meeting

正文

Hi everyone,
  I am Jet,Today I will share the reason that why I entered IBM TMC,It’s the second time for me to speaking English as a guest!today I prepared the speech,last time my poor performance on the stage,maybe I felt too nervous at one point,I tend to be lost,not knowing what to do or how to do what I am doing.I am working for IGA Japan Project and my major working language is Japanese now.Being lack of communication in English,I really want to improve my spoken English,Luckily,Brad introduced me this club,Then I came here,with some tension and fear, but more courage,I am no longer worried about making mistakes.
  Hope we can communicate with each other and make progress together.Thank you very much!

表现

pic1.jpg
pic2.jpg

总结

  • 值得肯定的点:第一次上台,心态不错,准备充分
  • 需要改善的点:即兴,肢体语言的运用,表情

2017 全年计划

年初寄语

正好今天休假,所以说赶紧把2017年的计划列出来!新的一年,一个全新的开始,这一年,我希望自己能快乐地跑起来,能飞速的成长,能跟世界产生更多的连接,遇见更好的自己。

身体健康

去年达成了减肥30斤的目标,今年的目标就要提升一下,保持现有的体型,练出肌肉,争取练出6块腹肌。由于2016年感冒频率明显加大,以前胖的时候也没有出现这样的情况,所以2017年不仅要保持现有身材,而且身体要强壮。

理财计划

2015年中牛市结束,2015年到2016年末,指数一直在3000点左右,而且每次遇到大跌之后(刘士余上台),国家队总要出手去救市,所以,这震荡1年,股市跌了许多了,而且IPO现在特别多,所以注册制还得搁置一段时间,但是我认为现在最好的机会就是定投基金,所以每月拿出一部分钱来进行基金定投。(赔我觉得肯定不多,但是我敢肯定3000点就是底,因为我周围的股神们,都消失了,大妈也不炒股了,所以我判断应该没啥问题的)

技术提升

今年争取利用业余时间做2-3个完整的AngularJS和Bootstrap项目,对学完AngularJS和Bootstrap知识的巩固。

人脉拓展

不单单是和你这个层次上的人扩展,向上扩展人脉对于自己的提升是非常大的,但是其实这个蛮难的,因为人一出生基本就定格了,因为你的教育,环境,家境等等决定了,你就是这个层次上的人,而这个层次的流动性不大,翻身可能性比较小,但是也有,比如刘强东这样的完全属于幸存者偏差,我承认,他很努力,他很优秀,但是有时候,时势造英雄。我当时转载过一篇文章,写的就是这个,成就大事者,缺一不可。

外语提升

讲真,现在虽然在外企工作,但是读写蛮多的,听说还是差,准备去考一下托业,也得知公司有ToastMasters Club,每周五做演讲,去了好几次了,感觉气氛真的很好啊,很多小伙伴,从不敢张口说英语,到现在通过抽纸条的方式确立Key word,思考20s后,即兴演讲,不仅仅能锻炼口语,而且可以提升领导力,我觉得中国人总是过于腼腆,有时候不会加上很多肢体语言来表达自己的意思,非常死板,通过这个TMC,也认识了不少小伙伴,这也是对于我上一条人脉的积极补充,认识更多的人,结交更多的同事。

读书计划

去年看的书也还算凑合,今年要搬到新房子那里,上下班时间要在班车上度过了,能腾出时间看书了,为此专门开了一篇Blog:2017书单

个人感情

今年又又又要说感情方面了,去年经历了一段感情,来得快去的也快,也没什么留恋的了。所以还是看情况,随缘吧,Chase always。

以上。

2017 读书计划(持续更新...)

杨绛先生曾说,你的主要问题在于读书不多而想得太多。在这个浮躁的年代,读书没法让你一夜暴富、走上人生巅峰,但是,它仍然是通往自由最短的路。
写在前面的话:经济·理财这部分Section没打算读完,因为张五常的《经济解释》就够你喝一壶的了。。

书单状态更新时间:2017/04/07

科技·技术

书名 完成时间 心得
Javascript编程艺术
Bootstrap开发进阶 In Process  

人文·历史

书名 完成时间 心得
《罗曼蒂克消亡史》 2017/01/22 被浪费的时光
《霍乱时期的爱情》 2017/02/12 Pending
《史蒂夫·乔布斯传》
《敦煌》 2017/02/04 N/A
《谈修养》
《晚清最后十八年:从甲午战争到辛亥革命》 2017/02/18 In Process
《万历十五年》
《激荡三十年》 2017/01/29 读《激荡三十年》有感
《孤独深处》  

社科·心理学

书名 完成时间 心得
《戒了吧,拖延症》
《巨婴国》 2017/02/28 读《巨婴国》有感

经济·理财

书名 完成时间 心得
《经济解释》
《聪明的投资者》
《大空头》  

2016 年终总结

一年又这么过去了,其实不是非常愿意写年终总结的,但是想一想,还是写吧,每天吃饭都嫌累呢。。。
这是2016年个人计划与目标,年末了,总结一下,确实也算是大部分达成了。

先说说工作吧,做为一个Single dog来说,工作可以说是看见别人秀恩爱的时候最能’打发’时间的事情了。

回顾过去2016年,前半年过的就像机关枪一样,1月份买房,2月份买房,3月份恋爱,7月份分手,8月份旅游

然后这上半年就这么浑浑噩噩的过去了,其实说句良心话,这上半年,工作上真的没有一些提升,甚至我觉得,“你把1年的经验用了3年了”这种感受越来越强烈了,工作有时候我认为只是生活的一部分,我知道,我的家境,条件要好于常人,但是这也不能成为我堕落的理由,能在我身体健康的情况下,去尽最大的努力干好现在的工作就好,在我看来,加班只能说是感动了自己,年终发奖金的时候,没得到奖金的人会说,我没功劳还有苦劳呢,呵呵,真的,我有时候特别不爱这么想,可能是失望的次数多了,也就不抱有希望了,苦劳要真有用,还要功劳干什么?可是每天就是定例作业,PSR这一类很基础的,大量的都是业务相关的知识,说实在的,我当时做agile share的时候,给大家讲git的好处,最后居然给了我8小时的claim.有时候,我甚至认为防火墙是个好东西,真是穿越长城,走向世界,这点我深信不疑,人不能总做井底之蛙,时刻走出去看看,居安思危才是最重要的,虽然现在的项目挺稳定的,但是我一直就像着做Web开发,但是主机这个东西,不到1个月也就熟悉了,之后全是业务方面的知识,这个真的需要积累,又要调查,又要看代码,出力不讨好。

技术提升方面,总得来说前端断断续续起码是学下去了,跟着百度IFE做了好些任务,最后终于坚持下来了,做任务其实成了那个时候的精神支柱,学习使我更加有动力了,我知道,一个人的时候,是能提升自己的时候,在这个阶段,一定想方设法去提升自己,因为你要记住,你若盛开,清风自来,我从来不相信穷小子和白富美的故事,就算有,那也是幸存者偏差,道理很简单,你俩不对等啊,各方面,经济,眼光,气质等等等,都是日后分手的导火索。

再说说健康问题,因为前些天,我大学同学的同事在办公司猝死了,就是让女人们每天都要剁手的那个公司,猝死前毫无征兆,那哥们是个经常锻炼的人,身体很壮实,据说是心肌隔塞,真的太可惜了,有时候我也想不通,为什么有些人拼死拼活去加班,去挣钱?经常这样想,有些可笑了,何不食肉糜?但是有些事情,一旦错过,是无法挽回的。所以身体健康最为重要。今年比较好的一点是,减肥了,瘦下来了,人也精神很多,也更自信了,以前根本不敢捯饬自己,现在有事没事就出去逛街。

牢骚有些多,其实有时候,注重感情的我,就是那么不甘心,但是事后也就好了。

工作说的有些少,感情说的比较多,今年先就这样吧。

如何将已有目录转化为Git项目并托管到Github仓库

初始化

打开命令行终端,进入项目所在的本地目录,将目录初始化为一个 Git 项目

1
$ git init
  • 此时会在目录中创建一个 .git 隐藏文件夹

放进新的Git仓库

1
$ git add
  • 如果你本地已经有 .gitignore 文件,会按照已有规则过滤不需要添加的文件。如果不想要添加所有文件,可以把 . 符号换成具体的文件名

提交到仓库

1
$ git commit -m “Initial”

建立远程仓库

建好的仓库类似于这种
https://github.com/jetyu/test.git (示例而已)

关联远程仓库

1
$ git remote add origin https://github.com/jetyu/test.git
  • $ git remote -v 查看结果

提交到github仓库

1
$ git push origin master

参考资料