文章起因

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

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

所以有了這篇文章,。

磨刀不誤砍柴工

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

有人會(huì)問(wèn)了，寫靜態(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ǔ)言，傳送門

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

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

當(dāng)然,，傳統(tǒng)使用DW畫頁(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)改名字~~，這類問(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è)面寫好之后,，通知 B（后端工程師）,，將頁(yè)面通過(guò)QQ、Email等方式發(fā)送給 B,，B將代碼下載后,，在本地預(yù)覽，確定符合需求后,，將靜態(tài)頁(yè)面套成后端模板（例如我司使用的FreeMarker）,。

配合代碼管理工具

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

我是怎么做的,？

在我司,，后端采用的是SVN進(jì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),。你幸幸苦苦寫完一個(gè)頁(yè)面之后，后端同學(xué)往往會(huì)發(fā)表一些想法（雖然他們自己不寫）,。這里要改一下,，那里改一下，如此等等,。產(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)景,，我把這些稱為意淫；工作中經(jīng)常遇到一大堆整天吹噓各種技術(shù)名詞的人,，工作中卻仍然不能突破自己的舒適區(qū),，我把這些也稱為意淫；

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

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