整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
近寫了幾篇文章，想對每次編寫的文檔做個(gè)版本控制。想到了Github， 將所有的文檔備份到Github。不想每次手動運(yùn)行hugo 編譯和發(fā)布腳本，于是就有了下面的GithubActions工作流。借助GitHubActions完成對博客文章的自動化發(fā)布部署。
首先，我們在Github上面創(chuàng)建一個(gè)倉庫，用于存儲博客的數(shù)據(jù)。靜態(tài)博客推薦使用Hugo，非常簡單。使用Markdown語法，官方提供了很多不錯(cuò)的主題模板。
這里我是用主干main 分支存儲項(xiàng)目的代碼， 單獨(dú)創(chuàng)建一個(gè)分支存儲編譯后的靜態(tài)HTML資源文件。我們切換到另外一個(gè)分支看下：
新建一個(gè)工作板可以自定義狀態(tài)，簡單的將每次的博客優(yōu)化需求記錄在這里。這里的每一項(xiàng)任務(wù)都可以轉(zhuǎn)換為issue，提交代碼可以對應(yīng)的issue關(guān)聯(lián)。
使用Github actions 作為構(gòu)建。設(shè)置在main分支提交代碼即構(gòu)建。
name: github pages
on:
push:
branches: [ main ]
簽出主干分支代碼，刪除pages-git
作流設(shè)計(jì)器javascript 源碼，就問你香不香，拿走不謝～，先看看demo效果，pc端瀏覽器版http://kgo-js.com/htmls/xbpmdesignsample.html
立一個(gè)好的前端架構(gòu)是開始開發(fā)Web應(yīng)用或網(wǎng)站的一個(gè)基本步驟。良好的實(shí)踐和編碼常規(guī)是必不可少的，但是結(jié)構(gòu)呢？我們?nèi)绾卧诳煽氐臅r(shí)間內(nèi)構(gòu)思一個(gè)好的架構(gòu)？但最重要的事情是，我們應(yīng)該從哪里開始？
當(dāng)我開始思考這個(gè)問題時(shí)，我意識到一些事情：
我想要一個(gè)多頁面項(xiàng)目（一個(gè)Web應(yīng)用或網(wǎng)站）；
我希望我的項(xiàng)目支持不同的屏幕尺寸和分辨率，換句話說，我希望它是響應(yīng)式的；
我希望最終產(chǎn)品是可被維護(hù)的；
我希望最終產(chǎn)品性能上是出色的；
我希望可以為將來的項(xiàng)目重復(fù)使用相同的模板。
正確的工具
現(xiàn)在我們擁有大量很酷的工具可以用于現(xiàn)代化前端開發(fā)工作流中。因此，面對第1、2點(diǎn)我告訴自己我需要一個(gè)基于CSS體系結(jié)構(gòu)的中斷點(diǎn)（能夠幫我支持不同的設(shè)備和桌面的大?。?。而另一個(gè)方面大量的CSS和文件可能會有點(diǎn)混亂（這違背了第3點(diǎn)），這就是為什么我決定開始使用CSS預(yù)處理器的原因。關(guān)于第4點(diǎn)，答案很簡單，我決定使用Gruntjs。而第5點(diǎn)在我看來Yeoman是一個(gè)很好的解決方案。
組織工作流
每個(gè)前端項(xiàng)目總是包含庫、jQuery插件和大量的JavaScript&CSS文件（或本文例子中的SCSS）以達(dá)到不同的目的和目標(biāo)。使用不同的技術(shù)手段混合所有的元素，并把它們放在一起，這意味著建立一個(gè)前端工作流。我們會發(fā)現(xiàn)自己在管理一個(gè)巨大的、涉及不同技術(shù)的工作流。這就是為什么我們需要將所有東西通過遵循一種模式或公約置入文件夾中，以此來保持清晰、整潔。這對我們而言是非常重要的。
我們可以在巨大的組合中選擇分解所有基本的前端組件，如以下所示：
SCSS 文件
scripts（腳本）
views（視圖）
當(dāng)然我們還可以繼續(xù)細(xì)分：
SCSS
variables（變量）
mixins（混合類）
公共部分到每一個(gè)布局
單一布局
js
庫（如：jquery、angularjs、gAnalytics等等）
插件（通常為jquery插件）
控制器（我的意思是類似angularjs這樣的控制器）
在一個(gè)基于模板的架構(gòu)（例如使用blade.php或jade with nodejs）我們也可以將視圖分割如下：
views
公共部分到每一個(gè)視圖
單一視圖
視圖這塊在本文不做討論，因?yàn)槲壹僭O(shè)項(xiàng)目里每個(gè)頁面或布局只有一個(gè)視圖（一個(gè)HTML文件）。
基于這些初步的考慮，下面展示的是我的文件夾樹：
文件夾樹注解
imgs
存放所有的圖片文件：.png、.jpg、.jpeg、壁紙等。
示例：icon.png、home-background.jpeg、userAvatar.jpg。
js（主文件夾）
存放.js文件。子文件夾組織情況如下：
\controllers（子文件夾）
存放angular控制器，每一個(gè)控制器都有一個(gè)與對應(yīng)視圖相同的名字。比如，如果home.html需要一個(gè)angular控制器，你可以創(chuàng)建一個(gè)像這樣的文件：project\js\controllers\home.js。
示例：home.js、user-registration.js、user-login.js
\libs（子文件夾）
用于存放JavaScript庫，當(dāng)然這里不包含插件。
示例：jquery-latest.js、angular.js、googleAnalytics.js
\plugins（子文件夾）
插件需要依賴關(guān)系來工作，而庫不需要，這也就是為什么這里創(chuàng)建兩個(gè)文件夾的原因。
示例：jquery-fancyInput.js、restangular.js、customPlugin.js、jquery-airport.js
\views（子文件夾）
存放所有表象的東西，每個(gè)文件都與對應(yīng)的視圖名稱相同。例如，如果home.html需要一些效果、材料以及插件初始值，你可以創(chuàng)建一個(gè)像這樣的文件：project\js\views\home.js。
示例：home-animations.js、user-registration.js、user-login.js、site-animations.js
CSS（主文件夾）
這個(gè)文件夾包含了所有從主SCSS文件中生成的CSS。例如home.scss會在該文件中生成對應(yīng)的home.css文件。
\libs（子文件夾）
即使是對CSS文件，我也會區(qū)分庫和插件，這里有些CSS庫例子。
示例：_meyers-reset.scss、_normalize.scss、_animate.scss、_960gridSystem.scss
\plugins（子文件夾）
CSS文件包含于該文件夾中是使JavaScript插件工作的必備風(fēng)格。
示例：_jquery-fancyInput.scss、_jqueryTooltip.scss
\framework （子文件夾）
我決定在這個(gè)目錄中存放scss文件以共享到整個(gè)項(xiàng)目頁面，框架子文件將以下面的方式組織：
_variables.scss（項(xiàng)目變量聲明——colors、spacings等）
_mixins.scss（項(xiàng)目mixin聲明——typography、clearfix、animations等）
_forms.scss（自定義表單樣式和重置）
_input.scss（自定義輸入樣式和重置）
\layouts (子文件夾)
這是一個(gè)敏感的部分。這個(gè)目錄中的文件以這種方式組織：它們涵蓋所有屏幕分辨率、遵循移動第一的原則。所以，你應(yīng)該使用_all.scss聲明你自己的風(fēng)格。在該文件中的規(guī)格聲明是對所有屏幕尺寸和所有視圖都有效的。如果你希望你的網(wǎng)站適應(yīng)性強(qiáng)的話，就不要僅僅是重寫規(guī)則，為其他屏幕分辨率聲明它們。
文件夾組織結(jié)構(gòu)如下：
phablets (481up) _phablets.scss
tablets and small laptops (768up) _tablets.scss
desktops (1030up) _desktop.scss
desktops with large screens (1204up) _desktop-large.scss
retina displays exceptions (@2x) _retina.scss
這些文件將把握布局異常，被稱為mediaqueries。
請注意：這些文件共享于所有視圖（HTML頁面）。這就是為什么你需要在scss\layouts文件下創(chuàng)建一個(gè)新的文件夾以給定一個(gè)特定的風(fēng)格到一個(gè)特定的頁面。
最后
我知道這不是一個(gè)普遍的解決方案，也許在某些情況下還會包含一些冗余，但我認(rèn)為這是一個(gè)很好的起點(diǎn)。不管目的是什么，我的建議是根據(jù)自己的需求定制自己的體系結(jié)構(gòu)或框架，特別是在不丟失用戶體驗(yàn)的前提下保障性能和可維護(hù)性。
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
