原文链接： http://www.jeffjade.com/2016/05/08/106-vue-es6-jade-scss-webpack-gulp/
一直以来非常光荣曾经有翻过《代码大全2》；这使我曲折编程之路少了许多不必要的曲折。它在软件工艺的话题中有写到一篇：“首先是为人写顺序，其次才是机械(Write Programs for People First, Computers Second)”。虽然这是针对代码可读性来谈及的，但这间接明示了开辟效力之主要不是？此次以 Vue , Es6, Jade, Scss , Webpack, Gulp等一套壮大组合来改良团队前端事情流，首因即出于这个理念。
不觉间，闯入这深似海的前端，已近一年。虽然时刻不长，却也阅历了几个框架的更替。但是这并未使我觉获得Coding的 快活：由于本质上，全日都在做着反复的事儿用反复的要领，这就好如让你全日拿着烂扫帚，在一座乏味的猥楼前，工资而机械地，日复一日地扫楼前枯枝落恭弘=叶 恭弘平常。云云，倒也没什么忒蹩脚；只是有一点：即使扫得三年，这履历和功力也就几天(即学会这套机制所用时刻)罢了。直到碰到这Vue Webpack。
为什么有上述的一点小慨叹嘞？这缘于现在的事情内容。现在我们团队人倒满多，再招几个便可凑在一起踢一场足球了。主有前端（Js）后端（Php），并加Android，Ios各一位。人人协力为公司几近一切款游戏，供应运营效劳。而我等前端所做的事儿，体现在用户那边，不过就是游戏中的运动(Activity)，这在当地中某一场景下，以webView得以承载和展示。我们的事情大部分行将运营谋划的一些五花八门运动，以Html＋JS＋Css加以实现下。
这自身虽不具可吐槽性，可喜的是(?)，公司数十款不必运用游戏，前端er得为此这些差异款游戏做类似运营运动；由于每个运动(SPA)页面过于自力，故而每个新运动，从切图，到规划，调款式，写逻辑，测试至宣布，悉数得重新来一遍。经常为此“念天地之悠悠，独怆但是泪下”。要晓得无聊和乏味的事情是罪行，不管是关于个人照样之于时期。
本着工欲善其事，必先利其器的理念，一直以来在事情效力这块，略怀执念：一个题目不该该被处置惩罚两次。毕竟有了疾速迭代产物的才，以及完成需求的高效，才节省出时刻来研讨产物的运转效力，或许别的。情愿多一分钟用来发愣，也无意多一秒低效以来用功。在此记载一篇，以记载前端编程之路的一个转机。前端生长一日千里, 有闻戏言一句道：”每六星期重写一个前端框架”。而在这么多框架下，缘何选取了这几个组合，天意云云吧：信息澎湃万千，初次接触到就它们，然后就是它们了。
Vue：上一个处置惩罚事情需求机制，是以Backnone，RequireJs，jQuery组合来撸(后期我有注入Gulp)；虽也能将工程模块儿化来写，不过，这跟我希冀相去甚远。而且前端生长到现在这田地，组件化开辟，也早已盛行开来。先前在前端选型上，虽然也晓得AngularJS，ReactJS等大名，不过由于Vue的简约壮大，更因看着特合口味（用户界面完整可以用嵌套的组件树来形貌），所以没怎么纠结，也就它了。现在回看，这是非常明智的选择。前几日有看到一篇《2016 年后 Web 开辟趋向是什么》，涨更多姿态。
ES6：这是时期生长的大趋向，进修它是蛮必要的。关于ES5，它的更改在于增添而非修正，用抑或不必，本钱仅仅在于进修 Es6 这块儿，不必斟酌任何兼容。现在，关于 Es6 尚在进修中，谈不好。不过供应更多 Api，语法糖，让写 js 更加便利，用着非常舒爽，特别=> import等；个人比较引荐，团队现在运用情况还并不抱负，有待推动。
Jade：用了Vue，最大的优点在于可以组件化来开辟各个SPA；由此，就得编写大批经常使用组件，到达各个功用/规划模块可以公用&复用，云云也轻易一致保护and改良。虽然html的标签就那末多，但是写她的人确是条理不齐的。非常愿望每位写组件的队友可以文雅一致，但是发明这是事儿，照样供应一种机制令其不能写得太蹩脚更轻易些。固然，实行过程当中，这个跟Scss，Es6一样，都没有强迫运用。
Scss：用它比较好的上风在于：使写CSS有了编程得觉得，这关于大型运用也确实很有效，可关于SPA运用，好坏险些相抵；在机制中引荐出来，最大得目标在于：想让队友们可以多一项妙技。可根据运用得情况来看，只是让我更邃晓两点：进修态度跟效果因人而异且差异很大；人类得大脑头脑体式格局更趋向于懒and习气。
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中文教程
原文出处：http:www.jeffjade.com
原文链接：http://www.jeffjade.com/2016/05/08/106-vue-es6-jade-scss-webpack-gulp/
猜你喜好(/对你有效)的文章
