摘要：主有前端后端，并加，各一名。本著工欲善其事，必先利其器的理念，一直以來在工作效率這塊，略懷執(zhí)念一個問題不應(yīng)該被解決兩次。下圖為開發(fā)項目機制所涉及到的插件工欲善其事，必先利其器，語言，框架皆可以歸結(jié)為器而不當僅局限于開發(fā)工具以及機。

原文鏈接： http://www.jeffjade.com/2016/05/08/106-vue-es6-jade-scss-webpack-gulp/

一直以來非常慶幸曾經(jīng)有翻過《代碼大全2》；這使我崎嶇編程之路少了很多不必要的坎坷。它在軟件工藝的話題中有寫到一篇：“首先是為人寫程序，其次才是機器(Write Programs for People First, Computers Second)”。雖然這是針對代碼可讀性來談及的，但這間接昭示了開發(fā)效率之重要不是？此次以 Vue , Es6, Jade, Scss , Webpack, Gulp等一套強大組合來改善團隊前端工作流，首因即出于這個理念。

不覺間，突入這深似海的前端，已近一年。雖然時間不長，卻也經(jīng)歷了幾個框架的更替。然而這并未使我感覺到Coding的 快樂：因為本質(zhì)上，整日都在做著重復(fù)的事兒用重復(fù)的方法，這就好如讓你整日拿著爛掃帚，在一座乏味的猥樓前，人為而機械地，日復(fù)一日地掃樓前枯枝落葉一般。如此，倒也沒什么忒糟糕；只是有一點：即便掃得三年，這經(jīng)驗和功力也就幾天(即學(xué)會這套機制所用時間)而已。直到遇到這Vue Webpack。

為何有上述的一點小感慨嘞？這緣于現(xiàn)在的工作內(nèi)容。如今我們團隊人倒?jié)M多，再招幾個就可湊在一起踢一場足球了。主有前端（Js）后端（Php），并加Android，Ios各一名。大家合力為公司幾近所有款游戲，提供運營服務(wù)。而我等前端所做的事兒，體現(xiàn)在用戶那里，不過就是游戲中的活動(Activity)，這在本地中某一場景下，以webView得以承載和展現(xiàn)。我們的工作大部分即將運營策劃的一些形形色色活動，以Html＋JS＋Css加以實現(xiàn)下。

這本身雖不具可吐槽性，可喜的是(?)，公司數(shù)十款不用應(yīng)用游戲，前端er得為此這些不同款游戲做相似運營活動；因為每一個活動(SPA)頁面過于獨立，故而每一個新活動，從切圖，到布局，調(diào)樣式，寫邏輯，測試至發(fā)布，全部得重新來一遍。時常為此“念天地之悠悠，獨愴然而淚下”。要知道無聊和乏味的工作是罪惡，不管是對于個人還是之于時代。

本著工欲善其事，必先利其器的理念，一直以來在工作效率這塊，略懷執(zhí)念：一個問題不應(yīng)該被解決兩次。畢竟有了快速迭代產(chǎn)品的能力，以及完成需求的高效，才能節(jié)省出時間來研究產(chǎn)品的運行效率，或者別的。寧愿多一分鐘用來發(fā)呆，也無意多一秒低效以來勤奮。在此記載一篇，以紀錄前端編程之路的一個轉(zhuǎn)折。前端發(fā)展日新月異, 有聞戲言一句道："每六星期重寫一個前端框架"。而在這么多框架下，緣何選取了這幾個組合，天意如此吧：信息洶涌萬千，首次接觸到就它們，然后就是它們了。

Vue：上一個解決工作需求機制，是以Backnone，RequireJs，jQuery組合來擼(后期我有注入Gulp)；雖也能將工程模塊兒化來寫，不過，這跟我期望相去甚遠。并且前端發(fā)展到如今這地步，組件化開發(fā)，也早已流行開來。先前在前端選型上，雖然也知道AngularJS，ReactJS等大名，不過因為Vue的簡潔強大，更因看著特合口味（用戶界面完全可以用嵌套的組件樹來描述），所以沒怎么糾結(jié)，也就它了。如今回看，這是非常明智的抉擇。前幾日有看到一篇《2016 年后 Web 開發(fā)趨勢是什么》，漲更多姿勢。

ES6：這是時代發(fā)展的大趨勢，學(xué)習(xí)它是蠻必要的。對于ES5，它的變動在于增加而非修改，用抑或不用，成本僅僅在于學(xué)習(xí) Es6 這塊兒，不用考慮任何兼容。如今，對于 Es6 尚在學(xué)習(xí)中，談不好。不過提供更多 Api，語法糖，讓寫 js 更加便捷，用著很是舒爽，尤其=> import等；個人比較推薦，團隊目前使用情形還并不理想，有待推進。

