夜明的孤行灯

作者： htynkn

  • 模块化的Grunt配置

    Grunt是Javascript任务运行工具，它可以让一切自动化。

    简而言之，它可以帮你完成代码压缩，代码编译，单元测试，代码规范验证等必须但高度重复的工作。

    极大程度简化你的工作，同时又保证你的代码质量。

    Grunt的同类工具很多，但是Grunt的一大特点就是生态庞大，有各种插件可以选择，而且都是可以通过npm安装的。

    GruntFile

    Gruntfile.js文件都是位于项目根目录中的一个JavaScript文件，并且它也应该与你的项目源文件一起提交。

    一个Gruntfile由下面几部分组成：

    • wrapper函数
    • 项目和任务配置
    • 加载的Grunt插件和任务
    • 自定义任务
    • 一个Gruntfile示例

    比如下面的例子，它从package.json中读取配置，再调用grunt-contrib-uglify插件来压缩源文件，同时根据读取的配置生成一个标语注释。同时注册默认任务为uglify任务。

    module.exports =function(grunt){

grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner:'/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */n'
},
build: {
src:'src/<%=pkg.name %>.js',
dest:'build/<%= pkg.name %>.min.js'
}
}
    …
  • libGDX基于RoboVM对IOS平台的支持

    libGDX基于RoboVM对IOS平台的支持

    Libgdx这款跨平台的游戏开发引擎，我之前的很多文章都介绍过了，可以点击Libgdx查看。

    Libgdx在0.99版本正式加入对IOS的支持。

    Libgdx之前其实也是支持IOS的，只是需要先转化成C#，然后使用收费的工具实现。

    而现在Libgdx使用了RoboVM,这是开源免费的。目前已经有超过百款的Libgdx游戏发布到App Store了。

    RoboVM

    RoboVM将Java的字节码转为本地代码，并封装了UI和各种API。这样可以最大程度重用你原有的Java代码。

    RoboVM需要一个Mac OS X，虽然在其他平台，比如ubuntu，也是可以使用的。不过为了更好的集成和开发，最好还是入手一个Mac吧。

    RoboVM提供了Eclipse插件，安装地址：http://download.robovm.org/eclipse/。

    插件安装

    在安装完成后复制以下代码测试以下：

    import org.robovm.cocoatouch.coregraphics.*;
import org.robovm.cocoatouch.foundation.*;
import org.robovm.cocoatouch.uikit.*;

