本文首發在我的個人部落格：cherryblog.site/
歡迎大家前去參觀，順便求fork，麼麼噠~

上一次在掘金上發表的hexo高階教程：hexo高階教程next主題優化之加入網易雲音樂、網易雲跟帖、動態背景、自定義主題、統計功能，收到了不少朋友的喜歡，手動比心♪(＾∀＾●)ﾉ，也有不少朋友私信我給我提改進的意見，本著生命就是要折騰的原則，我又做了如下的優化：

• seo優化
• 多終端修改專案
• 同時託管到github和coding上
• 設定google和百度sitemap，讓搜尋引擎更好的抓取你的網站
• 使用gulp對css、js進行優化
• 接入七牛圖床
• 加入打賞功能
• 加入照片模組

開始做這個部落格的時候是想著記錄自己學習的過程，並沒有指望別人發現（自己比較菜，寫的都是一些基礎的東西，也沒有什麼特別nb的技巧值得炫耀〒▽〒），但是自從給部落格增加了統計的功能之後，並且在掘金社群釋出之後，看著每天還有那麼百十號人來看看，內心還有點小激動呢~[]~(￣▽￣)~*

酒香不敵巷子深
我們要做對搜尋引擎友好的站點

所以我就在想，怎麼才能讓其他小夥伴搜尋到我寫的文章呢？於是就想到了對網站進行seo優化，這段時間也一直在做網站的seo優化，對於hexo生成的部落格來說，程式碼其實修改的並不多，主要是要多用心去給各個搜尋引擎提交你的sitemap，讓搜尋引擎的小蜘蛛多來你的站點，這樣別人在搜尋東西的時候才有更多的可能搜出你的文章，給你的網站帶來人氣~

作為一個前端工作者，對網站的優化肯定還是需要有很多的，奈何時間基本都被工作佔用，所以就先把優化功能先放了放，只進行了程式碼壓縮

在這半個月的時間，對於hexo搭建搭建的個人部落格，雖然沒有讓我對某一門語言的深度增加，但是卻讓我對整個建站流程的寬度增加了不少，優化是一件比寫出程式碼的技術難度還要高的事情。

seo優化

推廣是一個煩人的事情啊喂，特別是對於我們搞技術的來說，可能就不擅長推廣，那麼怎麼才能讓別人知道我們呢，我們就要想辦法讓別人通過搜尋就可以搜尋到你部落格的內容，給我們帶來自然流量，這就需要seo優化,讓我們的站點變得對搜尋引擎友好

SEO是由英文Search Engine Optimization縮寫而來， 中文意譯為“搜尋引擎優化”。SEO是指通過站內優化比如網站結構調整、網站內容建設、網站程式碼優化等以及站外優化。

讓百度收錄你的站點

我們首先要做的就是讓各大搜尋引擎收錄你的站點，我們在剛建站的時候各個搜尋引擎是沒有收錄我們網站的，在搜尋引擎中輸入site:<域名>,如果如下圖所示就是說明我們的網站並沒有被百度收錄。我們可以直接點選下面的“網址提交”來提交我們的網站

驗證網站所有權

登入百度站長平臺：zhanzhang.baidu.com, 只要有百度旗下的賬號就可以登入，登入成功之後在站點管理中點選新增網站然後輸入你的站點地址，建議輸入的網站為www開頭的，不要輸入github.io的，因為github是不允許百度的spider爬取github上的內容的，所以如果想讓你的站點被百度收錄，只能使用自己購買的域名

在選擇完網站的型別之後需要驗證網站的所有權，驗證網站所有權的方式有三種：檔案驗證。html標籤驗證和cname解析驗證，使用哪一種方式都可以，都是比較簡單的，但是一定要注意，使用檔案驗證檔案存放的位置需要放在source資料夾下，如果是html檔案那麼hexo就會將其編譯，所以必須要加上的layout:false，這樣就不會被hexo編譯。（如果驗證檔案是txt格式的就不需要），其他兩種方式也是很簡單的，我個人推薦檔案驗證和cname驗證，cname驗證最為簡單，只需加一條解析就好~

