Command Line 界面的 caniuse

前幾天在其他地方看到,剛剛在 Zite 上又翻到:「Use this handy command line tool to check if your code works across browsers」。

官方網站在「sgentle/caniuse-cmd」這邊,可以透過 npm install caniuse-cmd 安裝,或是加上 -g (npm install -g caniuse-cmd) 裝到系統裡。

用 npm 取代 Build Tools (像是 gulp 或 grunt)

這篇「How to Use npm as a Build Tool」教你如何用 package.jsonscripts 取代 gulp 或是 grunt 這類 Build Tools。

文章裡面可以看到各種奇技淫巧都出現了,dependency 的部份用 recursive 解決 (npm 內部自己再呼叫 npm 執行),stream 的部份用 pipe 解決 (這個到是很自然),然後用外部程式掛進來處理 watch 與 livereload,甚至還出現可以自己寫 js 檔案呼叫的方法... XDDD

無所不用其極!反正我就是不要用 gulp 與 grunt... XD

可以欣賞一下怎麼做的...

Ubuntu 下建立 Cordova 的 Android 環境...

依照「Cordova: Getting Started with iOS and Android Applications (Tech Tip #14)」這篇的方法,再加上一些以前練出來的經驗,把系統給弄起來了。

首先是先到 Android 官網下載 Android SDK,目前版本是 adt-bundle-linux-x86_64-20131030,找個合適的地方解開後 (我是放到 $HOME/android 下),把 PATH 加進去:

export PATH="${HOME}/android/sdk/platform-tools:${HOME}/android/sdk/tools:${PATH}"

接下來是透過 nvm 安裝 node.js,先安裝 nvm:

wget https://raw.github.com/creationix/nvm/master/install.sh
sh install.sh

然後重新啟動 shell 讓 nvm 與 PATH 生效後,安裝 0.10.26 (目前的最新版),並且預設用這個版本:

nvm install 0.10.26
nvm alias default 0.10.26

接下來一樣是重新啟動 shell,就可以裝 Cordova 了:

npm install cordova

後面就可以照抄原始範例:

cordova create hello org.samples.wildfly.cordova.hello HelloWorld
cd hello
cordova platform add android
android create avd --name myCordova --target 1
cordova emulate android

然後 AVD 是有名的慢,請耐心等候... XD

跑出來長這樣:

用 browserify 將 npm 的函式庫包到瀏覽器上用...

browserify 可以將用到的程式碼都包成一包,拿到瀏覽器上使用。

舉個例子離說,先寫了一個 a.js

(function(){
    var el = document.getElementById('output');

    var j2x = require('json2xml');
    el.innerText = j2x({a: 1});
})();

其中可以看到直接拿 require()json2xml 抓進來。但在瀏覽器裡要自己處理有哪些 dependency 很麻煩,就用 browserify 拉出來:

browserify a.js -o a.bundle.src.js

生出來的 a.bundle.src.js 就可以拿到瀏覽器裡使用了!如果需要的話,還可以用 JS Compressor 再壓起來再拿到瀏覽器裡使用。

最後補充一下,browserify 的安裝方式很簡單:

npm install browserify

就是這樣而已。

用 BrowserSync 測試多個平台...

BrowserSync 是用 node.js 寫的工具,可以同時測試一堆 device,修改後不用按 reload,印象中已經有套件可以做類似的事情?

一般用 npm 裝就可以了:

npm install browser-sync

最簡單的方法是直接執行 browser-sync,執行後會出現像這樣的訊息:

<script src='//192.168.1.1:3000/socket.io/socket.io.js'></script>
<script>var ___socket___ = io.connect('http://192.168.1.1:3000');</script>
<script src='//192.168.1.1:3001/client/browser-sync-client.0.6.0.js'></script>

把這段程式碼貼到 body 的最後面就可以了,當 BrowerSync 偵測到檔案有更新時會透過 server push 機制重刷頁面。

另外,也可以產生 bs-config.js 修改設定:

browser-sync --init

更完整的說明可以從「Options」這頁找到。

node.js 版的 YUICompressor...

看「Fantastic front-end performance Part 1 – Concatenate, Compress & Cache – A Node.JS Holiday Season, part 4」的時候發現 node.js 版的 YUICompressor 比起 Perl 版本更早之前就 porting 完成了:「UglifyCSS」,甚至是官方版本的「yuicompressor / ports / js / cssmin.js」也都遠早於 Perl 版本...

npm 裝 uglifycss 就可以用了...