#uglify

前回は助っ人プログラムについて書いた。あれからしばらく作業の引き継ぎに四苦八苦していたんだけど、結局私がやりすぎていたことが分かった。

というのも、ずっと助っ人プログラムの設定をいじくり回していたわけだが、実際は設定をほぼいじらない方が良かったのだ。

バイトにうちのやり方を叩き込むのではなく、バイトくんのやり方に合わせて仕事場を調整すると。それだけ助っ人が有能だということだ。

前回はYeomanって書いたけど、実際核となるのはGruntというツールで、こいつはバイトくんと言うより、大勢のバイトくんを束ねる仕切り屋さんみたいなやつだ。パッケージングという重要だけどちまちました作業をバリバリこなしてくれる。

パッケージングというのは、簡単に言えば、別々に組み立てたプログラムたちをコンパクトにまとめて圧縮する作業だ。ウェブはスピードが命だから、使用メモリを軽くしてくれる圧縮技術はかなり重宝される。

おまけにGruntは、プログラムが圧縮され過ぎて壊れないように保護までしてくれるという有能ぶり。

A quick disclaimer: I no longer use grunt. I have changed to gulp because I prefer its code over configuration approach. However I think grunt still has great value for someone who wants the advantages of automation without all the details of JavaScript.

This is not an introduction to grunt, that is very well explained on the official site. Grunt is a task runner for JavaScript. That sounds very simple, you can use grunt to do tasks for you, however isn't all programming running prescribed tasks or programs. I would say yes and so what is the use of grunt? 

Get started with gulp Part 3: Uglify & environment variables

In this video, I’ll show you how you can use gulp with UglifyJS2. We’ll also use an environment variable called “NODE_ENV” to only minify our Javascript if w…

New Post has been published on http://blog.giiko.net/2014/04/15/%e5%87%ba%e5%9a%90-grunt/

出嚐 Grunt

其實長期以來，一直想要玩 grunt 卻總是各種理由拖延沒去好好研究，最近剛好遇到一些問題，想說可以好好整理一下架構，減少開發和測試的時間，那當然就非 grunt 不可啦…

是的，其實這頭牛看起來還真的有點兇，不過好用的東西哪管得了這麼多啊，反正重要的是，可以幫助開發、測試、除錯、產生文件、縮圖，而且還是全自動的，那當然要好好利用囉

這次測試大概主要只有使用幾個功能，測試環境也是在我的 MacOSX Mavericks 上執行，當然，為了方便起見，我還是安裝了 brew 的一些基本套件，既然不是文章的重點，就先略過這一部分的說明了

安裝 grunt 還挺簡單的，其實主要是要先安裝 grunt-cli 套件，這主要是 grunt 的主程式，畢竟大部分的功能都還是在 cli 執行的

# npm install -g grunt-cli

安裝 grunt-cli 套件只是前期工作，接下來就準備開始主軸了

  因為 grunt 主要是開發上輔助的角色，所以安裝其相依擴充套件時，要使用 –save-dev 的選項，這可以確保套件相依只是關於開發環境使用

當然，在最一開始，還是要在專案的環境中安裝 grunt 套件

# npm install –save-dev grunt

由於是出嚐 grunt 所以，其實我也只有安裝最基本的幾個套件：

grunt-contrib-yuidoc 主要是自動產生 yui 格式的文件

grunt-contrib-uglify 壓縮和醜化混亂 js

grunt-contrib-concat 結合檔案

grunt-contrib-qunit Unit test 工具

grunt-contrib-jshint jshint 工具，幫助檢查 js 語法的錯誤

grunt-contrib-watch 自動監控檔案更改狀態，並重新更新的套件

好了，廢話不多說，就一次全部安裝起來吧

# npm install –save-dev grunt-contrib-yuidoc grunt-contrib-uglify grunt-contrib-concat grunt-contrib-qunit grunt-contrib-jshint grunt-contrib-watch

