本文首發(fā)在我的個人博客：http://cherryblog.site/
歡迎大家前去參觀，順便求fork，么么噠~

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

• seo優(yōu)化
• 多終端修改項目
• 同時托管到github和coding上
• 設(shè)置google和百度sitemap，讓搜索引擎更好的抓取你的網(wǎng)站
• 使用gulp對css、js進(jìn)行優(yōu)化
• 接入七牛圖床
• 加入打賞功能
• 加入照片模塊

開始做這個博客的時候是想著記錄自己學(xué)習(xí)的過程，并沒有指望別人發(fā)現(xiàn)（自己比較菜，寫的都是一些基礎(chǔ)的東西，也沒有什么特別nb的技巧值得炫耀〒▽〒），但是自從給博客增加了統(tǒng)計的功能之后，并且在掘金社區(qū)發(fā)布之后，看著每天還有那么百十號人來看看，內(nèi)心還有點小激動呢_[](￣▽￣)~*

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

所以我就在想，怎么才能讓其他小伙伴搜索到我寫的文章呢？于是就想到了對網(wǎng)站進(jìn)行seo優(yōu)化，這段時間也一直在做網(wǎng)站的seo優(yōu)化，對于hexo生成的博客來說，代碼其實修改的并不多，主要是要多用心去給各個搜索引擎提交你的sitemap，讓搜索引擎的小蜘蛛多來你的站點，這樣別人在搜索東西的時候才有更多的可能搜出你的文章，給你的網(wǎng)站帶來人氣~

作為一個前端工作者，對網(wǎng)站的優(yōu)化肯定還是需要有很多的，奈何時間基本都被工作占用，所以就先把優(yōu)化功能先放了放，只進(jìn)行了代碼壓縮

在這半個月的時間，對于hexo搭建搭建的個人博客，雖然沒有讓我對某一門語言的深度增加，但是卻讓我對整個建站流程的寬度增加了不少，優(yōu)化是一件比寫出代碼的技術(shù)難度還要高的事情。

seo優(yōu)化

推廣是一個煩人的事情啊喂，特別是對于我們搞技術(shù)的來說，可能就不擅長推廣，那么怎么才能讓別人知道我們呢，我們就要想辦法讓別人通過搜索就可以搜索到你博客的內(nèi)容，給我們帶來自然流量，這就需要seo優(yōu)化,讓我們的站點變得對搜索引擎友好

SEO是由英文Search Engine Optimization縮寫而來， 中文意譯為“搜索引擎優(yōu)化”。SEO是指通過站內(nèi)優(yōu)化比如網(wǎng)站結(jié)構(gòu)調(diào)整、網(wǎng)站內(nèi)容建設(shè)、網(wǎng)站代碼優(yōu)化等以及站外優(yōu)化。

讓百度收錄你的站點

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

查看站點是否被百度收錄

驗證網(wǎng)站所有權(quán)

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

百度站長添加網(wǎng)站

驗證網(wǎng)站所有權(quán)

生成網(wǎng)站地圖

我們需要使用npm自動生成網(wǎng)站的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:

執(zhí)行完之后就會在網(wǎng)站根目錄生成sitemap.xml文件和baidusitemap.xml文件，可以通過http://www.cherryblog.site/baidusitemap.xml,查看該文件是否生成，其中sitemap.xml文件是搜索引擎通用的文件，baidusitemap.xml是百度專用的sitemap文件。

向百度提交鏈接

然后我們就可以將我們生成的sitemap文件提交給百度，還是在百度站長平臺，找到鏈接提交，這里我們可以看到有兩種提交方式，自動提交和手動提交，自動提交又分為主動推送、自動推送和sitemap

