文章起因

最近負(fù)責(zé)公司商家后臺(tái)項(xiàng)目的前端業(yè)務(wù)，可惜只是寫(xiě)靜態(tài)頁(yè)，不用寫(xiě)任何JS代碼，作為一名新時(shí)代的FE，一開(kāi)始我是拒絕的，我怎么能做這么low的事呢？前端必須要高大上??！什么Angular、React搞起來(lái)?。‘吘刮覀冋衅窲D上面也有相應(yīng)的技能樹(shù)要求的嘛。

不就是讓你切個(gè)圖嘛~說(shuō)了這么多，到底能不能做？

所以有了這篇文章。

磨刀不誤砍柴工

開(kāi)工之前先了解一下需求

有人會(huì)問(wèn)了，寫(xiě)靜態(tài)頁(yè)還要了解需求？

如果我告訴你，我是照著產(chǎn)品經(jīng)理的Axure切呢？

了解之后才發(fā)現(xiàn)，所有后臺(tái)都有計(jì)劃重做。。。。。

開(kāi)工，我是如何定義現(xiàn)代切圖的

UI Framework

既然所有后臺(tái)都有計(jì)劃重做，那么統(tǒng)一風(fēng)格那就是必須的了。既然需要統(tǒng)一風(fēng)格，那么一套UI Framework就是必不可少的了。這里選擇Bootstrap為基礎(chǔ)，通過(guò)less進(jìn)行深度定制，形成公司統(tǒng)一風(fēng)格UI庫(kù)?？吹竭@里也許你會(huì)說(shuō)，不就是引用Bootstrap嗎，如果你這么想，那你真的只能是切圖了，換做我，我會(huì)這么做。

基于Bootstrap使用less進(jìn)行UI定制。比如基本色調(diào)，比如圓角，比如字體大小，比如間距，比如組件樣式。通過(guò)這些工作你可以深入了解less這么CSS預(yù)處理語(yǔ)言，傳送門(mén)

自動(dòng)化構(gòu)建

What the fuck！不就是寫(xiě)靜態(tài)頁(yè)嗎？這和自動(dòng)化構(gòu)建有什么關(guān)系？你丫也太能折騰了。

當(dāng)然，傳統(tǒng)使用DW畫(huà)頁(yè)面確實(shí)是不需要的。不過(guò)如果你是對(duì)工作效率有一點(diǎn)點(diǎn)追求的工程師，那么，你一定會(huì)采用自動(dòng)化構(gòu)建，讓我們來(lái)看看，自動(dòng)化之后有什么好處。

1. 去除重復(fù)工作。通過(guò)自動(dòng)化，你可以將重復(fù)的工作都交給構(gòu)建工具來(lái)完成，比如通用頭部、尾部、banner等等可以抽象成獨(dú)立模板引入。

2. 通過(guò)構(gòu)建可以進(jìn)行l(wèi)ess代碼編譯、壓縮、合并等，這一切都在你按下command s的瞬間完成

3. 避免出現(xiàn)低級(jí)錯(cuò)誤。如果你經(jīng)常切圖的話一定出現(xiàn)過(guò)，拷貝一個(gè)新的HTML后發(fā)現(xiàn)樣式錯(cuò)亂了，原來(lái)是css引用沒(méi)改名字~~，這類(lèi)問(wèn)題都可以通過(guò)自動(dòng)化解決。想想生活是不是美好很多呢。

4. 解放ctrl c/v。這就不需要解釋了吧~~畢竟80%的代碼都是這么產(chǎn)生的嘛。。。

5. 提高效率。解決了上面的問(wèn)題，還不能提升你的效率？

6. 增加技能樹(shù)，既然是前端來(lái)做自動(dòng)化構(gòu)建，那么我首推gulp 畢竟gulp的口號(hào)是Automate and enhance your workflow嘛。

7. 如果你也是這么做，并且想到有更多益處，請(qǐng)給我留言^_^

協(xié)作

傳統(tǒng)方式

傳統(tǒng)的前后端切圖協(xié)作方式是，A（切圖仔）將靜態(tài)頁(yè)面寫(xiě)好之后，通知 B（后端工程師），將頁(yè)面通過(guò)QQ、Email等方式發(fā)送給 B，B將代碼下載后，在本地預(yù)覽，確定符合需求后，將靜態(tài)頁(yè)面套成后端模板（例如我司使用的FreeMarker）。