生成網站地圖

我們需要使用npm自動生成網站的sitemap，然後將生成的sitemap提交到百度和其他搜尋引擎

安裝sitemap外掛

npm install hexo-generator-sitemap --save     
npm install hexo-generator-baidu-sitemap --save複製程式碼

修改部落格配置檔案

在根目錄配置檔案中修改url為你的站點地址

# URL
## If your site is put in a subdirectory, set url as `http://yoursite.com/child` and root as `/child/`
url: http://cherryblog.site
root: /
permalink: :title.html
permalink_defaults:複製程式碼

執行完之後就會在網站根目錄生成sitemap.xml檔案和baidusitemap.xml檔案，可以通過www.cherryblog.site/baidusitema…

向百度提交連結

然後我們就可以將我們生成的sitemap檔案提交給百度，還是在百度站長平臺，找到連結提交，這裡我們可以看到有兩種提交方式，自動提交和手動提交，自動提交又分為主動推送、自動推送和sitemap

如何選擇連結提交方式
1、主動推送：最為快速的提交方式，推薦您將站點當天新產出連結立即通過此方式推送給百度，以保證新連結可以及時被百度收錄。
2、自動推送：最為便捷的提交方式，請將自動推送的JS程式碼部署在站點的每一個頁面原始碼中，部署程式碼的頁面在每次被瀏覽時，連結會被自動推送給百度。可以與主動推送配合使用。
3、sitemap：您可以定期將網站連結放到sitemap中，然後將sitemap提交給百度。百度會週期性的抓取檢查您提交的sitemap，對其中的連結進行處理，但收錄速度慢於主動推送。
4、手動提交：一次性提交連結給百度，可以使用此種方式。

一般主動提交比手動提交效果好，這裡介紹主動提交的三種方法
從效率上來說：

主動推送>自動推送>sitemap

主動推送

安裝外掛npm install hexo-baidu-url-submit --save
然後再根目錄的配置檔案中新增欄位

baidu_url_submit:
  count: 100 # 提交最新的一個連結
  host: www.cherryblog.site # 在百度站長平臺中註冊的域名
  token: 8OGYpxowYnhgVsUM # 請注意這是您的祕鑰， 所以請不要把部落格原始碼釋出在公眾倉庫裡!
  path: baidu_urls.txt # 文字文件的地址， 新連結會儲存在此文字文件裡複製程式碼

在加入新的deploye

deploy:
 - type:baidu_url_submitter複製程式碼

這樣執行hexo deploy的時候，新的連結就會被推送了

設定自動推送

在主題配置檔案下設定,將baidu_push設定為true：

# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true複製程式碼

然後就會將一下程式碼自動推送到百度，位置是themes
extlayout_scriptsaidu_push.swig,這樣每次訪問部落格中的頁面就會自動向百度提交sitemap