如何選擇鏈接提交方式
1、主動推送：最為快速的提交方式，推薦您將站點當(dāng)天新產(chǎn)出鏈接立即通過此方式推送給百度，以保證新鏈接可以及時被百度收錄。
2、自動推送：最為便捷的提交方式，請將自動推送的JS代碼部署在站點的每一個頁面源代碼中，部署代碼的頁面在每次被瀏覽時，鏈接會被自動推送給百度。可以與主動推送配合使用。
3、sitemap：您可以定期將網(wǎng)站鏈接放到sitemap中，然后將sitemap提交給百度。百度會周期性的抓取檢查您提交的sitemap，對其中的鏈接進(jìn)行處理，但收錄速度慢于主動推送。
4、手動提交：一次性提交鏈接給百度，可以使用此種方式。

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

主動推送>自動推送>sitemap

連接提交

主動推送

安裝插件npm install hexo-baidu-url-submit --save
然后再根目錄的配置文件中新增字段

baidu_url_submit:
  count: 100 # 提交最新的一個鏈接
  host: www.cherryblog.site # 在百度站長平臺中注冊的域名
  token: 8OGYpxowYnhgVsUM # 請注意這是您的秘鑰， 所以請不要把博客源代碼發(fā)布在公眾倉庫里!
  path: baidu_urls.txt # 文本文檔的地址， 新鏈接會保存在此文本文檔里

在加入新的deploye

deploy:
 - type:baidu_url_submitter

這樣執(zhí)行hexo deploy的時候，新的鏈接就會被推送了

設(shè)置自動推送

在主題配置文件下設(shè)置,將baidu_push設(shè)置為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\next\layout_scripts\baidu_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文件提交到百度就可以了~

將sitemap提交到百度

站點已被百度收錄

站點已被百度收錄

站點已被百度收錄

讓google收錄你的站點

相比于百度，google的效率實在不能更快，貌似十分鐘左右站點就被收錄了，其實方法是和百度是一樣的，都是先驗證你的站點所有權(quán)，然后提交sitemap
google站點平臺：https://www.google.com/webmasters/，然后就是注冊賬號、驗證站點、提交sitemap，一步一步來就好，過不了過久就可以被google收錄了

站點已被google收錄

站點已被google收錄

站點已被google收錄

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

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

優(yōu)化你的url

seo搜索引擎優(yōu)化認(rèn)為，網(wǎng)站的最佳結(jié)構(gòu)是用戶從首頁點擊三次就可以到達(dá)任何一個頁面，但是我們使用hexo編譯的站點打開文章的url是：sitename/year/mounth/day/title四層的結(jié)構(gòu)，這樣的url結(jié)構(gòu)很不利于seo，爬蟲就會經(jīng)常爬不到我們的文章，于是，我們可以將url直接改成sitename/title的形式，并且title最好是用英文，在根目錄的配置文件下修改permalink如下：

url: http://cherryblog.site
root: /
permalink: :title.html
permalink_defaults:

其他seo優(yōu)化

seo優(yōu)化應(yīng)該說是一個收益延遲的行為，可能你做的優(yōu)化短期內(nèi)看不到什么效果，但是一定要堅持，seo優(yōu)化也是有很深的可以研究的東西，從我們最初的網(wǎng)站設(shè)計，和最基礎(chǔ)的標(biāo)簽的選擇都有很大的關(guān)系，網(wǎng)站設(shè)計就如我們剛剛說的，要讓用戶點擊三次可以到達(dá)網(wǎng)站的任何一個頁面，要增加高質(zhì)量的外鏈，增加相關(guān)推薦（比如說我們經(jīng)常見到右側(cè)本站的最高閱讀的排名列表），然后就是給每一個頁面加上keyword和描述
在代碼中，我們應(yīng)該寫出能讓瀏覽器識別的語義化HTML，這樣有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重；并且對外鏈設(shè)置nofollow標(biāo)簽，避免spider爬著爬著就爬出去了（減少網(wǎng)站的跳出率），并且我們要盡量在一些比較大的網(wǎng)站增加我們站點的曝光率，因為spider會經(jīng)常訪問大站，比如我們在掘金等技術(shù)社區(qū)發(fā)表文章中帶有我們的站點，這樣spider是很有可能爬到我們中的站點的，so....