配合代碼管理工具

一個(gè)復(fù)雜的項(xiàng)目，大多會(huì)用到代碼管理工具（常用的如Git、SVN等）。有了代碼管理工具以后，A 將靜態(tài)頁(yè)面寫(xiě)好之后，只需要提交代碼，通知 B，B將代碼拉取后本地預(yù)覽，確定符合需求后，將靜態(tài)頁(yè)面套成后端模板。

我是怎么做的？

在我司，后端采用的是SVN進(jìn)行代碼管理。我們前端部門(mén)采用的是自己搭建的Gitlab。作為一個(gè)前端工程師，我毫不掩飾自己對(duì)Git的鐘愛(ài)。讓我使用SVN，我是不樂(lè)意的。讓后端遷移到Git上？這就像空格與Tab的一場(chǎng)圣戰(zhàn)~

當(dāng)然這不是最主要的，有過(guò)切圖經(jīng)驗(yàn)的同學(xué)應(yīng)該都有過(guò)這種經(jīng)驗(yàn)。你幸幸苦苦寫(xiě)完一個(gè)頁(yè)面之后，后端同學(xué)往往會(huì)發(fā)表一些想法（雖然他們自己不寫(xiě)）。這里要改一下，那里改一下，如此等等。產(chǎn)品經(jīng)理就是這么被揍的，不是嗎？為了避免這種情況，最好是不是在后端用之前先讓他們看一看？

我的方案如下：

1. 提供一個(gè)可以在線預(yù)覽靜態(tài)頁(yè)面的地方，后端工程師在使用之前先在線預(yù)覽頁(yè)面并給出意見(jiàn)。我采用Node.js提供一個(gè)Server服務(wù)，提供靜態(tài)頁(yè)面預(yù)覽。

2. 提供一個(gè)在線下載源碼的地方，畢竟我不想為了一個(gè)代碼管理工具，發(fā)起一場(chǎng)戰(zhàn)斗^_^，通過(guò)Node.js提供動(dòng)態(tài)打包壓縮功能，支持單個(gè)頁(yè)面獨(dú)立打包和打包所有頁(yè)面。

3. 上面的功能應(yīng)該是自動(dòng)化的，基于Gitlab的Hook功能，自動(dòng)構(gòu)建發(fā)布

一些經(jīng)驗(yàn)

所謂解決方案，大致可以分為兩種:

一種是普適性的，這種往往會(huì)形成一套框架，如：Angular、React、vue等；

一種是基于特定業(yè)務(wù)的，這種往往是多個(gè)技能樹(shù)拼湊起來(lái)的一套流程

By vczero

我個(gè)人很認(rèn)可這種說(shuō)法。我自己更看重基于業(yè)務(wù)的解決方案，更能夠考驗(yàn)一個(gè)人的整體素質(zhì)。

在我看來(lái)，解決方案沒(méi)有最好，只有更合適，需要工程師在不斷自我完善的過(guò)程中以不斷創(chuàng)新的標(biāo)準(zhǔn)要求自己。我倡導(dǎo)一切技術(shù)性研究都應(yīng)該以業(yè)務(wù)為基礎(chǔ)。

我在生活中比較喜歡用意淫這個(gè)詞，在面試中發(fā)現(xiàn)有很多程序員喜歡背名詞，以前端為例，什么Angular、React、Node.js、NPM、Bower如此等等，再一細(xì)問(wèn)絕大多數(shù)都只是停留在一個(gè)demo中，并不能領(lǐng)會(huì)這些技術(shù)的精髓，以及了解技術(shù)的適用場(chǎng)景，我把這些稱(chēng)為意淫；工作中經(jīng)常遇到一大堆整天吹噓各種技術(shù)名詞的人，工作中卻仍然不能突破自己的舒適區(qū)，我把這些也稱(chēng)為意淫；

寫(xiě)在最后，我個(gè)人認(rèn)為產(chǎn)品經(jīng)理是這個(gè)世界上意淫頻率最高的物種。沒(méi)錯(cuò)！我就是這么直接。

寫(xiě)在最后的最后，不論你在從事什么工作，請(qǐng)成長(zhǎng)在每一次業(yè)務(wù)中