資訊專欄INFORMATION COLUMN
摘要：開工，我是如何定義現代切圖的既然所有后臺都有計劃重做，那么統一風格那就是必須的了。我們前端部門采用的是自己搭建的。讓我使用，我是不樂意的。我采用提供一個服務，提供靜態頁面預覽。沒錯我就是這么直接。
歡迎一起交流
歡迎關注我的個人公眾號，不定期更新自己的工作心得。
什么是靜態頁傳送門
文章起因最近負責公司商家后臺項目的前端業務，可惜只是寫靜態頁，不用寫任何JS代碼，作為一名新時代的FE，一開始我是拒絕的，我怎么能做這么low的事呢？前端必須要高大上啊！什么Angular、React搞起來啊！畢竟我們招聘JD上面也有相應的技能樹要求的嘛。
不就是讓你切個圖嘛~說了這么多，到底能不能做？
所以有了這篇文章。
磨刀不誤砍柴工 開工之前先了解一下需求有人會問了，寫靜態頁還要了解需求？
如果我告訴你，我是照著產品經理的Axure切呢？
了解之后才發現，所有后臺都有計劃重做。。。。。
開工，我是如何定義現代切圖的 UI Framework既然所有后臺都有計劃重做，那么統一風格那就是必須的了。既然需要統一風格，那么一套UI Framework就是必不可少的了。這里選擇Bootstrap為基礎，通過less進行深度定制，形成公司統一風格UI庫。看到這里也許你會說，不就是引用Bootstrap嗎，如果你這么想，那你真的只能是切圖了，換做我，我會這么做。
基于Bootstrap使用less進行UI定制。比如基本色調，比如圓角，比如字體大小，比如間距，比如組件樣式。通過這些工作你可以深入了解less這么CSS預處理語言，傳送門
自動化構建What the fuck！不就是寫靜態頁嗎？這和自動化構建有什么關系？你丫也太能折騰了。
當然，傳統使用DW畫頁面確實是不需要的。不過如果你是對工作效率有一點點追求的工程師，那么，你一定會采用自動化構建，讓我們來看看，自動化之后有什么好處。
去除重復工作。通過自動化，你可以將重復的工作都交給構建工具來完成，比如通用頭部、尾部、banner等等可以抽象成獨立模板引入。
通過構建可以進行less代碼編譯、壓縮、合并等，這一切都在你按下command+s的瞬間完成
避免出現低級錯誤。如果你經常切圖的話一定出現過，拷貝一個新的HTML后發現樣式錯亂了，原來是css引用沒改名字~~，這類問題都可以通過自動化解決。想想生活是不是美好很多呢。
解放ctrl+c/v。這就不需要解釋了吧~~畢竟80%的代碼都是這么產生的嘛。。。
提高效率。解決了上面的問題，還不能提升你的效率？
增加技能樹，既然是前端來做自動化構建，那么我首推gulp 畢竟gulp的口號是Automate and enhance your workflow嘛。
如果你也是這么做，并且想到有更多益處，請給我留言^_^
協作 傳統方式傳統的前后端切圖協作方式是，A（切圖仔）將靜態頁面寫好之后，通知 B（后端工程師），將頁面通過QQ、Email等方式發送給 B，B將代碼下載后，在本地預覽，確定符合需求后，將靜態頁面套成后端模板（例如我司使用的FreeMarker）。
配合代碼管理工具一個復雜的項目，大多會用到代碼管理工具（常用的如Git、SVN等）。有了代碼管理工具以后，A 將靜態頁面寫好之后，只需要提交代碼，通知 B，B將代碼拉取后本地預覽，確定符合需求后，將靜態頁面套成后端模板。
我是怎么做的？在我司，后端采用的是SVN進行代碼管理。我們前端部門采用的是自己搭建的Gitlab。作為一個前端工程師，我毫不掩飾自己對Git的鐘愛。讓我使用SVN，我是不樂意的。讓后端遷移到Git上？這就像空格與Tab的一場圣戰~
當然這不是最主要的，有過切圖經驗的同學應該都有過這種經驗。你幸幸苦苦寫完一個頁面之后，后端同學往往會發表一些想法（雖然他們自己不寫）。這里要改一下，那里改一下，如此等等。產品經理就是這么被揍的，不是嗎？為了避免這種情況，最好是不是在后端用之前先讓他們看一看？
提供一個可以在線預覽靜態頁面的地方，后端工程師在使用之前先在線預覽頁面并給出意見。我采用Node.js提供一個Server服務，提供靜態頁面預覽。
提供一個在線下載源碼的地方，畢竟我不想為了一個代碼管理工具，發起一場戰斗^_^，通過Node.js提供動態打包壓縮功能，支持單個頁面獨立打包和打包所有頁面。
上面的功能應該是自動化的，基于Gitlab的Hook功能，自動構建發布
一些經驗所謂解決方案，大致可以分為兩種:
一種是普適性的，這種往往會形成一套框架，如：Angular、React、vue等；
一種是基于特定業務的，這種往往是多個技能樹拼湊起來的一套流程
By vczero
我個人很認可這種說法。我自己更看重基于業務的解決方案，更能夠考驗一個人的整體素質。
在我看來，解決方案沒有最好，只有更合適，需要工程師在不斷自我完善的過程中以不斷創新的標準要求自己。我倡導一切技術性研究都應該以業務為基礎。
我在生活中比較喜歡用意淫這個詞，在面試中發現有很多程序員喜歡背名詞，以前端為例，什么Angular、React、Node.js、NPM、Bower如此等等，再一細問絕大多數都只是停留在一個demo中，并不能領會這些技術的精髓，以及了解技術的適用場景，我把這些稱為意淫；工作中經常遇到一大堆整天吹噓各種技術名詞的人，工作中卻仍然不能突破自己的舒適區，我把這些也稱為意淫；
寫在最后，我個人認為產品經理是這個世界上意淫頻率最高的物種。沒錯！我就是這么直接。
寫在最后的最后，不論你在從事什么工作，請成長在每一次業務中
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79714.html
摘要：開工，我是如何定義現代切圖的既然所有后臺都有計劃重做，那么統一風格那就是必須的了。我們前端部門采用的是自己搭建的。讓我使用，我是不樂意的。我采用提供一個服務，提供靜態頁面預覽。沒錯我就是這么直接。 歡迎一起交流 歡迎關注我的個人公眾號，不定期更新自己的工作心得。 showImg(https://segmentfault.com/img/bVEk23?w=258&h=258); 什么是靜...
摘要：下面是我整理下來的知識點圖上的知識點都可以在我其他的文章內找到相應內容。在中，尤其重要的是對象。 下面是我整理下來的JSP知識點: showImg(https://segmentfault.com/img/remote/1460000013229216?w=4962&h=2653); 圖上的知識點都可以在我其他的文章內找到相應內容。 JSP常見面試題 jsp靜態包含和動態包含的區別 j...
摘要：前戲今年，對于我個人而言遭遇了三個重大的轉折點。盡可能的把溝通成本用約定和文檔降低。學習的這一年可以說年的學習，在上半年的精力，放在了技術上。而下半年則相反。 前戲 今年，對于我個人而言遭遇了三個重大的轉折點。 15年9月大三休學創業，16年9月重新復學大三 在2016年4月順利引進天使輪，公司從廈門集美區搬到了深圳南山區 16年底，我們正在準備接入A輪 16年與15年相比，總體來...
閱讀 1231·2021-11-11 16:54
閱讀 881·2021-10-19 11:44
閱讀 1344·2021-09-22 15:18
閱讀 2453·2019-08-29 16:26
閱讀 2956·2019-08-29 13:57
閱讀 3099·2019-08-26 13:32
閱讀 1087·2019-08-26 11:58
閱讀 2337·2019-08-26 10:37