{% if theme.baidu_push %}
<script>
(function(){
    var bp = document.createElement(`script`);
    var curProtocol = window.location.protocol.split(`:`)[0];
    if (curProtocol === `https`) {
        bp.src = `https://zz.bdstatic.com/linksubmit/push.js`;        
    }
    else {
        bp.src = `http://push.zhanzhang.baidu.com/push.js`;
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
{% endif %}複製程式碼

sitemap

將我們上一步生成的sitemap檔案提交到百度就可以了~

我記得被百度收錄過程還是蠻久的，一度讓我以為我的方法有問題，提交連結在站長工具中有顯示大概是有兩天的時候，站點被百度收錄大概花了半個月= =，讓大家看一下現在的成果
在百度搜尋site:cherryblog.site已經可以搜尋到結果

在搜尋框輸入域名也可以找到站點

輸入關鍵字的名字也可以在第二頁就找到呢，好開森~

讓google收錄你的站點

相比於百度，google的效率實在不能更快，貌似十分鐘左右站點就被收錄了，其實方法是和百度是一樣的，都是先驗證你的站點所有權，然後提交sitemap
google站點平臺：www.google.com/webmasters/…

讓其他搜尋引擎收錄你的站點

除了百度和google兩大搜尋引擎，還有搜狗、360等其他的搜尋引擎，流程都是一樣的
，大家就自行選擇新增哈，這裡就不再贅述了~

優化你的url

seo搜尋引擎優化認為，網站的最佳結構是使用者從首頁點選三次就可以到達任何一個頁面，但是我們使用hexo編譯的站點開啟文章的url是：sitename/year/mounth/day/title四層的結構，這樣的url結構很不利於seo，爬蟲就會經常爬不到我們的文章，於是，我們可以將url直接改成sitename/title的形式，並且title最好是用英文，在根目錄的配置檔案下修改permalink如下：

url: http://cherryblog.site
root: /
permalink: :title.html
permalink_defaults:複製程式碼

其他seo優化

seo優化應該說是一個收益延遲的行為，可能你做的優化短期內看不到什麼效果，但是一定要堅持，seo優化也是有很深的可以研究的東西，從我們最初的網站設計，和最基礎的標籤的選擇都有很大的關係，網站設計就如我們剛剛說的，要讓使用者點選三次可以到達網站的任何一個頁面，要增加高質量的外鏈，增加相關推薦（比如說我們經常見到右側本站的最高閱讀的排名列表），然後就是給每一個頁面加上keyword和描述
在程式碼中，我們應該寫出能讓瀏覽器識別的語義化HTML，這樣有助於爬蟲抓取更多的有效資訊：爬蟲依賴於標籤來確定上下文和各個關鍵字的權重；並且對外鏈設定nofollow標籤，避免spider爬著爬著就爬出去了（減少網站的跳出率），並且我們要儘量在一些比較大的網站增加我們站點的曝光率，因為spider會經常訪問大站，比如我們在掘金等技術社群發表文章中帶有我們的站點，這樣spider是很有可能爬到我們中的站點的，so….

• 網站外鏈的推廣度、數量和質量
• 網站的內鏈足夠強大
• 網站的原創質量
• 網站的年齡時間
• 網站的更新頻率（更新次數越多越好）
• 網站的伺服器
• 網站的流量：流量越高網站的權重越高
• 網站的關鍵詞排名：關鍵詞排名越靠前，網站的權重越高
• 網站的收錄數量：網站百度收錄數量越多，網站百度權重越高
• 網站的瀏覽量及深度：使用者體驗越好，網站的百度權重越高

同時託管到github和coding上

前面已經提到過一個慘絕人寰的訊息，那就是github是不允許百度的爬蟲爬取內容的，所以我們的專案如果是託管在github上的話基本是不會被百度收錄的，所以我又同時託管到了coding上，然後在做解析的時候海外的ip 指向到github，國內的或者說百度的直接指向coding

將你的專案託管在coding上

Coding 是一個面向開發者的雲端開發平臺[1] ，目前提供程式碼託管，執行空間，質量控制，專案管理等功能。此外，還提供社會化協作功能，包含了社交元素，方便開發者進行技術討論和協作。
2016年3月CODING宣佈收購程式碼託管平臺GitCafe。

之前好多小夥伴都是將專案託管在gitcafe上，但是現在gitcafe被coding收購了，於是就轉到coding上了，之前好多人說github的伺服器在國外，於是就轉戰國內的coding了，我將程式碼遷移至coding還有另外一個原因，github不讓百度的爬蟲爬取啊，讓我哭一會，不然也不會這樣折騰。coding就是中國版的github（只是打一個比喻），有提供pages服務。

在coding上建立倉庫

首先我們先要建立一個coding賬號並且在coding上建立一個專案,必須要是公開專案，私有專案是沒有page服務的，專案名稱可以隨意起

將hexo部落格同步到新建立的倉庫中

第一次使用coding需要使用ssh，方法和之前github是一樣一樣的，將ssh公鑰複製到coding上

在coding中新增過ssh公鑰之後我們需要修改hexo根目錄下的配置檔案,官方要求配置格式如下

deploy:
  type: git
  message: [message]
  repo:
    github: <repository url>,[branch]
    gitcafe: <repository url>,[branch]複製程式碼

所以我的配置就是這樣的(我這個配置github和coding都有ssh和https兩種方式)：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo:
    #github: git@github.com:sunshine940326/sunshine940326.github.io.git
    github: https://github.com/sunshine940326/sunshine940326.github.io.git
    coding: git@git.coding.net:cherry940326/cherry940326.git
    #coding: https://git.coding.net/cherry940326/cherry940326.git複製程式碼

完成之後在git bash 中輸入

ssh -T git@git.coding.net複製程式碼

如果得到如圖提示就說明配置成功了

然後重新部署hexo就將程式碼上傳至coding上了

設定coding的pages服務

將程式碼上傳至coding之後我們就要開啟pages服務了，在pages頁面我們只需要將部署來源選擇為master分支，然後將自定義域名填寫我們自己購買的域名就可以了

設定域名解析

然後我們到萬網下面設定我們的域名解析，將預設ip解析到coding上（這裡要注意，解析到coding時記錄值是pages.coding.me，並沒有具體的賬號名或者倉庫名，並且只有設定完成域名解析才可以在coding上設定自定義域名），將海外的ip解析到github上，設定如下：

至此就完成了將你的hexo編譯的部落格同時部署在github和coding上

多終端編輯hexo部落格

之前就想到了一個問題，如果我想要在公司寫部落格怎麼辦，或者說如果我換電腦了怎麼辦，因為在github中的我們github.io專案是隻有編譯後的檔案的，沒有原始檔的，也就是說，如果我們的電腦壞了，打不開了，我們的部落格就不能進行更新了，所以我們要把我們的原始檔也上傳到github上，這道題的解題思路（哈哈，突然想到這個詞了）是，將我們的原始檔上傳至username.github.io的Hexo分支，並且設定為預設分支（分支需要自己建立），然後對我們的原始檔進行版本管理，這樣我們就可以在另一臺電腦上pull我們的原始碼，然後編譯完之後push上去。

更為優雅的方式是使用travis-ci，然後用webhook自動部署。你只需要寫markdown，push到github就行了。根本不用關心deploy，只要維護你的markdown就行。詳情請參考：blog.bigruan.com/2015-03-09-…

建立Hexo分支

建立兩個分支：master 與 Hexo,並將Hexo設定為預設分支（這個Hexo分支就是存放我們原始檔的分支，我們只需要更新Hexo分支上的內容據就好，master上的分支hexo編譯的時候會更新的）

刪除資料夾內原有的.git快取資料夾並編輯.gitignore檔案

因為有些主題是從git上clone過來的，所以我們要先刪除.git快取檔案，否則會和blog倉庫衝突（.git預設是隱藏資料夾，需要先開啟顯示隱藏資料夾。.git資料夾被刪除後整個檔案對應的git倉庫狀態也會被清空)
.gitignore檔案作用是宣告不被git記錄的檔案，blog根目錄下的.gitignore是hexo初始化帶來的，可以先刪除或者直接編輯，對hexo不會有影響。建議.gitignore內新增以下內容：

/.deploy_git
/public  
/_config.yml複製程式碼

.deploy_git是hexo預設的.git配置資料夾，不需要同步

public內檔案是根據source資料夾內容自動生成，不需要備份，不然每次改動內容太多
即使是私有倉庫，除去線上服務商員工可以看到的風險外，還有云服務商被攻擊造成洩漏等可能，所以不建議將配置檔案傳上去

初始化倉庫

然後我們再初始化倉庫，重新對我們的程式碼進行版本控制

git init
git remote add origin <server>複製程式碼

<server>是指線上倉庫的地址。origin是本地分支,remote add操作會將本地倉庫對映到雲端

將部落格原始檔上傳至Hexo分支

依次執行

git add .
git commit -m "..."
git push origin hexo複製程式碼

提交網站相關的檔案；

對B電腦進行的操作

假設B電腦現在沒有我們的原始檔

git init
git remote add origin <server> #將本地檔案和雲端倉庫對映起來。
git fetch --all
git reset --hard origin/master複製程式碼

日常改動

平時我們對原始檔有修改的時候記得先pull一遍程式碼，再將程式碼push到Hexo分支，就和日常的使用git一樣~

1. 依次執行git add .、git commit -m “…”、git push origin Hexo指令將改動推送到GitHub（此時當前分支應為Hexo）；
2. 然後才執行hexo g -d釋出網站到master分支上。

使用gulp壓縮你的程式碼

當你在你的部落格頁面右鍵檢視原始碼的時候，你會發現你的html頁面中會有大段大段的空白，這個時候我們就要使用壓縮工具對我們的程式碼進行壓縮，在前一段時間參見的前端開發者大會（FDCon2017）中，攜程的框架式就有講到，在攜程，線上的資源是需要申請的（單位具體到k），所以說我們的程式碼不壓縮實在是太奢侈~

什麼是gulp

在2017年的前端中，gulp似乎不是最流行的自動化工具，但是誰讓我們公司用的是gulp呢。為了能和公司用一樣的構建工具，所以我自己的部落格也是使用的gulp。
gulp是前端開發過程中對程式碼進行構建的工具，是自動化專案的構建利器。不僅能對網站的資源進行優化，並且能在開發過程中能夠對很多重複的任務使其自動完成。

能自動化地完成 javascript/coffee/sass/less/html/image/css 等檔案的的測試、檢查、合併、壓縮、格式化、瀏覽器自動重新整理、部署檔案生成，並監聽檔案在改動後重復指定的這些步驟。在實現上，她借鑑了Unix作業系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操作上非常簡單。

既然gulp是基於node，所以我們就要先有node環境，不過我們本身就是使用hexo構建我們的部落格，就已經是基於node環境了~

npm小知識

npm（node package manager）nodejs的包管理器，用於node外掛管理（包括安裝、解除安裝、管理依賴等）

####使用npm安裝外掛：npm install <name> [g] [--save -dev]

• <name>:node 外掛名稱
• -g:全域性安裝，會在node安裝的根目錄下載對應的包，在計算機的任何檔案都可以使用該外掛，預設的node安裝目錄是：C:UsersAdministratorAppDataRoaming
pm;如果不帶該屬性，將會安裝在當前目錄，下載安裝包的位置是當前目錄的node_modules資料夾
• --save：將配置資訊儲存在node專案配置檔案package.json中
• -dev：儲存至package.json的devDependencies節點，如果沒有該屬性，該外掛將會被儲存至dependencies節點，devDependencies和dependencies有什麼區別呢？其實從名字就應該可以看出來兩者的區別，devDependencies中dev是development（開發）的縮寫，dependencies是依賴的意思。所以 dependencies 是程式正常執行所需要安裝的依賴，而devDependencies是開發所需要的依賴，比如一些單元測試的包~
• 為什麼要儲存至package.json？因為我們使用node的時候需要很多的包，所以我們將我們的配置資訊，也就是我們需要包的名稱等其他資訊儲存至一個檔案中，如果說其他開發者就可以直接使用一個命令就可以安裝和我們相同的配置，這個命令就是npm install，就可以下載package.json 下所有需要的包。npm install --production則只下載dependencies下的包

使用npm解除安裝外掛：npm unstall <name> [-g] [--save-dev]

• 在npm中要解除安裝外掛不是將資料夾刪除就可以了，因為你的配置資訊還在package中，所以要使用npm unstall <name> [-g] [--save-dev] 命令
• 刪除全部外掛:rimraf node_modules（首先你需要先安裝rimraf 外掛）

更新npm外掛：npm update <name> [g] [--save-dev]

使用cnpm

什麼是cnpm呢，大家都知道，由於不可描述原因，我們訪問國外的資源有時候的速度，大家懂的，所以淘寶除了一個npm映象，伺服器就在中國。c可以理解為China（應該可以這樣理解吧）,cnpm使用方法和npm完全相同，只需將npm全部換成cnpm就可以。本文都是使用的npm，如果想要嘗試cnpmde的麻煩自行替換~

這是一個完整 npmjs.org 映象，你可以用此代替官方版本(只讀)，同步頻率目前為 10分鐘 一次以保證儘量與官方服務同步。

cnpm 官網地址：npm.taobao.org；
安裝命令為npm install cnpm -g --registry=https://registry.npm.taobao.org

注意：安裝完後最好檢視其版本號cnpm -v或關閉命令提示符重新開啟，安裝完直接使用有可能會出現錯誤；

全域性安裝gulp

言歸正傳，簡單介紹了gulp和npm，我們需要的是使用gulp壓縮我們的程式碼
npm install gulp -g,然後npm -v 檢視版本號就可以知道我們是不是安裝成功了~★,°:.☆(￣▽￣)/$:.°★。撒花！

新建package.json

使用npm init就可以建立package.json檔案

，然後輸入yes之後你就會在資料夾中找到建立好的package.json檔案。來貼一下我現在的package.json檔案，已經是安裝了不少包的了~

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.2.2"
  },
  "dependencies": {
    "gulp": "^3.9.1",
    "gulp-htmlclean": "^2.7.14",
    "gulp-htmlmin": "^3.0.0",
    "gulp-imagemin": "^3.2.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-uglify": "^2.1.2",
    "hexo": "^3.2.0",
    "hexo-baidu-url-submit": "0.0.5",
    "hexo-deployer-git": "^0.2.0",
    "hexo-generator-archive": "^0.1.4",
    "hexo-generator-baidu-sitemap": "^0.1.2",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.0",
    "hexo-generator-sitemap": "^1.1.2",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.2.0",
    "hexo-renderer-marked": "^0.2.10",
    "hexo-renderer-stylus": "^0.3.1",
    "hexo-server": "^0.2.0",
    "hexo-util": "^0.6.0",
    "hexo-wordcount": "^2.0.1"
  },
  "devDependencies": {
    "gulp-babel": "^6.1.2",
    "gulp-clean": "^0.3.2",
    "hexo-generator-baidu-sitemap": "^0.1.2"
  }
}複製程式碼

