吐槽
在这个年头 最苦逼的职业莫过于前端了 特别是2016年。 我本以为学了点gulp 打打包 已经算是合格的前端了 。但前端的发展速度实在太快…以webpack为首的新型构建正是前端新世界的大门。 你可以在三大金刚 ng react vue都能见到webpack打包 这一词。 就连jquery老大哥也开始提倡webpack模块化。 看来我们旧时代的人已经无法生存了。然而海贼白胡子依旧是最强。 不管哪个时代靠的还是自己
在开始正文前 要解释下 前端这个大环境和webpack
旧时代前端 以传统的静态页面 (html js css )编写 + css3特效 transfrom位移 旋转等等 + jquery zepto swiper 等常用js插件 也能手写一些简单特效等等 。处理pc手机游览器兼容。grunt gulp 打打包之类
新时代前端 以nodejs和npm为核心 需要什么就install 什么 然后require 什么 。熟悉gulp webpack less sass 常用构建工具。他们是一种写app方式写html. 连入口文件都基本叫app.js
旧时代的前端呢 不存在编译这个概念 游览器里只要写什么是什么 需要啥库就一个src引入 那时候真是 天真 自由 代码也是五花八门 。入门门槛也非常低 只要你会word ppt 。装个chrome 和记事本 自学也能写出很漂亮的页面 很多恶搞图都是这么搞出来的。而真是这些行为导致后台大佬不爽 他们开始以后台的角度写前端 并且领导出了新时代的前端 。
在一开始的js中没有编译这个概念 写什么就是什么 毕竟游览器就是客户端 这样有好处（简单自由）也有坏处（杂不规范）。而大佬们基本后台出生 一方面喜欢规范好维护 一方面不喜欢给人看源码 在nodejs没火起来前就尝试用类似amd cmd加载器编写, 火后就开始以webpack万物皆模块（js)去编写。 这样做似乎更让前端符合程序员的形象。但也提高了学习成本 毕竟你写的不是网页了 是在写应用。
那为什么要用webpack去写呢 我自己认为就是装高大上 。 比如旧时代的引用css文件 你只需要在html里插入一条link href=”xxxx.css”足以。而新时代除了你要装各种loader加载器, 那个css也是通过less,sass编译出来的 更要命的 你必须要在js里requeie你那个css文件(万物皆模块,当然也有解决方案 但配置更复杂了 装插件提取之类） 然后最终打包插入到html里 。举个现实例子吧 至少我是这么想的
你到超市买瓶水 你只要去货架挑好水然后去柜台找服务员结账就行了 。但这家超市是自助服务 你要先点击屏幕 选购水
支付宝 扫码 如果你支付宝没有绑定银行卡还要去次银行 多麻烦啊 。大哥我只是要水 有那么麻烦吗
这种观念呢 谁都不是绝对正确的 。毕竟时代在进步 你现在支付宝都没 也都不好意思出门吧 第一次确实麻烦了 但习惯就习惯了 。 直接买是简单快有效 但身上没零钱 或者已经是三更半夜怎么办。 自助确实方便 但万一哪天机器出故障 自己怎么死的都不知道 参考砸arm机的人 各位不妨去楼下买瓶水就知道自己的心理了。
回到前端话题 这种思想就是现代的前端思想。。 很多事情都是自动完成的。人家下个插件或者游戏 还要 打开官网 点击下载 解压 而npm install 一句话就安装完了 真的觉得很不可思议 其实最初这种观念存在linux yum命令 所以 前端那些新东西 基本都是后台大佬带过来的
也许在不久的未来 下一代前端会觉得 web的正确写法就是那样 我怀疑我是一个假前端了。。
最重要的是
最重要的是
最重要的是
不管是哪个时代 客户是最傻的。他们不会觉得哪个方案好 更不会查看源码去看 。他们只会点 会滑（handle ) 等等去触发（event )事件 来交互数据。只要在体验过程中 能点 能滑 很流畅 (追求性能)
那么用户happy 老板happy 你也happy 反之 你懂的。。。
发个fgo图 鼓励下自己吧
军师在手天下我有。。
东西
说了半天 来看了博客,想要的东西 我还没给呢 我呢 还是各取优长 . 我觉得web没必要像app那么复杂 不开心啊 万物皆js有点太那个了 (webpack有取代gulp的冲势) 所以还是以gulp 为核心 html css 还是那原汁原味的 但js 需webpack编译处理 最好带个热刷新 方便构建网页
基于这套思路我尝试在github上找 发现网易 确实有款符合我想象中的要求 但 玩下来一看 虽然能转但年代有点远 webpack都停留在beta阶段 用的还是livereload 很老了 。 人家敢放出来很好了 现在新的内部的肯定留给自己用吧。
自己下了个后开始尝试融合了些符合自己品味的东西 希望就去用吧 别忘了加星 提提意见哈
地址 https://github.com/lanbosm/gulp-webpack-demo
毕竟实力有限 还不是很完善 希望通过以后的努力变得更完善。
如果效果觉得行那么可以看下面源码分析 给萌新们看的 大佬们就不要给我打脸了