由於 grunt-contrib-uglify 這套件還挺奇妙的，理論上應該可以結合多個 js 檔案，並一起壓縮/混亂才對，不過看來是得要使用 grunt-contrib-concat 才可以，所以程序就會變成： 先執行 concat 再執行 uglify

這次主要只有使用這幾個套件，不過因為 qunit 套件我是怎樣都無法測試成功，仍然在檢查原因，所以就暫時拿掉了

另外，希望把部分的要結合/壓縮混亂的 js 檔案一起處理，所以也把要處理的檔案放到 src/conn/ 裡面，產生一個 <%= pkg.name %>.join.js (專案名稱) 的檔案，並且對這個 .join.js 壓縮，所以兩個規則是相依相關的

此外，既然不是 css 高手，也懶得花太多時間去做 yuidoc 所產生出來的靜態頁面檔案，所以順便使用了 yuidoc-bootstrap-theme 這個套件，作為 yuidoc 主題和控制介面，並且將所產出的文件放在 docs/doc ，主題放在 docs/themes 中，所以執行以下的動作產生相關的目錄結

# mkdir -p src/conn# mkdir -p src/join # mkdir build # mkdir docs/doc # mkdir docs/themes # cd docs/themes # git clone https://github.com/kevinlacotaco/yuidoc-bootstrap-theme.git yuidoc-bootstrap.theme

建立好基本環境後，剩下的就只有 Gruntfile.js 這個檔案了，他也算是整個 grunt 的核心，為了要方便使用，我也另外做了 test 和 doc 兩個選項，可以單獨測試檔案項目，或是產生文件，原始碼如下：

 module.exports = function(grunt) /* Project configuration */ grunt.initConfig( pkg: grunt.file.readJSON(‘package.json’), yuidoc: compile: name: ‘<%= pkg.name %>’, description: ‘<%= pkg.descriptiton %>’, version: ‘<%= pkg.version %>’, url: ‘<%= pkg.homepage %>’, options: paths: ['routes', 'libs', '.'], outdir: ‘docs/doc’, exclude: ‘lib,docs,build’, themedir: ‘docs/themes/yuidoc-bootstrap.theme’, helpers: ['docs/themes/yuidoc-bootstrap.theme/helpers/helpers.js'] ,

concat: options: separator: ‘;’ , dist: src: ['src/conn/*.js'], dest: ‘src/join/<%= pkg.name %>.join.js’ ,

uglify: options: banner: ‘/*! <%= pkg.name %> <%= grunt.template.today(“yyyy-mm-dd”) %>*/\n’ , build: src: ‘src/join/<%= pkg.name %>.join.js’, dest: ‘public/js/<%= pkg.name %>.min.js’ ,

qunit:   /* seems cannot work correct on MacOSX */ all: ['test/**/*.html', 'views/**/*.html'] ,

jshint: files: ['./*.js', 'routes/**/*.js', 'src/**/*.js'], options: globals: exports: true ,

watch: files: ['<%= jshint.files %>'], tasks: ['jshint'] ); /* Load the plguin that provides the “uglify” task. */ grunt.loadNpmTasks(‘grunt-contrib-yuidoc’); grunt.loadNpmTasks(‘grunt-contrib-uglify’); grunt.loadNpmTasks(‘grunt-contrib-concat’); grunt.loadNpmTasks(‘grunt-contrib-qunit’); grunt.loadNpmTasks(‘grunt-contrib-jshint’); grunt.loadNpmTasks(‘grunt-contrib-watch’); /* Default task(s) */ grunt.registerTask(‘default’, ['yuidoc', 'jshint', 'concat', 'uglify', 'watch']); // grunt.registerTask(‘test’, ['qunit']); grunt.registerTask(‘test’, ['qunit', 'jshint']); grunt.registerTask(‘doc’, ['yuidoc']); ;

這只算是初次嘗試，所以有些項目可能還設想的不夠周到，不過最基本的雛形已經有了，如果要執行全部功能，則

# grunt

如果是要單純測試

# grunt test

另外，要產生 yuidoc 的話，就

# grunt doc