聚會時間公告: 因應COSCUP 2011, Kalug 8月份休會一次

七月 21, 2017

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» Node.js 8 搭配 npm 5 速度

yarn-kitten-full 這個月 Node.js 釋出 8.0 版本,搭配的就是 npm v5.0.0 版本,上一篇寫到如何透過 Yarn 指令移除 devDependencies 內的 Package 套件,減少 node_modules 大小,有網友提到那 npm 5 的速度為何?其實筆者已經好久沒有用 npm 了,但是有人提問,我就立馬來測試看看 npm vs yarn 的速度,詳細數據可以參考此專案說明。測試方法如下

設定環境

底下是測試環境版本
  • node version: v8.0.0
  • npm verison: 5.0.0
  • yarn verison: 0.24.6

初次安裝 (沒有任何快取)

先把 node_modules 刪除,及系統相關 Cache 目錄都移除
$ npm cache verify
$ rm -rf ~/.npm/_cacache/
$ time npm install
npm 花費時間: 1m43.370s
$ yarn cache clean
$ time yarn install
yarn 花費時間: 1m1.707s

保留系統快取目錄

執行完第一次安裝後,我們把 node_modules 移除後再安裝一次試試看
$ rm -rf node_moduels
$ time npm install
npm 花費時間: 0m38.819s
$ rm -rf node_moduels
$ time yarn install
yarn 花費時間: 0m24.219s

保留系統快取目錄及 node_modules

最後保留 node_modules 目錄,再執行一次安裝
$ time npm install
npm 花費時間: 0m11.216s
$ time yarn install
yarn 花費時間: 0m0.954s

結論

大家可以發現,雖然 npm 改進不少速度,但是 Yarn 還是優勝許多,這邊可以總結,已經在使用 yarn 的,可以繼續使用,尚未使用 yarn 的開發者,可以嘗試使用看看。另外 npm 5 現在執行 npm install –save 會預設產生出 package-lock.json 跟 yarn 產生的 yarn.lock 是類似的東西,除非專案內已經有 npm-shrinkwrap.json,否則 npm 會自動幫專案產生喔。詳細情形可以看 Replace metadata + fetch + cache code。npm cache 指令可以看此文件

十月 13, 2016

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 用 Yarn 取代 Npm 管理 JavaScript 套件版本

yarn-kitten-full 新一代戰神 Yarn 終於在昨天出爐了,Yarn 跟 Npm 一樣都是 JavaScript 套件版本管理工具,但是 Npm 令人詬病的是安裝都是非常的慢,快取機制用起來效果也不是很好,所以 Yarn 的出現解決了這些問題,透過 Yarn 安裝過的套件都會在家目錄產生 Cache (目錄在 ~/.yarn-cache/),也就是只要安裝過一次,下次砍掉 node_modules 目錄重新安裝都會從 Cache 讀取。Yarn 詳細的功能架構可以參考 Facebook 發表的 Yarn: A new package manager for JavaScript,本篇不會教大家怎麼使用 Yarn,因為指令實在是太容易了,可以參考官方提供的如何從 npm 轉換到 yarn,底下則是來測試比較兩者安裝套件的速度。

前置準備

你可以用任何機器會筆電來做底下測試,或者是直接拿此 Dockerfile 在個人環境先產生乾淨的 Image,Dockerfile 內容很短,也可以從底下複製
FROM node:6.7.0

RUN curl -o- -L https://yarnpkg.com/install.sh | bash && \
  echo "" >> ~/.bashrc && \
  echo 'export PATH="$HOME/.yarn/bin:$PATH"' >> ~/.bashrc

CMD /bin/bash
請準備好底下版本
  • node version: v6.7.0
  • npm verison: 3.10.3
  • yarn verison: 0.15.1
可以自己拿任何專案的 package.json 或是下載我放在 Github 的 package.json 來做測試。

測試 package 安裝速度

第一階段就是沒有任何 Cache 之下來測試安裝速度
$ npm cache clean
$ npm install
結果: 93.00 秒
$ yarn cache clean
$ yarn install
結果: 42.80s 第二階段就是保留 node_modules 目錄,在下一次安裝
$ npm install
結果: 13.00 秒
$ yarn install
結果: 0.16 秒 (注意連 1 秒都不到 XD)

結論

npm yarn
install without cache 93000ms 42800ms
install with cache 13000ms 160ms
上面表格將數據整理好,如果要搞 Devops 至少可以省下將近 13 秒的時間,如果是 Local 團隊開發省下的時間更多了。結論就是大家趕快從 npm 轉到 yarn 吧,yarn 出來不到一個禮拜已經超過 1 萬多個 Star 了,看到開發團隊內包含了許多 Google 前端大神,這讓我更放心的轉換到 Yarn。寫完本篇才發現官方也有提供效能比較表。本文提到的數據及檔案都有一併放到 Github Repo