• 網(wǎng)站外鏈的推廣度、數(shù)量和質(zhì)量
• 網(wǎng)站的內(nèi)鏈足夠強(qiáng)大
• 網(wǎng)站的原創(chuàng)質(zhì)量
• 網(wǎng)站的年齡時間
• 網(wǎng)站的更新頻率（更新次數(shù)越多越好）
• 網(wǎng)站的服務(wù)器
• 網(wǎng)站的流量：流量越高網(wǎng)站的權(quán)重越高
• 網(wǎng)站的關(guān)鍵詞排名：關(guān)鍵詞排名越靠前，網(wǎng)站的權(quán)重越高
• 網(wǎng)站的收錄數(shù)量：網(wǎng)站百度收錄數(shù)量越多，網(wǎng)站百度權(quán)重越高
• 網(wǎng)站的瀏覽量及深度：用戶體驗越好，網(wǎng)站的百度權(quán)重越高

同時托管到github和coding上

前面已經(jīng)提到過一個慘絕人寰的消息，那就是github是不允許百度的爬蟲爬取內(nèi)容的，所以我們的項目如果是托管在github上的話基本是不會被百度收錄的，所以我又同時托管到了coding上，然后在做解析的時候海外的ip 指向到github，國內(nèi)的或者說百度的直接指向coding

將你的項目托管在coding上

coding

Coding 是一個面向開發(fā)者的云端開發(fā)平臺[1] ，目前提供代碼托管，運(yùn)行空間，質(zhì)量控制，項目管理等功能。此外，還提供社會化協(xié)作功能，包含了社交元素，方便開發(fā)者進(jìn)行技術(shù)討論和協(xié)作。
2016年3月CODING宣布收購代碼托管平臺GitCafe。

之前好多小伙伴都是將項目托管在gitcafe上，但是現(xiàn)在gitcafe被coding收購了，于是就轉(zhuǎn)到coding上了，之前好多人說github的服務(wù)器在國外，于是就轉(zhuǎn)戰(zhàn)國內(nèi)的coding了，我將代碼遷移至coding還有另外一個原因，github不讓百度的爬蟲爬取啊，讓我哭一會，不然也不會這樣折騰。coding就是中國版的github（只是打一個比喻），有提供pages服務(wù)。

在coding上創(chuàng)建倉庫

首先我們先要創(chuàng)建一個coding賬號并且在coding上創(chuàng)建一個項目,必須要是公開項目，私有項目是沒有page服務(wù)的，項目名稱可以隨意起

創(chuàng)建coding項目

將hexo博客同步到新創(chuàng)建的倉庫中

第一次使用coding需要使用ssh，方法和之前github是一樣一樣的，將ssh公鑰復(fù)制到coding上

自己的ssh公鑰

coding中貼入ssh

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

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

配置成功ssh

然后重新部署hexo就將代碼上傳至coding上了

設(shè)置coding的pages服務(wù)

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

找到pages

配置pages

設(shè)置域名解析

然后我們到萬網(wǎng)下面設(shè)置我們的域名解析，將默認(rèn)ip解析到coding上（這里要注意，解析到coding時記錄值是pages.coding.me，并沒有具體的賬號名或者倉庫名，并且只有設(shè)置完成域名解析才可以在coding上設(shè)置自定義域名），將海外的ip解析到github上，設(shè)置如下：

域名解析

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

多終端編輯hexo博客

之前就想到了一個問題，如果我想要在公司寫博客怎么辦，或者說如果我換電腦了怎么辦，因為在github中的我們github.io項目是只有編譯后的文件的，沒有源文件的，也就是說，如果我們的電腦壞了，打不開了，我們的博客就不能進(jìn)行更新了，所以我們要把我們的源文件也上傳到github上，這道題的解題思路（哈哈，突然想到這個詞了）是，將我們的源文件上傳至username.github.io的Hexo分支，并且設(shè)置為默認(rèn)分支（分支需要自己創(chuàng)建），然后對我們的源文件進(jìn)行版本管理，這樣我們就可以在另一臺電腦上pull我們的源碼，然后編譯完之后push上去。

