Tag: npm

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

這篇「How to Use npm as a Build Tool」教你如何用 package.json 的 scripts 取代 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 就可以用了...