三月 14, 2015

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 透過 https 下載套件,取代 git protocol

Git-Logo-2Color

現在前端套件幾乎都會透過 Bower 來下載,而 Bower 預設使用 git protocol 來下載原始檔案,如果遇到 timeout 逾時,也就是無法透過 git:// 方式,就必須要切換成 https:// 下載,蠻多人遇到此問題,網路上找到這篇 bower install – github.com connection timed out 解答。在 Console 視窗噴出底下錯誤訊息,就請改用 https 方式。

Additional error details: fatal: unable to connect to github.com: github.com[0: 192.30.252.130]: errno=Connection timed out

切換方式很容易,請在 Console 鍵入底下指令

$ git config --global url."https://".insteadOf git://

遇到 bower install 卡卡的也可以用這招 XD

三月 26, 2013

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» Javascript command line tool GruntJS 介紹

Update: 補上一張執行後的截圖 2013.03.27

gruntlogogruntlogo

GruntJS 是一套 JavaScript Task Runner,為什麼官網會這樣寫呢?網站上線之前,是不是需要經過測試,壓縮,及品質控管,這些 Task 該如何實現,在 GruntJS 還沒出現之前,大家可以透過 Linux command 的方式來達成,但是對於前端工程師而言,多學習 command line 真的是要他們的命,所以 GruntJS 解決了此問題,將所有的 Task 用 Javascript 方式設定就可以自動佈署或測試。GruntJS 的 Plugin 也非常多且完整,像是大家常用的 CoffeeScriptHandlebarsJadeJsHintLessSassCompassStylus…等都有支援。更多好用的 Plugin 可以在官網搜尋頁面上找到。

安裝方式

Grunt 可以透過 Node.js 的管理工具 npm 方式來安裝,Windows 只要到 Node.js 官網下載安裝包,直接按下一步即可安裝完畢,Linux 可以透過 NVM 方式來管理 Node.js 版本,可以參考作者之前寫的 Node Version Manager 版本管理 NVM。需要注意的是 Grunt 0.4.x 需要 Node.js >= 0.8.0 版本才可以。

如果之前已經安裝 Grunt 請先移除安裝

$ npm uninstall -g grunt

Linux 請切換到 root 使用者來安裝

$ npm install -g grunt-cli

準備新專案

在使用 Grunt 指令前,請在專案目錄內新增 package.jsonGruntfile.js 檔案

package.json: 此檔案紀錄專案 metadata 以便將來做成 npm module,另外也會記載專案內所用到 Grunt plugins 版本資訊,像是 devDependencies 設定。
Gruntfile.js: 此檔案可以用 Coffscript.coffee 撰寫,用來紀錄工作內容及相關 Plugins 載入.

PS. 如果是用 Grunt 0.3.x 版本,請命名為 grunt.js

package.json

此檔案記載專案相關資訊,也包含了 GruntJS 所需要用到的 Plugins,範例如下(官網提供)

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.1.1",
    "grunt-contrib-nodeunit": "~0.1.2"
  }
}

建立此檔案後,在專案目錄內,執行 npm install,會發現專案內多了 node_modules 目錄。可以將此目錄名稱加入到 .gitignore,免的不小心 commit 到伺服器。如果不想手動更改 devDependencies 資訊,其實可以透過 npm install grunt –save-dev 方式加入到 devDependencies 裡。

Gruntfile.js

可以透過 Gruntfile.coffee 或 Gruntfile.js 來產生檔案,此命名適用於 0.4.x 版本,如果是 0.3.x 版本請命名為 grunt.js。此檔案會包含底下部份

* wrapper 寫法
* 專案及任務設定
* 載入 Grunt Plugins 和任務內容
* 定義特定任務

拿官網的例子來介紹:

module.exports = function(grunt) {

  // Project configuration.
  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'
      }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);

};

在 package.json 裡面設定安裝 grunt-contrib-uglify 套件,uglify 任務就是將 Javascript 檔案壓縮,當我們執行 grunt 指令時,Grunt 會執行預設的任務 uglify。上面有提到四點 Grunt 檔案會包含的項目,其中第一點是 wrapper 寫法,也就是上面例子內的

module.exports = function(grunt) {
  // Do grunt-related things in here
};

接著注意專案的設定,也就是底下內容

// Project configuration.
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'
    }
  }
});

所有的工作項目設定都會寫在 grunt.initConfig 裡面,看到第一行 grunt.file.readJSON("package.json"),將 package.json 內容讀到 pkg 變數,接著參數設定就可以使 <% %> 方式讀取。uglify 工作項目內的 options 設定可以直接參考 grunt-contrib-uglify,我們可以定義多個 target 來區分多個工作內容,範例如下

