我是如何對待寫靜態頁這項工作的_html/css_WEB-ITnose

什么是靜態頁

傳送門

文章起因

最近負責公司商家后臺項目的前端業務，可惜只是寫靜態頁，不用寫任何 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中，并不能領會這些技術的精髓，以及了解技術的適用場景，我把這些稱為意淫；工作中經常遇到一大堆整天吹噓各種技術名詞的人，工作中卻仍然不能突破自己的舒適區，我把這些也稱為意淫；

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

寫在最后的最后，不論你在從事什么工作， 請成長在每一次業務中

上圖來自百度~~~~

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com