Programming Design Notes

因為公司的電腦是 Windows，又想閒來沒事時可以寫寫文章，所以需要在 Windows 上設定 Octopress。 在 Windows 上要設定好 Octopress 是比在 Mac 上麻煩得多。

Install Ruby

首先要安裝 Ruby，Windows 上使用 RubyInstaller 安裝 Ruby， RubyInstaller 已經包括了 Gem。

RubyInstaller 在這裡下載: http://rubyinstaller.org/downloads/

我安裝的版本是 Ruby 1.9.3-p125

順便下載 Ruby 的 Development Kit: DevKit-tdm-32-4.5.2-20111229-1559-sfx.exe

安裝好 Ruby 後解壓 Development Kit，再到 Development Kit 資料夾內執行以下指令:

ruby dk.rb init
ruby dk.rb install

由於在 Blogspot 的 Blog 頁面引入太多的 Javascript、CSS 和圖片，令到瀏覽速度援慢。反正要來一個大修改，倒不如連平台亦一起換掉。

現在這個 Blog 是使用 Octopress Blogging Framework 管理文章並放到 Github page 上，速度算不錯，順便將廣告和一些不必要的功能全部移除掉，令整個版面更簡潔，閱讀起來比較舒服。

.header{
    background-color: #777;
    color: #f5f5f5;
}

a{
    color: #777;
}

p.desc{
    border: solid 1px #777;
    color: #777;
}

@gray: #777;
@smoke-white: #f5f5f5;
.header{
    background-color: @gray;
    color: @smoke-white;
}

a{
    color: @gray;
}

p.desc{
    border: solid 1px @gray;
    color: @gray;
}

.header{
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

ul.stack li{
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

.border-radius (@radius 5px) {
    border-radius: @radius;
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
}

.header{
    .border-radius;
}

ul.stack li{
    .border-radius(3px);
}

.header p{
    background-color: #777;
}

.header p span{
    font-size: 18px;
}

.header p span.brand a{
    color: #ccc;
}

.header p span.brand a:hover{
    color: #f5f5f5;
}

.header{
    p{
        background-color: #777;

        span{
            font-size: 18px;

            &.brand{
                a{
                    color: #ccc;

                    &:hover{
                        color: #f5f5f5;
                    }
                }
            }
        }
    }
}

• 使用 less.js 在瀏覽器將 LESS CSS 轉換為普通 CSS
• 下載 Node.js 然後使用 npm 去下載 LESS 並使用 Command 將 LESS CSS 轉換為普通 CSS

#!/usr/bin/env node

var sys = require('util')
var fs = require('fs');
var less = require('less');

var targetDir = 'public';
var currentDir = 'source';

convertResource(currentDir);

function convertResource(dirName){
    fs.readdir(dirName, function(err, files){
        if (err){
            console.log(err);
            return;
        }
        for (var i = 0; i < files.length; i++){
            (function(){
                var sourceFile = dirName + "/" + files[i];
                var targetFile = sourceFile.replace(currentDir, targetDir);
                fs.lstat(sourceFile, function(e, stats){
                    if (stats.isDirectory()){
                        if (!isFileExist(targetFile)){
                            fs.mkdirSync(targetFile);
                        }
                        convertResource(sourceFile);
                    }else{
                        if (sourceFile.match(/^(.*)(\.css|\.less)$/i)){
                            complieCss(sourceFile, targetFile.replace(/^(.*)(\.css|\.less)$/i, "$1.css"));
                        }else{
                            var is = fs.createReadStream(sourceFile)
                            var os = fs.createWriteStream(targetFile);
                            sys.pump(is, os);
                        }
                    }
                });
            })();
        }
    });
}

function complieCss(sourceFile, targetFile){
    fs.readFile(sourceFile, "utf-8", function(e, data){
        new(less.Parser)({
            paths: [".", sourceFile.substring(0, sourceFile.lastIndexOf('/'))],
            filename: sourceFile
        }).parse(data, function (err, tree) {
            if (err) {
                console.log(err);
            } else {
                try {
                    css = tree.toCSS({
                        yuicompress: true
                    });
                    if (targetFile) {
                        if (isFileExist(targetFile)){
                            fs.unlinkSync(targetFile);
                        }
                        var fd = fs.openSync(targetFile, "w");
                        fs.writeSync(fd, css, 0, "utf8");
                    }else{
                        sys.print(css);
                    }
                } catch (e) {
                    console.log("CSS file complie error. Ignore file: " + sourceFile);
                }
            }
        });
    });
}

function isFileExist (path) { 
    try { 
        fs.statSync(path); 
        return true;
    } catch (e) { 
        return false;
    } 
}