// Project configuration.
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'
    },
    my_target_1: {
      options: {
        sourceMap: 'path/to/source-map.js'
      },
      files: {
        'dest/output.min.js': ['src/input.js']
      }
    },
    my_target_2: {
      options: {
        sourceMap: 'path/to/source-map.js',
        sourceMapRoot: 'http://example.com/path/to/src/',
        sourceMapIn: 'example/coffeescript-sourcemap.js'
      },
      files: {
        'dest/output.min.js': ['src/input.js']
      }
    }
  }
});

完成基本 Grunt Plugin 設定,接著將此 Plugin 載入

// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');

最後定義預設的任務

// Default task(s).
grunt.registerTask('default', ['uglify']);

Grunt 設定檔就完成了,可以來進行測試,我們可以直接下 grunt 指令,系統會自動跑預設任務,也就是 uglify,也或者如果有多個任務時,你只想執行 uglify 任務,請將指令改成 grunt uglify,如果是想要執行 uglify 任務內的 my_target_2 項目呢?請直接下 grunt uglify:my_target_2

基本介紹到這裡,大家對於 Grunt.js 應該都有基本的瞭解。最後補張執行後的圖

GruntJSGruntJS

二月 21, 2013

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 壓縮 Javascript 和 CSS 檔案 script command

nodejs-lightnodejs-light

網站上站前要做的事情非常多,其中一項為大家所知就是壓縮 CSSJavaScript 檔案,減少 Http request 流量,網路上已經有非常多的 Compressor tool,像是 Google Closure CompilerYUI Compressor,都是用來壓縮 JS 或 CSS 檔案,這次寫了 script 來壓縮整個網站目錄裡的 js 或 css 檔案,不過 script 所使用的 Compressor command 是 Node Base 的 tool,分別是 UglifyJSsqwish 這兩套,當然使用 command 之前,請務必先安裝好 Node.js 最新版本啦,不過沒安裝也沒關係,底下有懶人安裝 script command。這些 tool 對於 Embedded System 在 build firmware 相當有用,可以減少不少 code size 阿。

可以直接看專案說明,就可以不必看底下步驟了

系統環境安裝

由於系統內必須安裝 Node.js,才會有 NPM 指令,我們可以透過 NVM 來管理機器各個 Node.js 版本。別擔心,已經有寫好 script 可以一鍵安裝,非常懶人。

$ git clone https://github.com/appleboy/minify-tool.git build
$ chmod +x ./build/minify
$ ./build/install.sh

上述執行完成,就可以使用 UglifyJS 及 sqwish command 了。

使用方式

接著想針對不同專案來壓縮其目錄內所有的 js 及 css 檔案,執行方式如下

$ ./build/minify your_project_folder_path

如果你想保留原來目錄,而另外產生新的目錄來執行,可以透過 [--output|-o] 參數來執行

$ ./build/minify your_project_folder_path -o output_folder_path

這樣就可以了,非常簡單,目前只有支援 UglifyJS 及 sqwish command,將來預計還會支援各種壓縮工具,如果有什麼好用的工具可以介紹,請歡迎留言。

最後補上 Script 專案目錄: minify-tool

十一月 29, 2011

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» Node.js Version Management 多版本管理

nodejs-light

相信大家對於 Node.js 版本 Release 太快而感到困擾,每次新版出來,就要開始升級原本的版本,加上測試及修改,一定會浪費不少時間在上面,不管是任何語言我都希望能有一套 Version Management 來管理各版本之間的差異,以及讓使用者可以隨時切換版本來使用測試。那今天來介紹一套 Node.js Version Management,這隻程式是用 shell script 下去撰寫,可以安裝多版本在 Linux 本機上面,隨時都可以切換不同版本測試。此作者也是 expressjs Framework 發起者。

相信操作方式非常簡單,可以參考 Readme 來安裝測試,我要另外補充的是在 0.6.3 的版本,官方已經 npm (node package manager) 包在裏面了,也就是安裝好此版本,就可以直接使用 npm 指令。但是在 Node.js Version Management 似乎沒有加上 npm 的指令功能,所以我也發了 pull request 給作者,不知道作者會不會加上去就是了。如果想先使用,可以透過我的 github 來安裝。

安裝 Node.js Version Management

$ git clone https://appleboy@github.com/appleboy/nvm.git
$ cd n
$ cp bin/n /usr/local/bin

使用 npm

安裝 nodejs 0.6.3

$ n 0.6.3

安裝 Coffee-script 套件

$ n npm 0.6.3 install coffee-script

查詢以安裝套件

$ n npm 0.6.3 list

PS. npm 只有大於或等於 0.6.3 版本才有內建

Related View

support:

biggo.com.tw

biggo.sg

A Django site.