Vue ES6 Jade Scss Webpack Gulp

時間 2019-11-05

標籤 vue es6 jade scss webpack gulp 欄目 JavaScript 简体版

原文原文鏈接

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

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

不覺間，突入這深似海的前端，已近一年。雖然時間不長，卻也經歷了幾個框架的更替。然而這並未使我感受到Coding的快樂：由於本質上，整日都在作着重複的事兒用重複的方法，這就好如讓你整日拿着爛掃帚，在一座乏味的猥樓前，人爲而機械地，日復一日地掃樓前枯枝落葉通常。如此，倒也沒什麼忒糟糕；只是有一點：即使掃得三年，這經驗和功力也就幾天(即學會這套機制所用時間)而已。直到遇到這Vue Webpack。前端

爲什麼有上述的一點小感慨嘞？這緣於如今的工做內容。現在咱們團隊人倒滿多，再招幾個就可湊在一塊兒踢一場足球了。主有前端（Js）後端（Php），並加Android，Ios各一名。你們協力爲公司幾近全部款遊戲，提供運營服務。而我等前端所作的事兒，體如今用戶那裏，不過就是遊戲中的活動(Activity)，這在本地中某一場景下，以webView得以承載和展示。咱們的工做大部分即將運營策劃的一些形形色色活動，以Html＋JS＋Css加以實現下。vue

這自己雖不具可吐槽性，可喜的是(?)，公司數十款不用應用遊戲，前端er得爲此這些不一樣款遊戲作類似運營活動；由於每個活動(SPA)頁面過於獨立，故而每個新活動，從切圖，到佈局，調樣式，寫邏輯，測試至發佈，所有得從新來一遍。時常爲此「念天地之悠悠，獨愴然而淚下」。要知道無聊和乏味的工做是罪惡，無論是對於我的仍是之於時代。webpack

本着工欲善其事，必先利其器的理念，一直以來在工做效率這塊，略懷執念：一個問題不該該被解決兩次。畢竟有了快速迭代產品的能力，以及完成需求的高效，才能節省出時間來研究產品的運行效率，或者別的。寧願多一分鐘用來發呆，也無心多一秒低效以來勤奮。在此記載一篇，以紀錄前端編程之路的一個轉折。前端發展突飛猛進, 有聞戲言一句道："每六星期重寫一個前端框架"。而在這麼多框架下，緣何選取了這幾個組合，天意如此吧：信息洶涌萬千，首次接觸到就它們，而後就是它們了。git

Vue：上一個解決工做需求機制，是以Backnone，RequireJs，jQuery組合來擼(後期我有注入Gulp)；雖也能將工程模塊兒化來寫，不過，這跟我指望相去甚遠。而且前端發展到現在這地步，組件化開發，也早已流行開來。先前在前端選型上，雖然也知道AngularJS，ReactJS等大名，不過由於Vue的簡潔強大，更因看着特合口味（用戶界面徹底能夠用嵌套的組件樹來描述），因此沒怎麼糾結，也就它了。現在回看，這是很是明智的抉擇。前幾日有看到一篇《2016 年後 Web 開發趨勢是什麼》，漲更多姿式。es6

ES6：這是時代發展的大趨勢，學習它是蠻必要的。對於ES5，它的變更在於增長而非修改，用抑或不用，成本僅僅在於學習 Es6 這塊兒，不用考慮任何兼容。現在，對於 Es6 尚在學習中，談很差。不過提供更多 Api，語法糖，讓寫 js 更加便捷，用着非常舒爽，尤爲=> import等；我的比較推薦，團隊目前使用情形還並不理想，有待推動。github

Jade：用了Vue，最大的好處在於能夠組件化來開發各個SPA；由此，就得編寫大量經常使用組件，達到各個功能/佈局模塊能夠公用&複用，如此也方便統一維護and改善。雖然html的標籤就那麼多，然而寫她的人確是層次不齊的。非常但願每位寫組件的隊友可以優雅統一，然而發現這是事兒，仍是提供一種機制令其不能寫得太糟糕更容易些。固然，實施過程當中，這個跟Scss，Es6同樣，都沒有強制使用。web

Scss：用它比較好的優點在於：使寫CSS有了編程得感受，這對於大型應用也的確頗有用，可對於SPA應用，優劣幾乎相抵；在機制中推薦出來，最大得目的在於：想讓隊友們能夠多一項技能。可根據使用得情形來看，只是讓我更明白兩點：學習態度跟結果因人而異且差異很大；人類得大腦思惟方式更趨向於懶and習慣。vue-router

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

Gulp：Gulp在15年就有使用。將其列入新機制徹底是出於高效開發的目的。團隊工做，須要先行在內網測試ok，方纔能夠發佈外網。而webpack打包部署在本地，這就須要採用ftp工具上傳打包內容。先前使用所Xftp，後來試用過WinScp，以及GoodSync，感受都不是很理想；SublimeText下的sftp插件倒不錯，卻做用於激活而變更的tab，對打包生成出來的不能work。而Gulp下的gulp-sftp卻很好適用這一場景，監測本地某文件下指定文件變化，指定內容上傳。所以必用Gulp。更有gulp-tinypng（熊貓一鍵壓圖），gulp-spritesmith（一鍵生成雪碧圖）等等可用的插件，一鍵覺得之，大大節約開發時間成本。

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

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

總結：以上些許嘮叨，即爲這段時間折騰的由頭。現在，團隊開發機制，也正全面向這套過渡；經常使用組件也已完善很多；開發效率在以後愈加將獲得提升；因Vue自己自帶其餘各方面優質特性，產出的做品各個方面也都大有改進，幸甚。如此，編程纔是充滿積極意義的。下一步，當朝着前端工程化、自動化方向前進，而這塊兒，另外一隊友目前也正在踐行的路上，Go Fighting。如下爲一路折騰過來的學習參考：

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

Webpack篇

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

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

Sass篇
Sass中文教程

Jade篇
Jade中文教程