我是如何對待寫靜態頁這項工做的

歡迎一塊兒交流

歡迎關注個人我的公衆號，不按期更新本身的工做心得。

什麼是靜態頁

傳送門

文章原由

最近負責公司商家後臺項目的前端業務，惋惜只是寫靜態頁，不用寫任何JS代碼，做爲一名新時代的FE，一開始我是拒絕的，我怎麼能作這麼low的事呢？前端必需要高大上啊！什麼Angular、React搞起來啊！畢竟咱們招聘JD上面也有相應的技能樹要求的嘛。

不就是讓你切個圖嘛~說了這麼多，到底能不能作？

因此有了這篇文章。

磨刀不誤砍柴工

開工以前先了解一下需求

有人會問了，寫靜態頁還要了解需求？

若是我告訴你，我是照着產品經理的Axure切呢？

瞭解以後才發現，全部後臺都有計劃重作。。。。。

開工，我是如何定義現代切圖的

UI Framework

既然全部後臺都有計劃重作，那麼統一風格那就是必須的了。既然須要統一風格，那麼一套UI Framework就是必不可少的了。這裏選擇Bootstrap爲基礎，經過less進行深度定製，造成公司統一風格UI庫。看到這裏也許你會說，不就是引用Bootstrap嗎，若是你這麼想，那你真的只能是切圖了，換作我，我會這麼作。

基於Bootstrap使用less進行UI定製。好比基本色調，好比圓角，好比字體大小，好比間距，好比組件樣式。經過這些工做你能夠深刻了解less這麼CSS預處理語言，傳送門

自動化構建

What the fuck！不就是寫靜態頁嗎？這和自動化構建有什麼關係？你丫也太能折騰了。

固然，傳統使用DW畫頁面確實是不須要的。不過若是你是對工做效率有一點點追求的工程師，那麼，你必定會採用自動化構建，讓咱們來看看，自動化以後有什麼好處。

1. 去除重複工做。經過自動化，你能夠將重複的工做都交給構建工具來完成，好比通用頭部、尾部、banner等等能夠抽象成獨立模板引入。

2. 經過構建能夠進行less代碼編譯、壓縮、合併等，這一切都在你按下command+s的瞬間完成

3. 避免出現低級錯誤。若是你常常切圖的話必定出現過，拷貝一個新的HTML後發現樣式錯亂了，原來是css引用沒更名字~~，這類問題均可以經過自動化解決。想一想生活是否是美好不少呢。

4. 解放ctrl+c/v。這就不須要解釋了吧~~畢竟80%的代碼都是這麼產生的嘛。。。

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

6. 增長技能樹，既然是前端來作自動化構建，那麼我首推gulp 畢竟gulp的口號是Automate and enhance your workflow嘛。

7. 若是你也是這麼作，而且想到有更多益處，請給我留言^_^

協做

傳統方式

傳統的先後端切圖協做方式是，A（切圖仔）將靜態頁面寫好以後，通知 B（後端工程師），將頁面經過QQ、Email等方式發送給 B，B將代碼下載後，在本地預覽，肯定符合需求後，將靜態頁面套成後端模板（例如我司使用的FreeMarker）。

配合代碼管理工具

一個複雜的項目，大多會用到代碼管理工具（經常使用的如Git、SVN等）。有了代碼管理工具之後，A 將靜態頁面寫好以後，只須要提交代碼，通知 B，B將代碼拉取後本地預覽，肯定符合需求後，將靜態頁面套成後端模板。

我是怎麼作的？

在我司，後端採用的是SVN進行代碼管理。咱們前端部門採用的是本身搭建的Gitlab。做爲一個前端工程師，我絕不掩飾本身對Git的鐘愛。讓我使用SVN，我是不樂意的。讓後端遷移到Git上？這就像空格與Tab的一場聖戰~

固然這不是最主要的，有過切圖經驗的同窗應該都有過這種經驗。你倖幸苦苦寫完一個頁面以後，後端同窗每每會發表一些想法（雖然他們本身不寫）。這裏要改一下，那裏改一下，如此等等。產品經理就是這麼被揍的，不是嗎？爲了不這種狀況，最好是否是在後端用以前先讓他們看一看？

個人方案以下：

1. 提供一個能夠在線預覽靜態頁面的地方，後端工程師在使用以前先在線預覽頁面並給出意見。我採用Node.js提供一個Server服務，提供靜態頁面預覽。

2. 提供一個在線下載源碼的地方，畢竟我不想爲了一個代碼管理工具，發起一場戰鬥^_^，經過Node.js提供動態打包壓縮功能，支持單個頁面獨立打包和打包全部頁面。

3. 上面的功能應該是自動化的，基於Gitlab的Hook功能，自動構建發佈

一些經驗

所謂解決方案，大體能夠分爲兩種:

一種是普適性的，這種每每會造成一套框架，如：Angular、React、vue等；

一種是基於特定業務的，這種每每是多個技能樹拼湊起來的一套流程

By vczero

我我的很承認這種說法。我本身更看重基於業務的解決方案，更可以考驗一我的的總體素質。

在我看來，解決方案沒有最好，只有更合適，須要工程師在不斷自我完善的過程當中以不斷創新的標準要求本身。我倡導一切技術性研究都應該以業務爲基礎。

我在生活中比較喜歡用意淫這個詞，在面試中發現有不少程序員喜歡背名詞，之前端爲例，什麼Angular、React、Node.js、NPM、Bower如此等等，再一細問絕大多數都只是停留在一個demo中，並不能領會這些技術的精髓，以及瞭解技術的適用場景，我把這些稱爲意淫；工做中常常遇到一大堆成天吹噓各類技術名詞的人，工做中卻仍然不能突破本身的溫馨區，我把這些也稱爲意淫；

寫在最後，我我的認爲產品經理是這個世界上意淫頻率最高的物種。沒錯！我就是這麼直接。

寫在最後的最後，不論你在從事什麼工做，請成長在每一次業務中