publicclass IOSDemo extends UIApplicationDelegate.Adapter {

private UIWindow window =null;
privateint clickCount =0;

@Override
publicbooleandidFinishLaunching(UIApplication application,
NSDictionary launchOptions) {
    …

  • 通过ssh使用git更新hexo内容

    Hexo每次新增一篇文章都会引起很多页面的变动。

    比如page页面，因为增加一篇文章，所以分页情况都改变了，这里会有将近10个页面的变化。

    其次是tag和categories目录，因为文章一般都会指定tag和categories，所以这里也会有几个页面的变动。

    最后就是文章页面本身了。

    这么算下来新增一篇文章会更新十多个页面，还有若干图片。

    每次使用ftp更新都很慢，虽然可以设置各种跳过规则，但是对比文件列表也是会花费相当的时间。加之hexo提供的ftp发布比一般的ftp客户端还慢（ftp发布工具是给予lftp的，只适用于linux）。

    我本来准备做一个版本管理工具，或者让hexo只生成最近几天的文章（issue链接）已减少更新量。

    不过折腾起来挺费劲的，最后作罢了。

    刚才突然想到我需要的其实就是一个git而已，加上主机本身支持ssh，所以决定使用在服务器搭建一个git服务器来更新网站。

    创建Git仓库

    其实创建Git仓库挺简单的，因为git自身就支持ssh方式的连接，我们只需要在服务端建立一个Git仓库，然后将页面生成到Git仓库中就行了。

    在目标目录执行命令：

    git init
git add .
git commit -m'init git repo with remote files'

    初始化仓库并将现有文件全部添加到其中。

    然后在本地执行命令将库拉去回来

    git clone username@host:~/path/to/www

    也可以直接在本地执行初始化一个Git仓库，然后添加一个remote

    git init
git remote add web username@host:~/path/to/www
    …
  • Hexo模板系统和pacman的修改

    Hexo模板系统和pacman的修改

    Hexo的原理是解析_posts中的md格式文件，然后根据模板的解析规则进行解析。

    我使用的风格修改自pacman，主要它看着比官方默认的主题要充实很多。

    但是毕竟是别人做好的，还是有很多不合自己意的，所以还是需要稍微修改一下。

    Hexo模板系统

    要做出修改，首先要看看Hexo的模板系统是怎么实现的。

    Hexo使用的是ejs，类似的东西就多了，比如Jade，swig，doT等等。

    ejs效率比较慢（相比其他的），这里有一个测评，也没有Jade有那么多特性。不过好处也是明显的，不需要太多的时间和精力就可以掌握。

    在Hexo中有post、page等不同的布局，而选用哪种布局是在md文件中声明的。

    Hexo首先解析md文件，然后根据layout.ejs判断布局类型，再转发给其他布局文件。在布局中可以引入其他文件，比如

    <%- partial('_partial/header')%>

    这样每一块内容都是单独的，方便二次使用，也可以几个不同布局引用一个代码片段。

    简要流程

    修改几处英文

    我没有从官方风格慢慢改，而是选用了pacman，修改了主题色以后感觉就不错了，不过有几处英文显示感觉不舒服。

    Hexo是支持多语言的，在_config.xml中配置就可以了，一般使用zh-CN。

    首先看看文章末尾的上一篇和下一篇

    在language中没有对于这个的定义，首先我们补充nextpost和prevpost到 zh-CN.yml中

    nextpost:下一篇
prevpost:上一篇

    然后修改post文件夹中的pagination.ejs，将PREVIOUS和NEXT替换掉

    <nav class="article-nav
    …
  • 海外博客使用CDN加速

    海外博客使用CDN加速

    因为在祖国的怀抱中自建博客很麻烦，所以最后还是选择全套购买海外的东西。

    不过博客主要的访客还是祖国的，所以这响应速度还是比较重要的。

    Hexo的一个好处就是全站静态化，生成以后再压缩一下，轻松加愉快。

    参考了网上很多博主的文章，决定CDN是个不错的东西，可以考虑一下。

    百度加速乐

    因为本身空间不错，访问速度也很快，所以国外的CDN基本就不考虑了，英文折腾起来太麻烦。

    国内的话看了一下挺多的，对于未备案的网站也可以分配海外节点。

    因为百度的云引擎BAE不错，所以对百度的服务期待很高。

    百度的CDN是百度加速乐，免费版3G/h，30万PV/日。

    这个数据大家别觉得特别好…这么大的量一般站点还用不上。

    我选用的别名接入，接入以后可以看大部分请求被香港节点处理了。速度有轻微提升，感觉还可以，就用着吧…然后就遇到坑爹的400（unknown virtual host）错误了。

    400错误

    我当时还琢磨这估计是抽风一下吧，刷新无数次都没有用。

    在百度经验和加速乐的论坛看了看，说需要等等或者删除再创建一下。

    确实管用，不过几分钟以后又会出现400错误，这样折腾不起呀，考虑到速度提升也不大，果断放弃之。

    毕竟是百度的服务，估计也不会太差。不过国内节点必须备案…所以也就只是看看。

    安全宝

    安全宝是一家名为星云融创的公司提供的，同样是未备案分配海外节点。

    安全宝的海外节点在美国，不过速度还挺快的。

    使用方法差不多，不过接入和解析生效都是人工审核的，一般一个小时左右。

    安全宝使用起来比较流畅，速度提升也比较明显，本站现在使用的就是它,安全宝把节点换到了日本的，基本不能用。不是速度慢，而是基本无法访问，慎用之。

    域名界面

    不过这个数据统计我就有些疑惑了。

    我是在购买了主机刚刚迁移完博客就去申请的服务，凌晨时分接入的。

    第二天早上就提示我拦截了恶意攻击

    控制面板的恶意攻击提示

    要不要这样…我一个静态博客，才搬迁就有攻击…

    不过一看就知道是自动攻击，我主机上一个php文件都没有。…

  • 从博客园迁移到Hexo

    备注：该文章写于2014年，相关思路可以作为参考，但是hexo的版本更新相关导致相关工具无法使用了。

    很早以前就开始使用博客园的服务，虽然有这样那样的问题，但是始终还是觉得不错。

    一来不用自己维护空间什么的，二来博客园的原创文章很好被收录，偶尔写写文章也不操心。

    大概从去年起将操作系统全面切换到ubuntu,没有想到最不习惯的居然是没有live writer。博客园的在线编辑器实在太难用了，反复折腾决定用node-webkit快速的做一个linux下的编辑器。

    就在这之间接触到了Hexo，最终决定从博客园迁移出来，自建博客。

    这里分享一下迁移中的各种收获。

    Hexo

    Hexo是基于Nodejs的静态博客工具。所谓静态博客区别于Wordress之类的博客系统主要是并不是由动态语言在服务端生成，而是使用者在使用完博客后生成全站静态文件。

    Hexo的优点其实我没有啥深刻的体会，这是我接触到的第一款静态博客工具。对我而言它的优势有三：

    • 书写方便，使用markdown书写。

    很多人觉得md很潮，其实我很现实的，只要好用就行了。用md来写不需要专用软件支持，一个记事本就好了。

    • 容易保存原始资料

    在博客园的时候就有定期备份数据的习惯，倒也不是害怕哪天它突然关闭了，只是决定数据在自己手中有一份比较安全。

    Hexo的原始资料可以纳入版本管理之中，还是挺方便的。

    • 使用方便，易于扩展

    Hexo在设计上预留了扩充点，而且本身原理很简单，实在不行也是可以自己修改的。这样如果有不合意的地方可以自己动手完成。接下来我也会谈到我为了迁移做的一个迁移插件。

    准备工作

    Hexo要求nodejs环境，具体安装大家随意搜索以下就可以找到。而npm是nodejs的包管理器，默认也会自动安装上。
    然后运行

    npm install -g hexo
hexo init <blogFolder>

    初始化完成以后运行hexo server可以看到效果。

    基本的配置在_config.xml文件中，有部分配置也会在对应的主题目录的_config.xml中。

    从博客园迁移数据

    博客园是由一个未公开的API的，不过API中没有提供分类和标签，所以不适合迁移时的数据获取，所以还是抓取网页比较值得信赖。

    首先来看看插件列别。

    Hexo将插件分类7类。分别是生成，渲染，迁移，标签，辅助，其他。…

  • 使用Gradle自动发布Java Web到SAE

    使用Gradle自动发布Java Web到SAE

    现在像SAE这类的应用引擎已经比较多了，百度和腾讯都提供了相似的平台。

    我很早的时候就开始用SAE，当时还为了迁就SAE学习了PHP（当时只支持PHP和另外一个什么语言）。后来SAE支持Java了，版本是6，容器是Jetty 7.4，而常用的框架也基本能跑。

    代码的部署使用svn，稍微有点麻烦。最近在做一个Java Web的练习，代码放在github上，每次上传到SAE很烦。项目使用Gradle管理，所以琢磨着怎么把自动发布到SAE这个事情交给Gradle来做。

    流程分析

    先来看一下SAE这边。

    建立默认版本，版本号为1。然后通过代码管理页面上传一个war包。

    进入svn仓库看一看

    其实就是把对应的war包放在版本号目录的根目录就可以了。

    而调用

    gradle war

    就可以生成war包，而文件地址通过以下方法获得

    war.archivePath

    这样就只需要checkout原有代码，然后将新的war拷贝过去，然后commit就行了。

    直接调用SVN命令

    Gradle有一种任务类型是Exec，可以直接在命令行调用命令。

    比如我们的checkout操作就可以这样

    task checkoutRepo(type:Exec) {
workingDir'build/'
commandLine'svn','checkout',repo_path,"svn"
}

    这样代码仓库就被签出到build/svn目录下了。

    在使用copy指令

    copy{
from war.archivePath
into"build/svn/"+numberVersion
}

    当然，gradle生成的war包的名字组成是

    ${baseName}-${appendix}-${version}-${classifier}.${extension}

    如果要重命名的话，可以使用rename，比如利用重命名去掉version信息

    copy {
from war.archivePath
into
    …
  • 注入器和发布库–AngularJS学习笔记（三）

    注入器和发布库–AngularJS学习笔记（三）

    AngularJS的一大特性就是Module的加载和依赖注入，本文将分析一下loader.js和最后这些代码文件是怎么组织和运行的。

    Loader.js

    该文件中只有setupModuleLoader函数，当然它的返回值是一个函数，包含了angular.Module的API。

    首先是位置，这些配置和模块保存在哪里

    var $injectorMinErr = minErr('$injector');
var ngMinErr = minErr('ng');

function ensure(obj, name, factory) {
return obj[name] || (obj[name] = factory());
}

var angular = ensure(window,'angular',Object);

    前两句建立两个错误提示用的对象，这个在前一篇文章有介绍。

    接下来声明的函数用于新建对象，return语句利用惰性求知保证了对象的存在性。如果存在就直接返回，否则利用提供的函数新建。

    下一句就声明了angular对象，传入的参数是window，angular字符串和Object。

    所有浏览器都支持 window 对象。而全局变量是 window 对象的属性。 全局函数是 window 对象的方法。

    这句话将angular绑定在window对象上。当然这是的angular只是一个普通的Object对象。…

  • 启动和JQuery绑定–AngularJS学习笔记（二）

    启动和JQuery绑定–AngularJS学习笔记（二）

    上一篇简单的分析了AngularJS的项目结构，后面就开始分析具体的源代码了。

    从angularFiles.js中的定义可以看出有几个文件直接位于src根目录，并不是隶属于某个模块。这几 个分别是minErr.js,Angular.js,loader.js,AngularPublic.js,jqLite.js,apis.js。

    这几个提供了AngularJS中很基础的工具，比如angular.equals等，在文档中它们中的部分被归属于 Global API中。

    本文主要看看AngularJS的启动和JQuery绑定。

    minErr.js

    Javascript中有Error对象，用于表示运行时错误，但是它的功能比较单一，一般使用

    newError(message)

    但是它的功能比较单一。而minErr是一个提供更丰富信息的工具。这样生成的错误信息将包含模块名 称和其他信息，同时还提供了模板功能。比如

    var exampleMinErr = minErr('example');
var detailMinErr=exampleMinErr('one','This {0} is {1}',"v1","v2");
detailMinErr.stack

    显示如下：

    screenshot13

    可以看出错误还提供了对应了文档地址，不过其中的NG_VERSION_FULL看着有点奇怪，这里应该显示诸如1.2.7这样的版本号。在 lib/grunt/utils.js中有一个处理，将NG_VERSION_FULL、NG_VERSION_MAJOR等替换了。

    function(src, NG_VERSION, strict){
var processed = src
.replace(/"NG_VERSION_FULL"/g, NG_VERSION.full)
.replace(/"NG_VERSION_MAJOR"/, NG_VERSION.major)
.replace(/"NG_VERSION_MINOR"/, NG_VERSION.minor)
    …
  • 源代码目录结构–AngularJS学习笔记（一）

    源代码目录结构–AngularJS学习笔记（一）

    最近开始接触AngularJS，确实是一个相当不错的东西，可以把很多东西简化掉。又对于其中的双向绑定等的实现很好奇，加之正在学习Javascript的东西，所以觉得从源代码这块开始深入学习AngularJs。

    获取AngularJs源代码

    虽然可以直接通过阅读最终的js文件来学习，不过总觉得这样入手不太容易，而项目源代码本身就是一块一块的，同时又配有测试，从这里开始学习的话应该比较容易一些。

    AngularJs的源码在github上，地址是：https://github.com/angular/angular.js。

    实现先获取到代码：

    git clone https://github.com/angular/angular.js.git

    下载需要一点点时间…特别是你访问github速度比较慢的时候…

    目录结构和构建工具

    首先来看看项目有哪些文件夹：

    • src目录是项目的源代码，也是学习的主要对象
    • test目录是对应的测试
    • closure中的文件是Google Closure Compiler使用的
    • scripts目录中有一些脚本，主要用于bower、travis等的任务使用

    再来看看文件：

    • angularFiles.js中定义了AngularJs中每个某块所包含的js文件地址，很多地方使用到了这个文件配置。
    • bower.json是包管理工具的配置文件，更多介绍点击Bower。
    • check-size.sh将angular.min.js文件压缩，然后显示文件大小…（说实话，我不是太清楚这有什么意义）
    • changelog.js是一个nodejs脚本，它可以从git仓库中获取更新日志。通过
    node changelog.js

    运行脚本。如果提示[Error: Cannot find module ‘qq’]，可以通过npm安装

    npm install qq

    changelog.spec.js是对应的测试文件。

    • compare-master-to-stable.js也是一个nodejs脚本，它可以比较稳定版和当前版本的区别。
    • gen_docs.sh会使用Jasmine进行测试，然后调用docs/src/中的gen-docs.js生成文档。
    • Gruntfile.js是Grunt的配置文件，更多介绍参考
    …