更為優(yōu)雅的方式是使用travis-ci，然后用webhook自動部署。你只需要寫markdown，push到github就行了。根本不用關(guān)心deploy，只要維護(hù)你的markdown就行。詳情請參考：http://blog.bigruan.com/2015-03-09-Continuous-Integration-Your-Hexo-Blog-With-TravisCI/

創(chuàng)建Hexo分支

創(chuàng)建兩個分支：master 與 Hexo,并將Hexo設(shè)置為默認(rèn)分支（這個Hexo分支就是存放我們源文件的分支，我們只需要更新Hexo分支上的內(nèi)容據(jù)就好，master上的分支hexo編譯的時候會更新的）

刪除文件夾內(nèi)原有的.git緩存文件夾并編輯.gitignore文件

因為有些主題是從git上clone過來的，所以我們要先刪除.git緩存文件，否則會和blog倉庫沖突（.git默認(rèn)是隱藏文件夾，需要先開啟顯示隱藏文件夾。.git文件夾被刪除后整個文件對應(yīng)的git倉庫狀態(tài)也會被清空)
.gitignore文件作用是聲明不被git記錄的文件，blog根目錄下的.gitignore是hexo初始化帶來的，可以先刪除或者直接編輯，對hexo不會有影響。建議.gitignore內(nèi)添加以下內(nèi)容：

/.deploy_git
/public  
/_config.yml

.deploy_git是hexo默認(rèn)的.git配置文件夾，不需要同步

public內(nèi)文件是根據(jù)source文件夾內(nèi)容自動生成，不需要備份，不然每次改動內(nèi)容太多
即使是私有倉庫，除去在線服務(wù)商員工可以看到的風(fēng)險外，還有云服務(wù)商被攻擊造成泄漏等可能，所以不建議將配置文件傳上去

初始化倉庫

然后我們再初始化倉庫，重新對我們的代碼進(jìn)行版本控制

git init
git remote add origin <server>

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

將博客源文件上傳至Hexo分支

依次執(zhí)行

git add .
git commit -m "..."
git push origin hexo

提交網(wǎng)站相關(guān)的文件；

對B電腦進(jìn)行的操作

假設(shè)B電腦現(xiàn)在沒有我們的源文件

git init
git remote add origin <server> #將本地文件和云端倉庫映射起來。
git fetch --all
git reset --hard origin/master

日常改動

平時我們對源文件有修改的時候記得先pull一遍代碼，再將代碼push到Hexo分支，就和日常的使用git一樣~

1. 依次執(zhí)行g(shù)it add .、git commit -m "..."、git push origin Hexo指令將改動推送到GitHub（此時當(dāng)前分支應(yīng)為Hexo）；
2. 然后才執(zhí)行hexo g -d發(fā)布網(wǎng)站到master分支上。

使用gulp壓縮你的代碼

當(dāng)你在你的博客頁面右鍵查看源代碼的時候，你會發(fā)現(xiàn)你的html頁面中會有大段大段的空白，這個時候我們就要使用壓縮工具對我們的代碼進(jìn)行壓縮，在前一段時間參見的前端開發(fā)者大會（FDCon2017）中，攜程的框架式就有講到，在攜程，線上的資源是需要申請的（單位具體到k），所以說我們的代碼不壓縮實在是太奢侈~

什么是gulp

在2017年的前端中，gulp似乎不是最流行的自動化工具，但是誰讓我們公司用的是gulp呢。為了能和公司用一樣的構(gòu)建工具，所以我自己的博客也是使用的gulp。
gulp是前端開發(fā)過程中對代碼進(jìn)行構(gòu)建的工具，是自動化項目的構(gòu)建利器。不僅能對網(wǎng)站的資源進(jìn)行優(yōu)化，并且能在開發(fā)過程中能夠?qū)芏嘀貜?fù)的任務(wù)使其自動完成。

能自動化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測試、檢查、合并、壓縮、格式化、瀏覽器自動刷新、部署文件生成，并監(jiān)聽文件在改動后重復(fù)指定的這些步驟。在實現(xiàn)上，她借鑒了Unix操作系統(tǒng)的管道（pipe）思想，前一級的輸出，直接變成后一級的輸入，使得在操作上非常簡單。