本地安裝gulp外掛

在你的Hexo目錄下右鍵git bash here然後執行npm install <name> --save,和gulp有關的包名稱有以下幾個，只需將<name>替換一下就好~

"gulp": "^3.9.1",
    "gulp-htmlclean": "^2.7.14",
    "gulp-htmlmin": "^3.0.0",
    "gulp-imagemin": "^3.2.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-uglify": "^2.1.2",複製程式碼

聰明的你是不是覺得有些眼熟，對的，就是我po出來的package.json中dependencies下面對應的包名稱和版本號~是不是和剛剛所講的npm的知識聯絡到了一塊呢~

建立gulp.js

gulp.js是gulp的配置檔案，需要我們手動建立（應該還會有更高階的方法T T ）
我的gulp.js檔案如下

var gulp = require(`gulp`);
var minifycss = require(`gulp-minify-css`);
var uglify = require(`gulp-uglify`);
var htmlmin = require(`gulp-htmlmin`);
var htmlclean = require(`gulp-htmlclean`);

// 獲取 gulp-imagemin 模組
var imagemin = require(`gulp-imagemin`)

// 壓縮 public 目錄 css
gulp.task(`minify-css`, function() {
    return gulp.src(`./public/**/*.css`)
        .pipe(minifycss())
        .pipe(gulp.dest(`./public`));
});
// 壓縮 public 目錄 html
gulp.task(`minify-html`, function() {
    return gulp.src(`./public/**/*.html`)
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true,  //清除HTML註釋
            collapseWhitespace: true,  //壓縮HTML
            collapseBooleanAttributes: true,  //省略布林屬性的值 <input checked="true"/> ==> <input checked />
            removeEmptyAttributes: true,  //刪除所有空格作屬性值 <input id="" /> ==> <input />
            removeScriptTypeAttributes: true,  //刪除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true,  //刪除<style>和<link>的type="text/css"
            minifyJS: true,  //壓縮頁面JS
            minifyCSS: true  //壓縮頁面CSS
        }))
        .on(`error`, function(err) {
            console.log(`html Error!`, err.message);
            this.end();
        })
        .pipe(gulp.dest(`./public`))
});
// 壓縮 public/js 目錄 js
gulp.task(`minify-js`, function() {
    return gulp.src(`./public/**/*.js`)
        .pipe(uglify())
        .pipe(gulp.dest(`./public`));
});


