至于Handlebars是什么東東，這里就不做過多解釋，可以參照本站課程學習惡補。。。。
Handlebars入門課程傳送門:http://www.gbtags.com/gb/gbliblist/7.htm
今天我們著中講下如何預編譯Handlebars模板，眾所周知，如果在運行時去編譯一些東西是非常影響性能的，Handlebars同樣如此，如果每次都在加載頁面的時候，在js中通過Handlebar.compile(template_source)的話，如果模板簡單就不說了，如果模板非常復雜，夸張點說，讓客戶端的瀏覽器未響應也不是不可能。
好了，閑扯淡到此為止，開始動手。
從Handlebars的官網http://handlebarsjs.com/precompilation.html 我們可以了解到，要實現Handlebars的預編譯非常簡單，只需要通過npm 安裝他的npm包就可以了 npm install -g handlebars (啥？npm不知道是啥？好吧，自行百度/google) .
這時候，handlebars的模板也不用再像入門教程中寫的那樣通過script標簽嵌在Html的頁面中了，我們需要把對應的模板寫在對應的模板文件里面，handlebars的模板文件就是以.handlebars擴展名結尾的文件。比如有如下文件
sample.handlebars
其內容如下：
<divclass="container">
<divclass="row">
<divclass="col-sm-2">名字
<divclass="col-sm-10">{{name}}
</div>
</div>
Note: 這時候，模板內容就不用再包含在script標簽中了。
然后只要在命令行如下命令即可 handlebars sample.handlebars -m -f sample.hbs.js
這里我們對handlebars的命令做下簡單的介紹，具體的可以參考github上的 https://github.com/wycats/handlebars.js/
Precompiling Templates
sample.handlebars 是輸入源 文件，也就是我們寫的模板文件
-m 參數是把預編譯后壓縮文件
-f 制定輸出文件路徑
sample.hbs.js 就是-f參數制定的輸出文件
到此，Handlebars的預編譯過程就完成了，我們可以通過在html中引入handlebars.js 和預編譯后的sample.hbs.js我們就可以盡情的使用預編譯后的模板了！！！！
那到底怎么使用這個預編譯后的模板呢？
要想清楚怎么使用，我們就應該先了解這個預編譯到底做了什么，其實也沒有什么神秘的，預編譯就是在Handlebars這個對象的templates對象中加入了我們編寫的sample.handlebars文件同名的一個對象，這樣我們就可以再我們的代碼中通過Handlebars.templates.sample(contex,options)來調用我們定義的模板了。
到此這篇文章本來就可以結束了，但是，我們上面引用的是handlebars.js這個文件，這個文件未壓縮的情況下有140K，官方給出了另外一個可以進一步節約帶寬，而且更加適合移動端加載的方案，那就是使用體積更小的runtime文件，也就是handlebar.runtime.js這個文件,這個文件在未壓縮的情況下也只有24K，但是官方并沒有給出這個文件，需要我們自行build handlebars的工程來獲得。
查看gibhub上Handlebars的工程結構我們可以了解到，他的工程是通過node+grunt來構建的，這樣我們就只需要通過grunt 命令來build下就可以了。（啥？node和grunt不知為何物？好吧，百度/google自行學習之）
1. 首先從github上把handlebars的工程check out出來，這個就不多說了
2. 在檢出的工程更目錄下打開命令行 執行npm install 這個就是把配置在package.json中的依賴下載到工程中
3. 上述工作完成后，我們可以檢查下Gruntfile.js中有哪些task，當然我們的目標是去查找有沒有build這樣的task, 找到后，在命令行中輸入grunt build ,當看到Done ... 這樣的字樣時，OK， 大功告成！
4. 編譯結束后，我們就可以再dest 目錄中看到handlebars.runtime.js這個文件了。
好了，得到runtime文件后，我們就可以替換上面中的handlebars.js了。
至此完美收筆。
尊重筆者知識，轉載請注明出處：http://www.gbtags.com/gb/share/5764.htm