既然gulp是基于node，所以我們就要先有node環(huán)境，不過我們本身就是使用hexo構(gòu)建我們的博客，就已經(jīng)是基于node環(huán)境了~

npm小知識

npm（node package manager）nodejs的包管理器，用于node插件管理（包括安裝、卸載、管理依賴等）

使用npm安裝插件：npm install <name> [g] [--save -dev]

• <name>:node 插件名稱
• -g:全局安裝，會在node安裝的根目錄下載對應(yīng)的包，在計算機(jī)的任何文件都可以使用該插件，默認(rèn)的node安裝目錄是：C:\Users\Administrator\AppData\Roaming\npm;如果不帶該屬性，將會安裝在當(dāng)前目錄，下載安裝包的位置是當(dāng)前目錄的node_modules文件夾
• --save：將配置信息保存在node項目配置文件package.json中
• -dev：保存至package.json的devDependencies節(jié)點，如果沒有該屬性，該插件將會被保存至dependencies節(jié)點，devDependencies和dependencies有什么區(qū)別呢？其實從名字就應(yīng)該可以看出來兩者的區(qū)別，devDependencies中dev是development（開發(fā)）的縮寫，dependencies是依賴的意思。所以 dependencies 是程序正常運(yùn)行所需要安裝的依賴，而devDependencies是開發(fā)所需要的依賴，比如一些單元測試的包~
• 為什么要保存至package.json？因為我們使用node的時候需要很多的包，所以我們將我們的配置信息，也就是我們需要包的名稱等其他信息保存至一個文件中，如果說其他開發(fā)者就可以直接使用一個命令就可以安裝和我們相同的配置，這個命令就是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鏡像，服務(wù)器就在中國。c可以理解為China（應(yīng)該可以這樣理解吧）,cnpm使用方法和npm完全相同，只需將npm全部換成cnpm就可以。本文都是使用的npm，如果想要嘗試cnpmde的麻煩自行替換~

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

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

注意：安裝完后最好查看其版本號cnpm -v或關(guān)閉命令提示符重新打開，安裝完直接使用有可能會出現(xiàn)錯誤；

全局安裝gulp

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

新建package.json

使用npm init就可以創(chuàng)建package.json文件

創(chuàng)建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然后執(zhí)行npm install <name> --save,和gulp有關(guān)的包名稱有以下幾個，只需將<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下面對應(yīng)的包名稱和版本號_{是不是和剛剛所講的npm的知識聯(lián)系到了一塊呢}

建立gulp.js

gulp.js是gulp的配置文件，需要我們手動創(chuàng)建（應(yīng)該還會有更高級的方法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'));
});


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

// 執(zhí)行 gulp 命令時執(zhí)行的任務(wù)
gulp.task('build', [
    'minify-html','minify-css','minify-js','images',
]);

執(zhí)行g(shù)ulp：gulp build

gulpbuild執(zhí)行結(jié)果

在git bash中執(zhí)行

在git bash中直接輸入命令gulp build就可以，這個gulp build是你自己創(chuàng)建的任務(wù)，你創(chuàng)建的任務(wù)是什么名的就在gulp后面跟什么名字

在webstorm中執(zhí)行

webstorm真的太強(qiáng)大，已經(jīng)幫我們繼承了gulp，我們只需要動動鼠標(biāo)就可以執(zhí)行g(shù)ulp

在webstorm中執(zhí)行g(shù)ulp

增加七牛圖床

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

注冊七牛

萬年不變的第一步，注冊。官網(wǎng)：七牛云

上傳資源

在登錄成功之后，點擊對象存儲

上傳資源至七牛

上傳資源至七牛

添加水印

使用七牛圖床最棒的地方在于可以對圖片進(jìn)行處理，我就只拿添加水印來舉例。
七牛可以對上傳的圖片添加圖片樣式

增加圖片樣式

增加圖片樣式

不帶水印的圖片

帶水印的圖片