// 壓縮圖片任務
// 在命令列輸入 gulp images 啟動此任務
gulp.task(`images`, function () {
    // 1. 找到圖片
    gulp.src(`./photos/*.*`)
    // 2. 壓縮圖片
        .pipe(imagemin({
            progressive: true
        }))
        // 3. 另存圖片
        .pipe(gulp.dest(`dist/images`))
});

// 執行 gulp 命令時執行的任務
gulp.task(`build`, [
    `minify-html`,`minify-css`,`minify-js`,`images`,
]);複製程式碼

執行gulp：gulp build

在git bash中執行

在git bash中直接輸入命令gulp build就可以，這個gulp build是你自己建立的任務，你建立的任務是什麼名的就在gulp後面跟什麼名字

在webstorm中執行

webstorm真的太強大，已經幫我們繼承了gulp，我們只需要動動滑鼠就可以執行gulp

增加七牛圖床

增加七牛圖床就是要將我們電腦上的圖片上傳至七牛，然後獲得外鏈，在我們使用md寫部落格的時候直接插入外鏈，更方便的是可以直接獲取帶水印、壓縮、剪裁過後的圖片~

註冊七牛

萬年不變的第一步，註冊。官網：七牛雲

上傳資源

在登入成功之後，點選物件儲存

上傳完圖片之後，關閉上傳頁面，可以在圖片列表的最後面有一個眼睛的icon，點選之後就會在右下角找到該圖片的外鏈，在用md寫部落格的時候就可以直接加入外鏈就好~也可以對上傳的原始檔進行重新命名，因為大部分我上傳到七牛上的圖片都是相簿中使用的，所以我將原始檔的名字都改成統一的形式，在引用的時候只需要修改最後的數字就可以~

新增水印

使用七牛圖床最棒的地方在於可以對圖片進行處理，我就只拿新增水印來舉例。
七牛可以對上傳的圖片新增圖片樣式

增加圖片樣式就是對圖片進行處理，這裡的處理方式有很多，比如縮放方式、裁剪、增加圖片水印、設定輸出格式。

在設定了圖片樣式之後我們要怎麼使用呢，開始我也是一臉懵逼的，不知道怎麼使用，百度之後才知道，你直接訪問獲取的外鏈就是你上傳的原圖，在外鏈的後面加上連線符和你的樣式名稱訪問的就是經過處理後的圖片，有沒有很贊~既可以訪問到你的原圖片，也可以訪問到經過處理後的圖片，只不過是連線不同，還可以給一個圖片增加多個樣式訪問，就不需要我們一張一張對圖片進行處理了~簡直不能太贊~(～￣▽￣)～比如:我的原圖地址是：oova2i5xh.bkt.clouddn.com/IMG49.jpg ，可以看到是一張很大的不帶水印的圖片

然後在該地址後加上我設定的連線符,”-“和我的樣式名稱：oova2i5xh.bkt.clouddn.com/IMG49.jpg-c… ，就可以看到是一張帶水印的小圖，我進行了縮放和加水印