Jade：用了Vue，最大的好處在于可以組件化來開發(fā)各個SPA；由此，就得編寫大量常用組件，達到各個功能/布局模塊可以公用&復(fù)用，如此也方便統(tǒng)一維護and改善。雖然html的標簽就那么多，然而寫她的人確是層次不齊的。很是希望每位寫組件的隊友能夠優(yōu)雅統(tǒng)一，然而發(fā)現(xiàn)這是事兒，還是提供一種機制令其不能寫得太糟糕更容易些。當然，實施過程中，這個跟Scss，Es6一樣，都沒有強制使用。

Scss：用它比較好的優(yōu)勢在于：使寫CSS有了編程得感覺，這對于大型應(yīng)用也的確很有用，可對于SPA應(yīng)用，優(yōu)劣幾乎相抵；在機制中推薦出來，最大得目的在于：想讓隊友們可以多一項技能。可根據(jù)使用得情形來看，只是讓我更明白兩點：學(xué)習(xí)態(tài)度跟結(jié)果因人而異且差別很大；人類得大腦思維方式更趨向于懶and習(xí)慣。

Webpack：用這款強大的打包工具，主因是官方推薦它。后來證明它的確強大異常（它能把各種資源，例如JS（含JSX）、coffee、組件模版（含jade）、樣式（含less/sass）、圖片等等都作為模塊來使用和處理），同樣的學(xué)習(xí)成本也最大。在折騰這套機制時候，消耗時間最多的就是在這塊。并且類如圖片打包路徑問題，首次開啟Webpack巨慢等問題，如今都沒很好的解決，只得采取寫兼容辦法。不過，它在整個項目機制中起著舉足輕重的作用。

Gulp：Gulp在15年就有使用。將其列入新機制完全是出于高效開發(fā)的目的。團隊工作，需要先行在內(nèi)網(wǎng)測試ok，方才可以發(fā)布外網(wǎng)。而webpack打包部署在本地，這就需要采用ftp工具上傳打包內(nèi)容。先前使用所Xftp，后來試用過WinScp，以及GoodSync，感覺都不是很理想；SublimeText下的sftp插件倒不錯，卻作用于激活而變動的tab，對打包生成出來的不能work。而Gulp下的gulp-sftp卻很好適用這一場景，監(jiān)測本地某文件下指定文件變化，指定內(nèi)容上傳。因此必用Gulp。更有gulp-tinypng（熊貓一鍵壓圖），gulp-spritesmith（一鍵生成雪碧圖）等等可用的插件，一鍵以為之，大大節(jié)約開發(fā)時間成本。

下圖為 Vue＋ES6＋Jade＋Scss＋Webpack＋Gulp 開發(fā)項目機制所涉及到的npm插件：

Other：工欲善其事，必先利其器，語言，框架皆可以歸結(jié)為器；而不當僅局限于開發(fā)工具以及PC／MAC機。欲要高效開發(fā)，熟悉語言框架，擁有敏捷思維，豐富經(jīng)驗等無疑是最有幫助的。但這些層次非朝夕可至；那么在其他方面有所提升，倒也挺有裨益。如之前所提到的以Gulp來拼圖／壓圖／ftp上傳；再如熟悉開發(fā)工具(SublimeText/Atom)，這在文末有點自薦；再如寫些腳本，批量處理新建項目模版等等；當一件事被重復(fù)做超過三次，且有代碼實現(xiàn)以替代的可能，就當花點時間Coding以解放生產(chǎn)力。

總結(jié)：以上些許嘮叨，即為這段時間折騰的由頭。如今，團隊開發(fā)機制，也正全面向這套過渡；常用組件也已完善不少；開發(fā)效率在之后越發(fā)將得到提高；因Vue本身自帶其他各方面優(yōu)質(zhì)特性，產(chǎn)出的作品各個方面也都大有改進，幸甚。如此，編程才是充滿積極意義的。下一步，當朝著前端工程化、自動化方向前進，而這塊兒，另一隊友目前也正在踐行的路上，Go Fighting。以下為一路折騰過來的學(xué)習(xí)參考：

Vue篇
Vue.js：輕量高效的前端組件化方案 來自Vue作者尤雨溪
Vue官方教程
Vue.js 源碼學(xué)習(xí)筆記來自囧克斯
vue-router文檔
Vue 組件化開發(fā)實踐
mvvm學(xué)習(xí)&vue實踐小結(jié)

Webpack篇

一小時包教會 —— webpack 入門指南
webpack-doc(中文文檔)
詳解前端模塊化工具-Webpack
webpack常用配置總結(jié)
Webpack 性能優(yōu)化 (一) 使用別名做重定向

Gulp篇
Gulp開發(fā)教程（翻譯）
Gulp探究折騰之路(I)
Gulp折騰之路(II)

Sass篇
Sass中文教程

Jade篇
Jade中文教程

原文出處：http:www.jeffjade.com
原文鏈接：http://www.jeffjade.com/2016/05/08/106-vue-es6-jade-scss-webpack-gulp/

猜你喜歡(/對你有用)的文章

如何優(yōu)雅地使用Sublime Text

Win下必備神器之Cmder

新編碼神器Atom使用紀要